An Introduction to the HTML5 Structural Elements
by Sue Smith
HTML5 introduces an increased level of meaning to web page markup, but you don't need to consult a dictionary to take advantage of it!
As you learn about HTML5 and the slightly different web development approach it brings, the logical place to start is with the new structural elements. While the HTML5 feature set as a whole can be a little intimidating, these new elements are really not too tricky to understand. In this article we will run through the conceptual and practical basics of the header, footer, section, article, nav and aside elements. HTML5 is said to be more meaningful than previous versions of the markup language, so we will touch on the semantic aspects of these new elements along the way.
Create an HTML5 Page
Let's explore the new elements by building a sample page. Check out the demo page to see what we are working towards – it has some additional notes added to make the page structure a little clearer, and you can view and experiment with the page source here. You'll want to leave the demo open to follow along with the tutorial.
Start by creating a new HTML5 document as follows:
<!DOCTYPE html> <html> <head> <title>HTML5 Demo</title> <style type="text/css"> </style> </head> <body> </body> </html>
Note that the first line, the HTML5 doctype, is required when using the new HTML5 elements. (Not familiar with doctypes? You can learn more in this article.)
We will not spend much time on styling in this article, but it is important to add the following two declarations to the CSS <style> section in the page head:
header, footer, section, article, nav, aside {
display: block;
}
header, footer, section, article, nav, aside {
border: 1px solid #000000;
padding: 5px;
margin: 10px;
}
The first declaration (highlighted) should always be present in your stylesheet when using HTML5 elements. By adding display: block; we ensure that the new elements will render as block-level elements in old versions of Internet Explorer that don't have native HTML5 compatibility. (More on ensuring IE compatibility at the end of the tutorial.)
The second set of styles will add element borders so you can see clearly where your new elements are positioned as they are added.
The Header Element
HTML5 semantics come into play with all of the new elements. As you will see throughout this tutorial, the names of the structural HTML5 tags indicate something meaningful about the content or role of the elements they define. The header element is the perfect example. As you may have guessed, it's designed for the header area of a page or page section. The header often contains one or more of the heading tags h1 to h6. However, the header can contain other elements as well. Add the following to the body section of your page:
<header> <h1>Breaking News</h1> <div>Catch up on all the latest news stories.</div> </header>
Imagine that the sample page we are building is for a news website. We will just be using one header element within our page, but you could optionally use more within the page sections.
Before HTML5, <div> elements were the only option for defining block-level page structure. To identify these elements for styling and manipulation, it was common for developers to use id and class attributes with some of the same names as the new structural elements. Typical examples include <div id="header"> and <div id="footer">. If you have used such attribute names in the past, you were including semantic information in your markup whether you were aware of it or not. If you think about it, using an id attribute of header is including meaningful information within your page code; it is information indicating the purpose of the element. As you can already see, HTML5 builds this level of meaning into the markup structures themselves.
Is this earth-shattering? Not really. It's just a cleaner and more logical way of doing what we did before in a hacky non-standard way. This has helpful side-effects, though, such as providing easier navigation for populations with accessibility challenges.
The Footer Element
Let's move straight on to the footer element since it's so similar to the header. At the bottom of your page body, add the following:
<footer> <p>This site is produced by Great Sites Inc.</p> </footer>
As with the header, the footer can contain other elements such as links and images. These first two tags are meaningful in that they indicate something about the content of the elements and about their role within the logical structure of the page, i.e. that the content functions as a header or footer.
The Nav Element
So far we have covered two elements almost every web page contains; now, let's turn to another, the navigation section. The nav element is designed for the main navigation part of a page, which will typically contain a list of links to other pages on the site. Insert the following after your header element:
<nav>
<ul>
<li><a href="#">Technology</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
Again, the nav element can contain other elements. Using this element lets you indicate its function or purpose, as with header and footer. This is another case where many of us used the tag name as an id or class attribute in the past (e.g. <div id="nav">).
The Section and Article Elements
So far so intuitive, but now things get a little more complex. The section and article elements have been the source of confusion for some developers as there is some flexibility about how they are used. Essentially the section element marks sections of the page or sections of another element (such as an article element). The content of a section is grouped together according to some logical theme (which you get to arbitrarily determine). An article element, on the other hand, is for a content item that would stand alone if it were removed from the rest of the page – typical examples would be blog posts or news articles.
To summarize:
<section>= an area of content that is distinct but also a dependent part of a whole<article>= an area of content that is distinct and independent
As always, it's easiest to explore these concepts using practical examples. Let's say our news site page is going to be made up of the following areas, each of which will be represented by a section: a top story; excerpts of a few other main stories; a list of multimedia items; and a list of popular stories. Add section elements for each of these after the nav element, using id attributes to define their purpose and give us hooks for any styling we apply later:
<section id="top_story"> </section> <section id="other_news"> </section> <section id="popular_stories"> </section> <section id="multimedia_items"> </section>
At the moment you can see the overall structure of the page, with header, nav, various section elements for the thematic sections of page content, then the footer. Inside the section elements we will explore the nesting structures available.
A Top Story
Inside the first section for the top story (id="top_story"), begin with a heading:
<h2>Top Story</h2>
Notice that we use an h2 element, since we already have an h1 and this is lower in the page hierarchy. There will come a time when your heading elements will not need to observe this relative hierarchy within the page as a whole, but will be able to be relative to individual page sections; however, for the moment it's safest to keep to the page-wide hierarchy to ensure browser compatibility and accessibility.
The top story should logically be an article so add one after the heading:
<article> </article>
Since the top story is going to be the largest single content item on the page, we will use section elements to divide up the chunks of text content within it. Add the following inside the article:
<section class="intro"> </section> <section class="story"> </section> <section class="conclusion"> </section>
As before, we use attributes to indicate the purpose of each section within the parent article. You can include any text or other content in these sections, simply using dummy text for the moment if you like.
In Other News...
Let's move down to the content of the other_news section. Start with a heading as we did for the top story:
<h2>Other News</h2>
Let's add a few article elements now, to contain the excerpts of these other news stories:
<article> </article> <article> </article> <article> </article>
Add a heading element in each of these new articles, remembering to reflect the hierarchical structure of the page (h1, then h2, then h3 etc):
<h3>Article Heading</h3>
After the heading, add whatever content you like to the article elements, such as paragraph (p) or div elements.
Use the same logic to populate your other two main page sections, as in the following sample for the popular stories section:
<section id="popular_stories">
<h2>Popular Stories</h2>
<ul>
<li><a href="#">Popular Story #1</a></li>
<li><a href="#">Popular Story #2</a></li>
<li><a href="#">Popular Story #3</a></li>
</ul>
</section>
Or the following for the multimedia items section:
<section id="multimedia_items">
<h2>Audio and Video News</h2>
<ul>
<li><a href="#">Audio 1</a></li>
<li><a href="#">Video 1</a></li>
<li><a href="#">Audio 2</a></li>
</ul>
</section>
You can begin to see how these new elements play an enhanced role in terms of defining the page structure, as well as the purpose or content of the individual elements. The section and article elements could also have header and footer elements inside them, but for our page we will stick to having one of each in the page. In general, it's best to use header elements within these other elements only if you need to have multiple header-related tags in that article/section. Since we only have one tag (an h2 heading element), there is no need to wrap it in a header.
The Aside Element
Let's look at one final element to add to our page. The aside element is designed for content that relates to another content item (such as a section or article) but that is not central or essential to the main element. For example, in our demo this could be a "report it" link. Add one to the top story, inside the "top_story" article, after the section elements:
</section>
<aside>
<p>Were you there? Send us an email... </p>
</aside>
</article>
This information is an aside to the top story article content. Let's also add one to a section now, namely the one for multimedia items:
</ul>
<aside>
<p>Please send us your videos... </p>
</aside>
</section>
This time the aside information relates to the section element that it is inside of. And yet again, we can see the purpose of this element by simply reading the tag name.
Taking Care of Internet Explorer
If you've tried any HTML5 techniques before, you won't be surprised to learn that an additional step is necessary to ensure backwards compatibility with older versions of Internet Explorer. By default, IE versions 8 and older don't allow styling on HTML5 tags since the browser doesn't recognize these new tags. However, a tiny JavaScript file colloquially known as the HTM5 Shiv can be used to work around this issue.
You only need to add the following code to the page's head section:
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"></script>
<![endif]-->
(Optional: If you want to use your own copy of the file, you can download the source file from GitHub, add it to your site, then reference that local copy instead.)
The conditional comments ensure that the script is only loaded for the relevant old browser versions.
Conclusion
Making the transition to HTML5 involves some changes in terms of how you approach designing your page structures. However, the advantages are considerable. Well-structured HTML5 yields pages that are more accessible to a variety of users and easier to search. The code is also cleaner to work with, since some of the endless div elements with class and id attributes are replaced by intuitively named elements.
Just to be clear, though, the old <div> tag isn't dead. Nor are id and class attributes. All of these features still play a critical role in page structure. HTML5 structural elements are only the right tool when their name directly describes their role within a page. In these cases, they can and should be used.
Happy coding!