HTML5 Semantic Tags

How to use the new HTML5 tags to produce more semantic and useful markup.

Scroll down...

Content

Resources

Comments

HTML5 added several new functional and semantic tags.

The new semantic tags were added because the old HTML4 standard basically assumed that each page was a single entity about a single topic. In the real world, that's just not true so it makes sense to divvy up the page according to which sections and pieces of it mean different things.

This is useful to you the developer because it allows you to write markup for subsections of the page independently from the enclosing document (allowing easy re-use). It's useful to users with accessibility needs and search engines because it helps them parse the meaning of each part of the page more effectively.

In this lesson, we'll cover the new sectioning elements and other semantic tags provided by HTML5. Though it may seem a bit unnecessary now to use these in place of traditional tags, building good semantic pages is part and parcel of being a professional developer.

Let's See Those Diagrams Again

As a quick review, here are the diagrams from before. First, the traditional vs HTML5 page structure:

HTML5 blog index page structure with sectioning elements

...then the structure of a specific post:

HTML5 blog post page structure with sectioning elements

What Are Semantic Tags?

Semantic tags are essentially just <div> elements that wrap particular types of content on the page. They are not required but help the browser, assistive devices, and search engines determine what the structural outline of the page actually looks like.

Using the following elements well will force you to think more logically about exactly what kinds of information are being displayed and where.

Sectioning Elements

Sectioning Elements are a specific category of semantic tags, like the original <body> tag, which define discrete new Sections of your page. Each of them helps create a new "node" in the document outline created by the browser, and sort of acts like a nested document-within-the-document.

<section>:

A section is a new thematic grouping of content on the page, e.g. chapters of a displayed book or subsections of an article. Each section can have it's own heading hierarchy (allowing you to actually have multiple <h1>'s on the page). The browser basically thinks of each section as a new document. See the note in the next section about this

A real-world example would be the Sports or Entertainment sections of a newspaper.

<article>:

A self-contained composition that could potentially be re-published independently. Like a <section>, it allows you to define a new hierarchy. This is handy if you're inserting things like blog posts or articles into an existing template since you don't need to worry about matching the post's header levels with those of the main page template (ie. you're no longer afraid of doubling up the page's <h1> tag). See the note in the next section about this

In the newspaper example, an <article> would, of course, define an article. Each article is self-contained and might be re-published on its own. Sometimes comments are also considered <article>'s when they can be republished independently.

<nav>:

A major navigation grouping of links on the page. Often the main navbar or nav grouping. Essentially, wherever you'd be tempted to write <div class="nav">.

<aside>:

Content that's tangential to the current flow, like what would normally be "pulled aside" and styled differently, e.g. a "Did you know?" box or an advertisement. It's considered "outside the content flow", which is why it gets treated separately.

Notes When Using Sectioning Tags

Because they're relatively new, it's worth clarifying a few useful points about sectioning your page.

Nesting Sections

Ready to go cross-eyed? You can potentially have a <section> wrap an <article> which contains multiple <section>'s of its own and that's fine (think back to the newspaper analogy above -- a long article might have subsections too!). You might even put <section>s within a <nav>.

The point is that tags defining new semantic areas of the page might naturally nest within each other in different ways, so don't let that bother you unless you're losing track of them.

Headers Within Sections

