I’ve seen a lot of confusion on the use of the new HTML5 sectioning tags <article> <section>, <nav>, <aside> and the role left for the old <div> element we used often in previous versions of HTML specifications.
After reviewing the documentation and consulting several examples of usage, a basic practical skeleton for an HTML5 document should look something like this:
<!DOCTYPE html>
<meta content="utf-8">
<title>Your page title</title>
<div id="wrap">
<section id="main">
<header>
<h1>My page title</h1>
<nav>
<ul>
<li>Website main section 1</li>
<li>Website main section 2</li>
<li>Website main section 3</li>
</ul>
</nav>
</header>
<article>
<header>
<h1>My content piece title</h1>
<header>
<p>My content text</p>
</article>
<article>
<header>
<h1>My content piece title</h1>
</header>
<p>My content text</p>
</article>
</section> <!-- closing #main -->
<aside>
<p>Sidebar content</p>
</aside>
</div> <!-- closing #wrap -->
<footer>
<p>This is my footer</p>
</footer>
Here’s a colored chart to understand better the nesting of the elements:
The <div> element has no meaning in semantic web development practices. It should only be used for styling purposes. In my example, I used it as a wrapper for centering the main content with CSS styling. I could have used <section>, but semantically there was no point on having a section that has nothing else but another section immediately inside it. I only need to wrap all the content so I can style the margins and colors of the background. So I use <div> when I need to wrap some content just for presentation purposes.
I always struggle when deciding to use <section> or <article> for a particular piece of content, or how to layout the document’s structure.
The W3C defines the <article> element as:
The article element represents a complete, or 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 <section> element, the specification says:
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.
So in that sense, you can nest <article> in <section> or <article> in <article> and <section> in <article>. Yes, I know, this is still confusing.
On my example structure, I put a main <section> with the ID of “main”. This means I have a “main” section on my page, with a list of articles. Each article has its own heading and content. Some articles might have subsections, hence having <section> nested in <article>.
For the case of nesting <article> in <article>, the W3C exemplifies with a blog post and it’s comments. Since the comments are related to the article, they must be inside the tag, but each comment is an independent piece of content that can be individually distributed (direct link to a comment).
So in that way, the HTML structure will look like this:
<article>
<header>
<h1>My blog post title</h1>
</header>
<p> my post content </p>
<section id="comments">
<article id="comment-1">
<header>
<h1>Comment subject</h1>
<p>by line</p>
</header>
<p>Comment text</p>
</article>
<article id="comment-2">
<header>
<h1>Comment subject</h1>
<p>by line</p>
</header>
<p>Comment text</p>
</article>
</section>
</article>
Here’s the colored chart:
I hope this give a clearer view on how to use the sectioning elements in HTML5 and this example code serves as a quick boilerplate for your projects.
One reply on “HTML5 boilerplate for sectioning tags”
Since “in that sense, you can nest in or in and in “, I believe we could use them intuitively for their semantics: when dividing sections on a page, use ; when presenting the content (either inside the section or not), use . That’s what I’ve been doing.