3-8: Introducing HTML5 footer, header, nav, article, section and aside elements

In the next section we will create a simple HTML5 web page, yet more articulated and complete than the minimal page presented here and then style it. In this page, we will use some of the semantic tags specifically introduced in HTML5 and described below.

To keep things as simple as possible to start with and avoid concepts overcrowding, we have deliberately omitted the discussion about these elements in the previous HTML markup section.
Although we will not use all these elements during this course, you should still be familiar with them as you might want to use them for your projects and/or might encounter them in somebody else’s code that you plan to use.
The names of the footer, header, nav, article, section and aside elements are indeed suggestive of their role/meaning, which is however a bit more subtle, flexible and articulated than it might be expected.

The next figure illustrates the “simple” or “expected”, more immediate meaning of these tag elements. As it happens in HTML5 though, these tags are not there to indicate an element physical position on the page, but rather the nature/meaning of the element contents. Therefore the position of the elements as shown in the figure is just a graphical possibility that fits well with the semantics of the elements, which could very well be respected and represented by an entirely different graphical arrangement.

With these warnings in mind figure 3-8-1 is a good starting point for getting familiar with these elements.

Here are some links to articles where these HTML5 elements are discussed:

HTML structural elements – contains an interesting comparison between HTML4 and HTL5.

A preview of HTML5

HTML5 section, aside, header, nav, footer elements – Not as obvious as they sound

It should be pointed out that none of these new tags are required or mandatory in HTML5. They can help improving the semantics of your web pages/website. You may decide to use only one or a few of these tags in your pages, or maybe none. Without, your page will still validate fine as HTML5.

The scaffold code for a page like the one in figure 3-8-1 could be as follows:

Please note that since all the elements illustrated in figure 3-8-1 are block elements, having the aside to the right of the article(s) block necessarily requires styling with CSS.

The meaning of the various elements in figure 3-8-1 is actually broader than what you might infer from the figure.

Header and footer elements

“header” and “footer” belong/refer to the element they are contained into, their parent.

As used in the figure, the header is the header of the whole page and so is the footer, which is absolutely fine and correct. In this setup, the header can typically embrace a “nav” element with the web site navigation menu. This is the kind of arrangement we will adopt for our pages during this course.

Let’s instead consider a page with several articles inside (just one is shown in the figure), for example a posts page in a Blog. Each article could have it’s own header and footer. The header could contain the title and author of the article, the footer could contain links related to the article, contact info for the author, or something else. In this case, the header would be the header of the parent article element rather than the header of the whole page.

Therefore, several header and footer elements can co-exist in a page, each related to it’s parent element. As for all elements, you should use multiple headers and footers only if really relevant to your page. Less is better, simple is better. Every code you write may need maintenance or editing in the future, the simpler it is, the easier the maintenance.

Article

The semantics of the article element is related to the fact that articles are intended as self-contained “reusable” elements.

—-

From the w3 article definition

“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. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.”

—-

For the purpose of this course we do not really need this element. If you want to deepen your knowledge about this tag check out the relevant pages at w3 schools

Section

—-

From the whatwg section definition

“Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site’s home page could be split into sections for an introduction, news items, and contact information.”

…

“The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.”

—-

For the purposes of this course we will not need section elements. It is however a powerful semantic handle, so we invite you to gain more insights in the correct use of the section element by reading this article at html5doctor.com

Aside

The aside element identifies content that is “tangentially related” to the main contents of the page. In print, for example in a journal or in a book, this could be typically represented by a lateral box or sidebar. Let’s look at the official definition:

—-
From the aside whatwg definition

“The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.”

—-

It is generally appropriate that lateral columns or boxes in a web page or web site are marked up as asides. A typical aside could be the navigation sidebar to the left of these very pages. We will discuss these issues in the layout sections of this chapter.

Nav

Nav elements generally contain website navigation links. These links are typically structured in the form of an unordered list (ul).

Sectioning elements

In HTML5, article, section, aside and nav are known as sectioning elements. Note that header and footer do not belong to this category.

The main characteristic of these sectioning element is that each can have it’s own hierarchy of h1-h6 tags. This is a big change with respect to HTML4.01 where the h tags themselves were the only mean to shape the document outline and you expected a single h1 tag in a page. These new sectioning elements can heavily influence the document outline, making it more articulated and potentially more accessible and “understandable” under a semantic profile, independently from the kind of device it is accessed from. Remember that HTML5 is very much about accessibility over a wide range of devices, including mobiles, tablets and others, where a correct rendering could rely more on the semantics markup of your contents than on your own graphical specifications.

For a more in-depth discussion about the relationship between sectioning elements and the document outline, be sure to read this article on the HTML5 outline algorithm.

Let’s now write down a sample HTML5 web page, with several elements in use, and then style it with CSS. Proceed to the next section.

Chapter Sections

[pagelist include=”135″]

[siblings]