A Brief Introduction to HTML 5

— Tagged: HTML5 accessibility web-standards

HTML 5 brings a plethora of new elements that allow you to create more accessible websites. With the introduction of more semantic elements and their connection to WAI-ARIA landmarks, screen readers can interpret your HTML document and offer a greater experience to those who use them.

HTML 5 introduces several new elements to organize your content in a semantic way. These include <header>, <nav>, <main>, <section>, <aside>, and <footer>. When paired with WAI-ARIA landmarks roles, your site will be accessible to those who use screen readers or other assistive devices.

Table of Contents


What Are These New HTML5 Elements And How Do We Use Them?

In the past, you’ve probably used divs for every block of content, likely with a class or ID attached. While continuing that practice will not invalidate your sites, we can now go a step further to make those blocks of content have semantic meaning. These new elements do not replace divs altogether, you will still use them in your markup.

Let’s start at the top- the new HTML5 doctype. Gone are the days of long and impossible to remember doctypes! I’m sure you’ve encountered something like this before,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.
The HTML5 doctype is incredibly simple to remember:

<!doctype html>

We place this at the top of our document and we’re ready to start writing HTML 5? Well, not quite. If we’re still supporting “old browsers” (Internet Explorer 8 and lower), we need to explicitly tell them about our HTML5 elements. In the <head> of our document, we add a bit of Javascript (known as the HTML5 Shim or Shiv) to catch those “old browsers” up-to-date on what we plan to do. This block of code says to the browser, “If you’re a version of Internet Explorer less than version 9, load up this bit of Javascript. This code adds new HTML5 elements, but also supports printing HTML5 elements and includes the default styles for HTML5 elements, like block on article and section.”

<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

A very basic HTML 5 document will look like this:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Sample page</title>
        <meta name="description" content="A description of our sample page.">
        <meta name="keywords" content="keyword,keyword 2, keyword 3">
        <link rel="stylesheet" href="css/style.css">
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <!-- Our page's content -->
        <!-- ... -->
        <!-- Include scripts at the bottom before the closing body tag rather than in the head -->
        <script src="js/scripts.js"></script>
    </body>
</html>

So now that we’ll have all the browsers visiting our site informed that we’re using HTML5, let’s learn about the new elements and when to use them within the body of our document.

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element. A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
Note: A header element is intended to usually contain the section’s heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section’s table of contents, a search form, or any relevant logos.1

<!-- (The old way) -->
<div id="header">
    <h1>This is the most important header on this page</h1>
    <p>Some introductory text</p>
</div>
<header>
    <h1>This is the most important header on this page</h1>
    <p>Some introductory text</p>
</header>

Some notes about the <header> element:

  • This element does not introduce a new section but is the head of a section
  • You can use more than one, and they will become the headers for those sections of the document

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
Note: In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.
Note: Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.2

<!-- (The old way) -->
<div id="navigation">
    <ul>
        <li><a href="/index.html">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</div>
<nav>
    <ul>
        <li><a href="/index.html">Home</a></li>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</nav>

Some notes about the <nav> element:

  • This element does introduce a new section of the document
  • You can use more than one, but remember, they should only be used for “major” navigation

<main>

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).
Authors must not include more than one main element in a document.
Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.3

<!-- (The old way) -->
<div id="main-content">
    <h1>This is a heading describing what this page is about</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, suscipit, voluptates, provident rerum quibusdam iusto quisquam harum amet.</p>
</div>
<main>
    <h1>This is a heading describing what this page is about</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, suscipit, voluptates, provident rerum quibusdam iusto quisquam harum amet.</p>
</main>

Some notes about the <main> element:

  • This element does not introduce a new section of the document

<section>

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.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.4

<!-- (The old way) -->
<div>
    <h2>Features</h2>
    <p>A description of the features our app offers.</p>
</div>
<section>
    <h2>Features</h2>
    <p>A description of the features our app offers.</p>
</section>

Some notes about the <section> element:

  • With very few exceptions, a section tag should not be used if there is no natural heading for it. Check your work in the HTML 5 outliner tool. If you see any instances of “untitled section” that corresponds to a section, you’re probably doing it wrong. (It’s fine for a nav or aside element to be untitled, however)5
  • 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. As a general rule, stick with the section element unless you’re working on a blog or news site where the content could be syndicated (such as an RSS feed)- the article tag is better suited for that situation
  • Do not use the section element as just a way to add styling or scripting – that is what divs are for

<aside>

The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.6

<!-- (The old way) -->
<div id="sidebar">
    <h3>All About Me</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, odit, ipsum, magnam nihil.</p>
</div>
<aside>
    <h3>All About Me</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, odit, ipsum, magnam nihil.</p>
</aside>

Some notes about the <aside> element:

  • When used within an article element, the contents should be specifically related to that article (e.g., a glossary). When used outside of an article element, the contents should be related to the site (e.g., a blogroll, groups of additional navigation, and even advertising if that content is related to the page)7
  • Use an aside for content that is not the primary focus of the page but is still related to the page

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Footers don’t necessarily have to appear at the end of a section, though they usually do.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.8

<!-- (The old way) -->
<div id="footer">
    <p>Copyright &copy; 2013</p>
    <ul>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</div>
<footer>
    <p>Copyright &copy; 2013</p>
    <ul>
        <li><a href="/about.html">About</a></li>
        <li><a href="/contact.html">Contact</a></li>
    </ul>
</footer>

Some notes about the <footer> element:

  • Similar to the <header> element but is not sectioning content and does not introduce a new section (This is important for when we check our page’s generated outline)
  • Keep in mind that the spec for <nav> states that it should not be used to wrap links in a <footer> element
  • This element can be used more than once. For example, you can use it within a <section> tag and it will be a footer only to the content within that section.

WAI-ARIA Landmark Roles

So what is WAI-ARIA? WAI-ARIA is a technical specification that provides a framework to improve the accessibility and interoperability of web content and applications9. It stands for Web Accessiblity Initiative (WAI) and Accessible Rich Internet Applications (ARIA).

It’s easy to add ARIA landmark roles to your code, and once you get familiar with them, adding them in will just be a part of your natural markup.

role="banner"

A region that contains mostly site-oriented content, rather than page-specific content.
Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
The author should mark no more than one element with the banner role.10

<header role="banner"></header>

role="complementary"

A supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.11

<aside role="complementary"></aside>

role="contentinfo"

A large perceivable region that contains information about the parent document.
Examples of information included in this region of the page are copyrights and links to privacy statements.
The author should mark no more than one element with the contentinfo role.12

<footer role="contentinfo"></footer>

role="form"

A landmark region that contains a collection of items and objects that, as a whole, combine to create a form.13

<form action="#" role="form"></form>

role="main"

The main content of a document. This marks the content that is directly related to or expands upon the central topic of the document.
The author should mark no more than one element with the main role.14

<main role="main"></main>

role="navigation"

A collection of navigational elements (usually links) for navigating the document or related documents.15

<nav role="navigation"></nav>

role="search"

A landmark region that contains a collection of items and objects that, as a whole, combine to create a search facility.16

<form role="search">
  <input name="q" placeholder="Enter search term...">
  <input type="submit" value="Search">
</form>

That’s it for the introduction to HTML5 and ARIA landmarks. Thanks for reading!


Want to have your say? Send me a tweet »
Share