HTML5 Semantic Tags

Describing Content

The HTML on most web pages is constructed with two things in mind - the logical structure of the page's content, and any necessary grouping for CSS.

A logical structure for your documents in HTML is actually very important. Not only does it make styling easier, it helps non-CSS enabled browsers and screen readers parse the content properly.

HTML5 includes a collection of about 30 new tags to structure pages much more descriptively. There are two main advantages to using these semantic tags.

  1. They make web content easier for applications and search engines to understand, outline, and catalog.
  2. They make code easier to read for humans. Semantic tags prevent "divitis".

For instance: by using semantic tags to denote the major navigation on a site, search engines can provide users with links directly to different parts of a site. If I search google for Geico, I can navigate directly to different parts of their site right from the search results.

To be fair, this is a very simplified example, and search engines have other ways of determining these subheadings too.

Of the roughly 30 new tags in HTML5, we're only going to be concerned with a small handful. Some are hooks for javascript, and others aren't ready to implement as of this writing.

Here are the new tags you should be familiar with:

Tag
Usage
<header>
Specifies a header for the document or a section of the document. Includes not only a heading (<h1>, <h2>, etc.), but also content like author and post date. There can be multiple header elements on one page.
<main>*
Specifies the main content of a page - the "meat".
<article>
Defines an article - a section of content that's thematically related, and makes sense on its own. In theory, an article could be used for syndicated content. For example, a blog post or news article that can be republished on another web site. There can be multiple articles on a page.
<section>
Defines a section in a document. This is a little confusing because it's similar to an article. Sections are similar to divs and articles, but unlike articles they do not have to make sense on their own. An article may contain multiple sections, or a section of a site can contain articles. The main idea with the section element is that if it makes sense to have a heading, it's probably a section.
<footer>
Defines a footer for a document or article or section. Typically contains information about its section such as who wrote it, links to related documents, copyright info, etc.
<aside>
Defines content aside from the main page content. It may be related to the main content, but it wouldn't be missed if it wasn't there. Think advertisements, or links to related pages and content.
<figure>
<figcaption>
Specifies self-contained content like illustrations, diagrams, photos, code snippets, etc. If it could be moved to a glossary or an appendix, it could be a figure. (Not every image has to or should be a figure.)
<nav>
Defines a group of navigation links. This should be used for major navigation elements, and not for every collection of links anywhere on a page.
<div>
Has no semantic meaning at all. Divs should only be used as "hooks" for CSS styling.

* The <main> tag is unsupported in Internet Explorer all the way up through version 11. Use <main role="main"> or <div class="main"> instead.

Polyfill (Old Browser Support)

Most browsers have a policy of ignoring any tags or other code that they don't understand. While older browsers don't understand these tags, HTML5 was designed so that they would at least respect that the tags exist. However, not all older browsers treat unrecognized tags the same, so they need to be explicitly told how they should be displayed. They need to know that the tags should be treated as block elements, like a <div> and not inline elements like <strong>, <em>, or <img>.

Whenever using these tags (which should be all the time!), include this rule in the "resets" section or somewhere near the top of your style sheet:

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

This will enable support for the <main> in modern versions of Internet Explorer as well.

A note about the <hgroup> tag: this tag has actually been removed from the HTML5 spec so it's use is not recommended. However, since it's already implemented in most browsers, it's unlikely to go away soon and should be included for compatibility.