1. Computing

Discuss in my forum

HTML5 Outlines

Why HTML5 Outlines are Important

By

One of the most powerful features of the new HTML5 sectioning elements is the outline. While the HTML5 outline is not used widely yet, but it will make accessibility much simpler. By creating an automatic outline of a web page, accessibility browsers can tell the users exactly what is on the page, and give them an opportunity to go to just the parts of the page that they want to read (technically, listen to). This lets them skim pages more effectively, just like a sighted person would.

How to Create an HTML5 Outline

The nice thing about HTML5 outlines is that you don’t have to do anything particularly different in order to have it created. You just build your website using the sectioning elements as you normally would. As long as you include a heading element in each section, you will be creating a section in the outline.

Here is the HTML for an example page of a simple blog landing page with two blog entries, a sidebar, and navigation, or you can see the page itself without any styling here.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>My Blog</title>
</head>
<body>
  <header>
    <hgroup>
      <h1>My Blog</h1>
      <h2>About Me!</h2>
    </hgroup>
  </header>
  <nav>
    <h1>Find Your Way</h1>
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Categories</a></li>
    </ul>
  </nav>
  <article id="main">
    <header>
      <h1>Blog Posts</h1>
    </header>
    <article id="blog1">
      <header>
        <h1>Post #1</h1>
      </header>
      <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Excepteur sint occaecat consectetur adipisicing elit, in reprehenderit in voluptate. Ullamco laboris nisi qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, duis aute irure dolor quis nostrud exercitation. In reprehenderit in voluptate sunt in culpa cupidatat non proident.</p>
      <aside>
        <h1>Post 1 Details</h1>
        <p>Posted on <data value="2011-10-31">October 31</data> by Jennifer</p>
      </aside>
    </article>
    <article id="blog2">
      <header>
        <h1>Post #2</h1>
      </header>
      <p>Velit esse cillum dolore ut aliquip ex ea commodo consequat. Excepteur sint occaecat consectetur adipisicing elit, in reprehenderit in voluptate. Ullamco laboris nisi qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, duis aute irure dolor quis nostrud exercitation. In reprehenderit in voluptate sunt in culpa cupidatat non proident.</p>
      <aside>
        <h1>Post 2 Details</h1>
        <p>Posted on <data value="2011-10-15">October 15</data> by Jennifer</p>
      </aside>
    </article>
  </article>
  <aside>
    <h1>Sidebar</h1>
    <p>Velit esse cillum dolore duis aute irure dolor excepteur sint occaecat. Consectetur adipisicing elit, ut labore et dolore magna aliqua. Quis nostrud exercitation sed do eiusmod tempor incididunt lorem ipsum dolor sit amet. Ut enim ad minim veniam, duis aute irure dolor ut aliquip ex ea commodo consequat.</p>
    <p>Excepteur sint occaecat eu fugiat nulla pariatur. Velit esse cillum dolore mollit anim id est laborum. In reprehenderit in voluptate ut aliquip ex ea commodo consequat. Velit esse cillum dolore ullamco laboris nisi quis nostrud exercitation.</p>
  </aside>
</body>
</html>

This page would have an HTML5 outline like this:

  1. My Blog
    1. Find Your Way
    2. Blog Posts
      1. Post #1
        1. Post 1 Details
      2. Post #2
        1. Post 2 Details
    3. Sidebar

So anyone using an accessibility browser or screen reader that supports HTML5 outlines would be able to skip to exactly the section they wanted to read. The name of each section would be defined by the first heading element found there.

Some Things to Think About Regarding HTML5 Outlines

When you are using sectioning elements to enable HTML5 outlines there are a few things you need to remember.

  • Every section needs a headline—If you add a section (ARTICLE, ASIDE, SECTION, etc.) without a heading (H1H6) it will show up in the outline as an untitled section, which will reduce the effectiveness of your outline.
  • Screen readers may have trouble with all H1 headings—The specification indicates that you should use the H1 element as the first headline in any section (styling accordingly). But some screen readers don’t like that, so you should use heading elements like you did in HTML 4.01, with one H1, second level sections as H2 and so on.
  • Outlines are not supported by any browsers—But preparing a website ahead of time does no harm as the outlines are created automatically.
  • The headings can be hidden by CSS—But you should not remove them with the display: none; style, as that will remove them from the outliner and the accessible browser as well.
  • The HEADER and FOOTER elements are not sectioning elements—This means that if your page has a FOOTER with a heading, but you don’t have any other headings inside the BODY element, the outliner will assume that the heading in the footer is the heading for the entire page.

You can test your outlines by going to the HTML 5 Outliner. There are also some plugins you can get for various browsers to view the outlines of pages. The HTML 5 Outliner will tell you if your outline is missing a heading by titling a section “Untitled Section.” You can then go to your HTML and add a section heading.

Why HTML5 Outlines are Important

As I mentioned above, the primary use for HTML5 outlines is for accessibility. Once screen readers and other accessibility user agents start supporting HTML5 outlines, pages that have them—even if they have untitled sections—will be more accessible than pages without them.

But aside from accessibility, building good HTML5 outlines is also useful for SEO (search engine optimization). A good outline can be read by a search engine robot and make your page easier to scan and add to the index. And pages that can be added more quickly get indexed better and that can help you rank higher in the results.

Outlines also make your pages easier for non-disabled readers to read. An outline, especially one you’ve thought about ahead of time, gives your pages more structure. And structured documents are easier to read than unstructured ones. Even if your readers never look at the outline, by having one with logical headings and a clear structure, you make your page easier to use.

©2014 About.com. All rights reserved.