According to the spec, you should also have a proper heading hierarchy (e.g. <h1>, <h2>...) within each of the above-mentioned content-section tags. This helps search engines properly index the content of your page. Without being able to do this, your page's main <h1> is just assumed to represent the full contents of the page, whether that's the case or not (e.g. "The World's Greatest Blog" above doesn't represent the contents of the posts in any way).

You should, therefore, according to the spec, always have a "main" <h1> for the document and then one immediately atop each <article>, <section>, etc to define its label (if it has one).

BUT... as HTMLDog states (and Michael Alexander pointed out):

The HTML5 specifications suggest that you can use h1 elements at the start of each section, which would become a sub-heading of anything preceding that section (so, in the example above, if you had an h1 immediately following the opening article tag, an h1 immediately after an opening section tag would be a sub-heading of that initial h1). This screws backward compatibility, however, and any user agents (including screen readers) that don’t understand this won’t apply properly structured heading levels. We suggest sticking to the headings levels you would use if you didn’t use sections (so h1, followed by h2, etc, regardless of the sectioning). This doesn’t break anything or detract from the meaning or semantics.

So, for now, stick with a traditional hierarchy if you need to support legacy user agents. In this program, it's okay to use either. As time goes on, legacy support will become less of an issue and the new standard will prevail.

When to Use a <div> vs a Section

As another point of clarification, when should you use these sectioning tags instead of a <div>? Well, <div>s are not semantic, meaning that you can use them when you just want to style a group of things together whose content may or may not be related. The sectioning tags are semantic, so you're meant to use them only when the content they wrap fits under their use case.

If you're still unsure of these elements, check out this explanation of sectioning elements

Other Semantic Tags

The following tags do not define new sections on the page (so shouldn't have their own heading tag hierarchy within them) and can be thought of as assistive. This is just an abbreviated list of the ones which you'll most likely encounter.

For a full listing of additional tags, many of which you aren't that likely to encounter anytime soon, see the HTML5 New Elements Page at W3 Schools

<main>:

This defines the page's main content. It shouldn't be enclosed in any of the sectioning tags except the page's <body> tag. It should not contain anything that's repeated elsewhere across your sites like navigation or the main footer.

There should only be one <main> tag on each page (so sections shouldn't use it).

<header>:

A group of introductory or navigational aids, and might include your section's <h1> and <h2> tags as well as a table of contents for the page or an article within it.

<footer>:

The footer for the nearest Content-Section. Essentially, use this where you'd be tempted to write <div id="footer">.

<time>:

An exact timestamp or precise date.

The "pubdate" flag tells search engines and others that this is the official publication date for this section (or the whole document if there is no enclosing section).

The datetime attribute can be formatted either as just a date ("2009-10-22" or with a timestamp as well "2009-10-22T13:59:47-04:00").

<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  October 22, 2009 at 1:59pm EDT
</time>

<address>:

The contextually-relevant address related to a piece of content. Often the contact information for the author of an article and placed within its footer. Does NOT need to be a physical address.

<mark>:

An inline section of text that should be highlighted or "marked up" for reference purposes.

<figure>:

A figure or diagram which accompanies the normal content.

You can actually make up your own elements if you really want to -- browsers will just treat them as being inline by default.

Note: You might see the hgroup element around... it's been removed from the HTML5 spec so don't use it.

Code Review

The important bits of code from this lesson

# *** Sectioning Elements ***
# Create a generic page section
<section>...</section>

# Create a page section designed to be shared or re-used
<article>...</article>

# A grouping of navigation links
<nav>...</nav>

# Content that you want to pull aside from the
# main flow, e.g. "Did you know?" box
<aside>...</aside>

# *** Other Semantic Tags ***
# The main content of a page.  Only one per page!
<main>...</main>

# The wrapper for the main header area of
# the page or section
<header>...</header>

# The wrapper for any finishing content
# in a page or section (e.g. links to related)
<footer>...</footer>

# The timestamp for an article or page
# Can be visible or invisible (for SEO)
<time>...</time>

# With the embedded timestamp and flagged as
# the official publication date of the article
<time datetime="2009-10-22T13:59:47-04:00" pubdate>
  October 22, 2009 at 1:59pm EDT
</time>

# A means of contacting someone relevant to the section
<address>...</address>

# A highlighted area
<mark>...</mark>

# A figure or diagram which fits into the content
<figure>...</figure>

Wrapping Up

Think about how you might use the new semantic tags to wrap something like the blog page used in the example from before. What is the <nav>? How would you potentially define new <article>s or <section>s? What might go in the <footer> or <header>of an individual article?

It can take a bit of practice to remember when it's a good idea to use a semantic tag instead of a normal <div>. To start out, try just sticking with the most obvious tags like <main>, <header> and <section>. Feel free to come back to the diagram here if you need some help in the future.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

Sorry, comments aren't active just yet!

Next Lesson: HTML5 Functional Tags and New Features