What is a Document Outline?

The document outline sets out the structure of the page. Proper understanding of the document outline is important for providing a content structure that is usable and accessible to both human and searchbot visitors.

Mambo currently has limitations on page structure (that are being fixed in Mambo 4.7) but it is still possible to create a semantically correct document outline. In this tutorial we will look at what the document outline is, then look at how we can achieve this in our Mambo sites.

A good document outline can vary depending on what type of content you are displaying in a page. In general, a good document outline is one that uses heading levels (h1, h2, h3, etc) appropriately, and doesn't skip levels. For instance, if you have a h1, you need a h2 before you can use a h3. It also uses semantic elements, attributes, class names and id values correctly (more about semantic structure in a later tutorial).

The document outline is a hierarchy of your page structure, with the heading levels providing a nested hierarchy that leads the reader through the content of your page.

Content is broken into "families", everything that belongs together should be nested under a heading. Here's a very quick example:

<h1>Smith Familly</h1>
   <h2>Bob</h2>
   <h2>Jack</h2>
   <h2>Jane</h2>

You can add more information about Bob, Jack or Jane under the appropriate heading, but you wouldn't discuss Jane's children in Jack's area. Just like a family tree, Jane's children come lower in the hierarchy than Jane, but are associated with Jane. Like this:

<h1>Smith Familly</h1>
   <h2>Bob</h2>
   <h2>Jack</h2>
   <h2>Jane</h2>
      <h3>Jane's son</h3>
      <h3>Jane's Daughter</h3>

So a proper page structure, or document outline focuses on grouping the content in logical segments. Just as we tend to break down an entire site into Section/Category/Content Item, we do the same for each page. Of course, some content doesn't lend itself to breaking down as shown above.

Applying this logic to a typical Mambo page, we have to think of what information belongs together.

Modules.
Most modules aren't part of the content item itself - they are stand alone. They need to be represented in the page's structure under a header, but they won't generally fit under the main content. (Like everything, there are exceptions to this rule).

The Purpose of HEADING Tags

Many people make the mistake of thinking that heading tags are used for styling content. I often see sites that look beautiful but which have no logical structure. You have probably heard of the term, "markup", well, the meaning of this goes right back to the development of HTML. HTML (Hypertext Markup Language) was developed to give documents structure according to the meaning of the information contained in the document. Logical tags were created to indicate the nature of the content contained within the tags. So, <title> tags contain the title of the document, <code> means that code is contained within those tags, and <cite> contains a citation for the content.

Heading tags denote heading elements. They are NOT styling tags. Over time, confusion has arisen due to the way browsers have applied styling to HTML elements. People got used to seeing a <h1> tag containing a large font size piece of text. Heading tags are supposed to denote the logical structure of the content yet many people assume they are just styling elements, some kind of shorthand for displaying pretty fonts and colours.

[SEO Tip:]
Heading tags are NOT styling elements. They provide a hierarchical structure to the page, as discussed above. And that is how search engines see your page. If you want search engines (and visitors) to understand the context of the information on your page, you will ensure you use a proper document outline.

Just as human visitors can make sense of your page by viewing its document outline, and jump to each heading tag if they wish (allowing visitors to quickly scan your page for relevant information), so do search engines. Create an informative page with a proper document outline and you will see improved results in search engine positioning.

Have a look at one of your own site pages. Does the document outline show the content structure of your page? Does it have the meaning you intend? Go to the WC3 Semantic Data Extractor, enter the URL into the text box and click to extract semantics. If the results do not show what your page is all about then you have some work to do.

Within the next few days, we will look at how to build a proper document outline in a Mambo page. Be sure to bookmark my site or subscribe to a feed to make sure you don't miss the next instalment.

If you enjoyed this post, make sure you subscribe to my RSS feed!