HTML Document Outline

What is HTML document outline?

HTML document outline is a hierarchy of headings (h1-h6) inside a webpage which describes the structure of that page. Each heading creates a level in the outline. A heading represents a section of a webpage and leads the texts that follow it. The HTML document outline begins with the highest ranking of heading and it goes downward and it may include sub headings.

The outline of a web page is like the table of content of that page, though it is not visible in the web page directly.

The following image is a sample HTML document outline-

  1. Learn Web Development
    1. Client side language
      1. HTML
      2. CSS
      3. JavaScript
      4. jQuery
    2. Server side language
      1. Programming language: PHP
      2. Database: MySQL

Why HTML document outline is important?

HTML document outline has some benefits-

  • Screen reader and other accessible tools use this outline to obtain the structure of a web page and provide this information to the visually impaired users to navigate the web page easily.
  • Search engines use outline of a page to understand its structure better.
  • Properly outlined webpage is easy to navigate from one section to other using keyboard.
  • Using HTML document outline allows you to use more than six levels of headings, actually as many as you want.

It allows you to syndicate a section of a website to the other site (in HTML5). So, the content of a web site becomes portable.

 

Rules of outlining an HTML document?

With the HTML5 outlining algorithm, you can create an HTML5 outline document.

When outlining a webpage using, remember the following points (it includes HTML outline algorithm’s rules)-

  • Heading elements (h1 to h6) and sectioning elements (section, article, nav, and aside) are used to outline a webpage.
  • Each sectioning element demarcates a separate section.
  • Separated sectioning elements create same level in the document outline no matter which heading elements are used inside the sectioning elements. See the (a) diagram in the following image-
    Heirarchy of heading in sectioning elements
  • Nested section creates a sub level under its parent. See the (b) diagram in the above image.
  • Each sectioning element has its own scope of heading (h1 – h6). That means a webpage may have more than one h1 or other heading elements.
  • Body element is the root section which comprises all the remaining sections.
  • The first heading which is outside of any sectioning element is the heading of the body root section.
  • Any sectioning element inside the body element or the other sectioning elements is the nested section of the body or other sectioning elements respectively.
  • If there is more than one heading in a section, the first one is the heading of that section.

 

How to view an outline of a web page

You can use the following online based HTML5 outliner tool to view outline of your web page. Simply paste the url of the page or paste the HTML source code in the box- http://gsnedders.html5.org/outliner/

 

Example of outlining an HTML document

At first look at the following HTML which is valid codes for both HTML5 and the previous versions.

<body>
  <h1>Learn Web Development</h1>
    <h2>Client side language</h2>
      <h3>HTML</h3>
      <h3>CSS</h3>
      <h3>JavaScript</h3>
      <h3>jQuery</h3>

    <h2>Server side language</h2>
      <h3>Programming language: PHP</h3>
      <h3>Database: MySQL</h3>
</body>

If you run this code in the above online outlining tool (http://gsnedders.html5.org/outliner/), it will produce the following outline-

  1. Learn Web Development
    1. Client side language
      1. HTML
      2. CSS
      3. JavaScript
      4. jQuery
    2. Server side language
      1. Programming language: PHP
      2. Database: MySQL

Now, let’s rewrite the previous code in HTML5 using sectioning elements using the allowed HTML5 headings inside the sections-

<body>
  <h1>Learn Web Development</h1>
  <section>
    <h1>Client side language</h1>
    <section><h1>HTML</h1></section>
    <section><h1>CSS</h1></section>
    <section><h1>JavaScript</h1></section>
    <section><h1>jQuery</h1></section>
  </section>
  <section>
    <h1>Server side language</h1>
    <section><h1>Programming language: PHP</h1></section>
    <section><h1>Database: MySQL</h1></section>
</section>
</body>

This code will also produce the same outline as above.
We implemented the following outlining rules in the above code-

  • The first heading element h1 is the heading of the body root element.
  • We used sectioning element section to differentiate one section to the other and nest one into another.
  • As each section has its own heading element hierarchy, we used h1 in each section.

(1) In the code above, we only used h1 element inside a section, in reality, there might have text, images, videos in each section. But, will not be part of the document outline. For simplicity purpose, we only used h1.(2) Sectioning roots: Other than the body element, there are other sectioning roots in the HTML5 are – blockquote, td, fieldset, figure, and details. These elements don’t take part in the main document outline except the body element.

Problem with the HTML5 document outline

Most of the screen readers and search engines haven’t implemented the HTML5 outlining algorithm yet. They’ll overlook the sectioning elements and headings inside those. They still follow previously defined outlining rules. So, mention h2 heading in a section if its parent is h1 and so on. So, let’s rewrite the headings in the above HTML5 code which you should follow–

<body>
  <h1>Learn Web Development</h1>
  <section>
    <h2>Client side language</h2>
    <section><h3>HTML</h3></section>
    <section><h3>CSS</h3></section>
    <section><h3>JavaScript</h3></section>
    <section><h3>jQuery</h3></section>
  </section>
  <section>
    <h2>Server side language</h2>
  <section><h3>Programming language: PHP</h3></section>
  <section><h3>Database: MySQL</h3></section>
</section>
</body>

This code will still produce the same outline.