How to Use The HTML5 Sectioning Elements

Beginner’s Guide to Ajax Development with PHP

10th April 2014

MVC3: Layouts, RenderBody, RenderPage, RenderSection

26th April 2014

Published by XpertLab on 13th April 2014

Tags

HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content.

In this post you’ll learn how to use these sectioning elements in your own web sites. I’ll be explaining when you should use certain elements over others, as well as when it’s best to stick to a good old <div>.

Lets get started.

The main Element

The <main> element should contain the main content for your web page. All of this content should be unique to the individual page, and should not appear elsewhere on the site. Any content that is repeated on multiple pages (logos, search boxes, footer links, etc.) should not be placed within the <main> element.

The example below uses a <main> element to represent the main content for the page

<body>

<div id=”logo”>Rocking Stone</div>

</header>

<h1>Guitars</h1>

<p>The greatest guitars ever built.</p>

<h2>Gibson SG</h2>

</article>

<h2>Fender Telecaster</h2>

</article>

</main>

</body>

Note: We’ve used the ARIA role=”main” attribute here is it indicates the significance of this element to programs that don’t yet support the <main> element (such as some screen readers).

You should only use one <main> element on a page, and it shouldn’t be placed within an<article>, <aside>, <header>, <footer>, or <nav> element.

The article Element

The <article> element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like news articles, blog posts, or user comments.

<h1>Blog Post Title</h1>

<p>Posted 13th February 2014</p>

</header>

<p>

…

</p>

</article>

You can nest <article> elements within one another. In this case it’s implied that the nested elements are related to the outer <article> element.

<h1>Blog Post Title</h1>

<p>Posted 13th February 2014</p>

</header>

<h2>Comments</h2>

<p>Posted by: Joe Balochio</p>

</footer>

<p>This was a great article</p>

</article>

<p>Posted by: Casey Brock</p>

</footer>

<p>How do you think this applies to the plan for world domination?</p>

</article>

</section>

</article>

In this example we’ve used <article> elements to mark up the blog post, and each of the comments. This nesting pattern implies that the comments are related to the topic of the main blog post.

The section Element

The <section> element is used to represent a group of related content. This is similar to the purpose of an <article> element with the main difference being that the content within a<section> element doesn’t necessarily need to make sense out of the context of the page.

It’s advisable to use a heading element (<h1> – <h6>) to define the topic for the section.

Using this blog post as an example, you could have <section> elements that represent each of the individual parts within the post.

<h1>How to use HTML5 Sectioning Elements</h1>

<h2>The <main> Element</h2>

</section>

<h2>The <article> Element</h2>

</section>

<h2>The <section> Element</h2>

</section>

…

</article>

Here we’ve used an <article> element to represent the post as a whole, and then multiple<section> elements to represent each of the sub-topics discussed in the post.

If you just need to group content together for styling purposes you should use a <div> element rather than a <section>.

The nav Element

The <nav> element is used to mark up a collection of links to external pages or sections within the current page. As well as being used for the main website navigation, the <nav> element is also a good fit for things like a table of contents, or a blogroll.

<nav>

<ul>

<li><a href=”#chapter-one”>Chapter One</a>

<li><a href=”#chapter-two”>Chapter Two</a>

<li><a href=”#chapter-three”>Chapter Three</a>

</ul>

</nav>

Marking up your links within a list will often make your navigation easier to use, however this is not a requirement when using a <nav> element.

The aside Element

The <aside> element is used to represent content that is tangibly related to the content surrounding it, but could be considered separate. This includes things like sidebars (like those you might find in a book), groups of <nav> elements, figures and pull quotes.

<h1>Google Buys Nest</h1>

<p>Posted at 11:34am 13th January 2014</p>

</header>

<aside>

<h1>Google (GOOG)</h1>

<p>Google was founded in 1998 by Larry Page and Sergey Brin. The company…</p>

</aside>

</article>

In this example we’ve used an <aside> element to mark up information about Google within a news article. The company information in the <aside> could be considered useful by the reader but it’s not directly related to the news story.

The header Element

The <header> element is used to represent the introductory content to an article or web page. This will usually contain a heading element as well as some metadata that’s relevant to the content, such as the post date of a news article for example. It could also contain a table of contents (within a <nav> element) for a longer document.

A <header> element will be associated with the nearest sectioning element, usually it’s direct parent in the page structure.

<h1>Google buys Nest</h1>

<p>Posted at 11:34am 13th January 2014</p>

</header>

In this example the <header> element contains the title and posted date for a news article.

The footer Element

The <footer> element is used to represent information about a section such as the author, copyright information, or links to related web pages.

</footer>

As with <header>, the <footer> element is associated with the nearest sectioning element.

The address Element

The <address> element is one of the most commonly misunderstood HTML elements. This element is not for marking up postal address, but rather for representing the contact information for an article or web page. This could be a link to the author’s website or their email address.

Contact <a href=”mailto:matt@example.com”>Matt West</a>

</address>

This element is often used within the <footer> for an <article>.

<h1>Google buys Nest</h1>

<p>Posted at 11:34am 13th January 2014</p>

</header>

By <a href=”mailto:matt@example.com”>Matt West</a>

</address>

</footer>

</article>

Final Thoughts on the Sectioning Elements

In this post you’ve learned how to use the HTML5 sectioning elements when marking up your web pages. Using these elements has a number of benefits. One of the biggest being that it gives certain areas of your page more semantic meaning, allowing computer programs to identify key elements like the main content and page navigation. This information is extremely useful to applications like screen readers.

Note: Not all screen readers have support for these semantic elements yet. You may want to continue using ARIA roles just to be safe.

Using these sectioning elements also has the benefit of making developers think more about the structure of their web pages. Selecting which element to use for a piece of content isn’t always obvious, but it raises important questions about the purpose of that content, and whether it belongs on the page at all. This is an example of where web standards are not only helping to improve the quality of our markup, but the quality of our web pages as a whole.

I’m interested to hear your thoughts on the HTML5 sectioning elements. Share your views in the comments below.