How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags

Chances are you are living in the past or working on a project that was built in the past that is still marking up content using DIV tags instead of semantic tags like article and section.

Don’t get me wrong, there is nothing wrong with using DIV tags and there will always be a use for them, some pieces of content should be marked up using tags with semantic meaning. They’re not only cleaner, but also help bolster your chances of ranking better on the likes of Google.

Confusion: When do I use article or section tags?

For some developers the distinction between the article and section tags is confusing. Do you use both? Do you use one over the other? And if you use both, what order do they go in and are there limits?

To understand the difference and clear up any confusion, lets go right to the source over at the W3.

Section

The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content. Each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.

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.

Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.

Article

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. Each article should be identified, typically by including a heading (h1-h6 element) as a child of the article element.

A general rule is that the article element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.

Author information associated with an article element (q.v. the address element) does not apply to nested article elements.

Chances are you’ve visited this page before and it still doesn’t make sense to you. Heck reading that again, it is confusing to me as well. In examples for both elements, they show two different use-cases, one use has the section element inside of article and the other one doesn’t use article at all.

From this we conclude that both can be used within one another. It all depends on the context of your page content which determines how the tags are used. For a blog of content you would have a section tag wrapping one or more article tags.

A section tag groups similar content together. So a page comprised of one or more blog posts is worthy of fitting multiple article elements within a section tag. You can then use section tags within the article element itself to contain content that is relevant but different within the article element. The below example will show comments for a blog post using this sub-section method.

I’ll show you an example below to clear up any confusion you might still have.

What the heck is the <main> tag?

The <main> tag is actually a new addition to the HTML5 specification. It has been around for a year and a bit, it is pretty well supported and of course supported via html5shiv for older browsers.

This tag is essentially a wrapper tag that goes around your content. If you’ve ever used a <div id=”main”></div> or <div id=”wrapper”></div> around your content before, the <main> tag essentially replaces it.

The ideal structure

Now we’ve touched upon the tags, lets structure a fictional WordPress blog post. This would be the equivelent of viewing a single blog post (for this example). Parts of this example were taken from the above W3 link with a few additions like the tag added in.

			<main id="wrapper" role="main">

			<section id="content">

				<article id="post-123" itemscope itemtype="http://schema.org/BlogPosting">
					<header>
						<h1 itemprop="headline">Blog Post Title</h1>
						<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
					</header>
					<p>This is some blog post content. Within an article element.</p>

					<footer role="contentinfo"><p>Post written by Dwayne and posted in category: Potatoes.</p></footer>

					<section id="comments">

						<article itemprop="comment" itemscope itemtype="http://schema.org/UserComments">
							<p>This is my all important comment, please don't delete it.</p>

							<footer>
								<p>Posted by: George Washington</p>
								<p><time itemprop="commentTime" datetime="2009-10-10">15 minutes ago</time></p>
							</footer>
						</article>

					</section>

				</article>

			</section>

			<aside id="sidebar" role="complementary">

				

			</aside>

		</main>