This section is a repository containing deeper explanations of some of the domain elements or terminologies you have come across during the previous sessions.

Learners are welcomed to use this as a reference index where relevant.

Let's begin.

The header Element

There is no restriction to using it just once per page. You can include a new header element to introduce each section of your content. When we use the word “section” here, we are not limiting ourselves to the actual section element described below. Technically, we are referring to what HTML5 calls “sectioning content”.

A header element can be used to include introductory content or navigational aids that are specific to any single section of a page, or that apply to the entire page – or both.

While a header element will frequently be placed at the top of a page or section, its definition is independent from its position. Your site’s layout might call for the title of an article or blog to be off to the left, right, or even below the content. Regardless, you can still use header to describe this content.

The nav element

It is safe to assume that this element will appear in virtually every project. nav represents exactly what it implies: a group of navigation links.

Although the most common use for nav will be for wrapping an unordered list of links, there are other options. You could also wrap the nav element around a paragraph of text that contained the major navigation links for a page or section of a page.

In either case, the nav element should be reserved for navigation that is of primary importance.

The section Element

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.

It further explains that a section should not be used as a generic container that exists for styling or scripting purposes only. If you are unable to use section as a generic container – for example, in order to achieve your desired CSS layout – then you can use the div – which is semantically meaningless.

The section element’s content should be “thematic”, so it would be incorrect to use it in a generic way to wrap unrelated pieces of content. Examples of acceptable uses for section elements include:

• Various sections of an online news site; for example, articles could be grouped into sections covering sports, world affairs and economic news
• Different parts of a lengthy “terms of service” page

Keep in mind, also, that you are permitted to nest elements inside existing section elements, if it is appropriate. For example, for an online news website, the world news section might be further subdivided into a section for each major global region.

The article Element

The article element is similar to the section element, but there are some notable differences. The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

The key terms are self-contained composition and independently distributable. Whereas a section can contain any content that can be grouped thematically, an article must be a single piece of content that can stand on its own. That is to say, if a piece of content can be republished on another site without being modified, or pushed out as an update via RSS, or on social media sites like Twitter or Facebook, it has the makings of an article.

Ultimately, it is up to you to decide what constitutes an article, but here are some suggestions:

• Forum post
• Magazine or newspaper articles
• Blog entries
• User-submitted comments

Finally, just like section elements, article elements can be nested inside other article elements. You can also nest a section inside an article, and vice versa.

The aside Element

This element represents a part of the page that is “tangentially related to the content around the aside element, and which could be considered separate from that content.”

The aside element could be used to wrap a portion of content that is tangential to:

• A specific standalone piece of content (such as an article or section)
• An entire page or document, as is customarily done when adding a “sidebar” to a page or website.

The aside element should never be used to wrap sections of the page that are part of the primary content. The aside content could stand on its own, but it should be part of a larger whole.

Some possible uses for aside include a sidebar, a secondary lists of links, or a block of advertising. It should also be noted that the aside element (as in the case of header) is not defined by its position on the page. It could be on the “side”, or it could be elsewhere. It is the content itself, and its relation to other elements, that defines it.

The footer Element

The final element is the footer element. As with header, you can have multiple footers on a single page, and you should use footer to wrap the section of your page that you would normally wrap inside of <div id=”footer”>.

A footer element represents a footer for the section of content that is its nearest ancestor. The “section” of content could be the entire document, or it could be a section, article, or aside element.

Often, a footer will contain copyright information, lists or related links, author information and similar content that you normally think of as coming at the end of a block of content. However, much like aside and header, a footer element is not defined in terms of its position on the page.

Hence, it does not have to appear at the end of a section, or at the bottom of a page. Most likely it will, but this is not required. For example, information about the author of a blog post might be displayed above the post instead of below it, and still be considered footer information.

Horizontal Rule

A horizontal rule is a very common element used in layout design. It draws a horizontal line in our document. In HTML, the HR tag is used for creating horizontal rules. Horizontal rules have a number of uses including acting as dividers to graphically separate your web page into sections or as underlining for headings.

Just like BR and IMG tags, HR does not have closing tag. Most of the time, HR is used by itself with default attribute values to draw a thin, shaded line across the screen. Using the <hr> tag alone without any attributes or values will draw a horizontal rule at the default height (2 pixels), at the default width (100% of the available horizontal space) and —depending on the browser— with a simple two color groove effect.