Why it’s important to have a structured document outline

With HTML5 new document outline algorithm, we have to utilize key aspects when forming our header tags. Even though outline algorithms cannot be relied upon to convey document structure to users, it does create a table of contents that could be used by assistive technology to help the user, or be parsed by search engines to improve search results.

What exactly is the document outlining algorithm?

The document outline is the structure of a document, which is generated by the document’s headings, form titles, table titles, and any other appropriate elements to map out the document. The structure in a web page, whatever lies is between <body> and </body>, is fundamental when presenting a page to the user and structuring your SEO. All content lying inside the <body> element is part of a section such as an <article>, which is where you enter your headings <h1>, <h2>, <h3>, etc., and <p>, paragraph content.

Find out the 5 basic rules to HTML headings!

Get the Formula

Any user agent can apply this information to generate a table of contents. This kind of table of contents could then be used by screen readers and other assistive technologies to a user. The HTML5 specs have clearly defined the outlining algorithm, and when browsers and assistive technologies start adopting it, there will be some major benefits.

How to structure an outline

Let’s start with a sample outline. Imagine you have built a website for a handyman, and he wants a page to advertise the services he is selling. The structure of his page should look something like this:

Handyman for all your home improvement needs! <h1> (document)
1. Home Repair <h1> (article)
  1. Kitchen and Bathroom plumbing <h2>
    1. Repair plumbing leaks and upgrade old pipes. <h3>
  2. Furniture and Hardwood Repair <h2>
    1. Repair Squeaking hardwood floors and restore broken furniture. <h3>
2. Indoor and Outdoor Painting <h1> (article)
  1. Paint all types of walls inside and outside your home.<h2>

This is a simple, easy-to-follow list of headings, displayed in a hierarchy that is similar to a table of contents.

This is how the previous outline would be coded:


 <body>

   <h1>Handyman for all your home improvement needs!</h1>

     <main>

       <article>
         <h1>Home Repair</h1>
		 
         <h2>Kitchen and Bathroom plumbing</h2>
         <h3>Repair plumbing leaks and upgrade old pipes.</h3>
         <p>Article content relative to this section.</p>
         <p>A little more article content.</p>
		 
         <h2>Furniture and Hardwood Repair</h2>
	 <h3>Repair Squeaking hardwood floors and restore broken furniture.</h3>
         <p>Some other article content relative to this section</p>
       </article>

       <article>
         <h1>Indoor and Outdoor Painting</h1>
         <h2>Paint all types of walls inside and outside your home.</h2>
         <p>Let’s be honest, this is taking ages</p>
       </article>

     </main>

 <body>

Just so you know that I’m not making this up, you should copy and paste the code above into our free outlining tool on StatScraper.com.