What is HTML Outline (HTML Outlines)?

Question

• What is the function of an HTML sketch (HTML Outlines)?
• How he is formed?
• When?
• Could someone give me a profound explanation on the subject?

Answer 1

This is all about Semantics...

And semantics matter! If you could, it would be written in red and blinking...

Understanding the Outline

The term Outline, in this context, it would be better translated into tracing. Sketch is valid, but if it is a language directly related to design, it can generate confusion with interface sketches, etc. The Outline is nothing more than the sense that the structure of my elements take when related to each other, and a Outline well planned has exactly the same meaning both when analyzed through HTML code and analyzed the content rendered by the browser. Is it not clear? How about a practical example?

Without accessing the page source code, access the address W3C: Common Infrastructure - Urls, section 2.5. You do not need to read the content (nor is it important for the example), but note carefully how the information was presented to you. Without much effort, you notice that the section is divided into some parts:

2.5. URLs
  2.5.1. Terminology
  2.5.2. Parsing URLs
  2.5.3. Dynamic changes to base URLs 

This would be the Outline which is defined by the rendered content. That is, the sense presented to you allows you to define this structure. Does it matter which element was used to create the titles, sub-titles or the content itself? No. So much so that we didn’t need to access the source code to define the semantic structure.

Now access the source code and check which HTML structure was used. To make it easier, I’ll simplify it here:

<h3 data-level="2.5">URLs</h3>
<h4 data-level="2.5.1">Terminology</h4>
<p>...</p>
...
<p>...</p>
<h4 data-level="2.5.2">Parsing URLs</h4>
<p>...</p>
...
<p>...</p>
<h4 data-level="2.5.3">Dynamic changes to base URLs</h4>
<p>...</p>
...
<p>...</p>

^{Code excerpt taken from W3C, Section 2.5 (adapted)}

Considering the hierarchy of elements <h1> until <h6>, we can conclude that the <h3> at the beginning defines a new section of the content, so we could write (the numbering was kept equal from the site to facilitate the association):

2.5. URLs

After this element, at the same level of the DOM, there are three elements <h4> separated by elements <p>. Being the same level in the DOM and considering again the hierarchy between titles, we can conclude that such elements define three subheadings and the elements <p> refer to the content of each. Therefore:

2.5. URLs
  2.5.1. Terminology
  2.5.2. Parsing URLs
  2.5.3. Dynamic changes to base URLs 

Which is exactly the same structure we defined when analyzing the rendered content. That is, the Outline W3C page HTML was well designed, resulting in a semantic structure (dots for you, my W3C friend, imagine if not...)

What is the relationship between Outline and HTML 4/5?

When searching about the Outline you will see that it is quite common in this context to compare the HTML 4 and HTML 5 versions and the reason is that the changes, I mean the main ones, between the versions were semantics. And, repeating, this is all about Semantics and semantics matter. Just check the page HTML 5 Differences from HTML 4, section 3, on language, more specifically, 3.1, on new elements, where it says:

... Elements have been introduced for Better Structure

And a better structure is a more semantic structure. One of the ways to define the structure is using only the hierarchy of title elements, <h1> until <h6>, as the example of the site W3C above uses, however, not always such hierarchy is sufficient to generate the Outline desired. In such cases it is necessary to use other elements to define the content hierarchy.

The semantics of HTML 4

Until version 4 of HTML, the element responsible for defining the hierarchy was the <div>. Thus, a structure similar to the previous example could be created as follows:

<div>
  <h1>Título</h1>
  <div>
    <h2>Sub-título 1</h2>
    <p>...</p>
  </div>
  <div>
    <h2>Sub-título 2</h2>
    <p>...</p>
  </div>
  <div>
    <h2>Sub-título 3</h2>
    <p>...</p>
  </div>
</div>

Analyzing, we could conclude that the <div> external is responsible for creating a new section, having the title in <h1>. Within this element there are three other <div> defining sub-sections with their respective titles in <h2>. So we could define:

1. Título
  1.1. Sub-título 1
  1.2. Sub-título 2
  1.3. Sub-título 3

Which is exactly the semantics I wanted when I created this example. In fact, it is worth mentioning here that the hierarchy of titles is valid when they are at the same level in the DOM. At different levels, the hierarchy is, shall we say,, reset. That is, in the example above, what defines that "Sub-title 1" is the title of a sub-section is not the fact that the element has been used <h2>, but rather the fact that he is in a <div> more internal. So much so that the same could be written in the form below without any semantic change:

<div>
  <h1>Título</h1>
  <div>
    <h1>Sub-título 1</h1>
    <p>...</p>
  </div>
  <div>
    <h1>Sub-título 2</h1>
    <p>...</p>
  </div>
  <div>
    <h1>Sub-título 3</h1>
    <p>...</p>
  </div>
</div> 

But what’s wrong with that?

The main problem of HTML 4 was that it did not allow the introduction of new elements in the middle of the content that were not part of it. How so? Let’s imagine a fairly common situation in pages that is the insertion of a banner promotional in the middle of the content. In HTML 4, this would be done by inserting a new <div> in the structure:

<div>
  <h1>Título</h1>
  <div>
    <h1>Sub-título 1</h1>
    <p>...</p>
  </div>
  <div>
    <img src="..." alt="Promoção e pra mocinha">
  </div>
  <div>
    <h1>Sub-título 2</h1>
    <p>...</p>
  </div>
  <div>
    <h1>Sub-título 3</h1>
    <p>...</p>
  </div>
</div>

It works, but... wait! The element <div> isn’t the element that defines the hierarchy of the structure? Yes, himself, and that’s where the problem lies. If we look again at the structure of the code above, we would have something like:

1. Título
  1.1. Sub-título 1
  1.2. ?
  1.3. Sub-título 2
  1.4. Sub-título 3

An element that is not part of the content but is analyzed as such. But my page has no advertising, so it’s okay? It is. This is not just with banner advertising, but also with menus, headers, footer information, additional information about the blog post, comments on a photo. All this within <div> and all being considered semantically part of the content. Except if your page is similar to that one (be prepared), you will suffer from the HTML 4 semantics problem. Take the test:

<!-- Cabeçalho -->
<div>
  <img src="logo.png" alt="Meu Site">
  <h1>Meu site - Primeira publicação no Blog</h1>
</div>

<!-- Menu -->
<div>
  <h1>Menu</h1>
  <ul>
    <li>Sobre Mim</li>
    <li>Blog</li>
    <li>Contato</li>
  </ul>
</div>

<!-- Conteúdo do blog -->
<div>
  <h1>Primeira publicação no Blog</h1>
  <div>
    <h1>Como começou...</h1>
    <p>...</p>
  </div>

  <!-- Promoção -->
  <div>
    <img src="..." alt="Promoção e pra mocinha">
  </div>

  <div>
    <h1>Meu blog, minha vida</h1>
    <p>...</p>
  </div>
  <div>
    <h1>Onde é que eu tô? Será que tô na lagoinha?</h1>
    <p>...</p>
  </div>
</div>

<!-- Rodapé -->
<div>
  <h1>Redes sociais</h1>
  <ul>
    <li>Facebook</li>
    <li>Stack Overflow</li>
    <li>YouTube</li>
  </ul>
</div>

Here comes HTML 5

In HTML 5 there are new elements: spoken Divs specials. To name a few, we have the most impactful in this context:

• <section>, as its name says, came to replace the <div> in defining sections;
• <article>, defines, on the page, the part of the content that is independent of the rest;
• <main>, defines a main area of the page, not modifying the Outline;
• <aside>, defines a part that does not have, or is weakly related to, the content;
• <header>, sets the page header;
• <footer>, sets the page footer;
• <nav>, defines an internal navigation element;

With these new elements, we can generate the structure of HTML according to its exact representation in Outline, that is, making use of the semantics that is introduced by such elements. An element <aside> inserted between elements <section> no longer changes the Outline and could be used to insert the banner advertising in the content, for example, as well as the page header, the footer, the navigation menu, all parts of the page basically now have an element that exactly defines its position within the Outline.

<!-- Cabeçalho -->
<header>
  <img src="logo.png" alt="Meu Site">
  <h1>Meu site - Primeira publicação no Blog</h1>
</header>

<!-- Menu -->
<nav>
  <h1>Menu</h1>
  <ul>
    <li>Sobre Mim</li>
    <li>Blog</li>
    <li>Contato</li>
  </ul>
</nav>

<!-- Conteúdo do blog -->
<article>
  <h1>Primeira publicação no Blog</h1>
  <section>
    <h1>Como começou...</h1>
    <p>...</p>
  </section>

  <!-- Promoção -->
  <aside>
    <img src="..." alt="Promoção e pra mocinha">
  </aside>

  <section>
    <h1>Meu blog, minha vida</h1>
    <p>...</p>
  </section>
  <section>
    <h1>Onde é que eu tô? Será que tô na lagoinha?</h1>
    <p>...</p>
  </section>
</article>

<!-- Rodapé -->
<footer>
  <h1>Redes sociais</h1>
  <ul>
    <li>Facebook</li>
    <li>Stack Overflow</li>
    <li>YouTube</li>
  </ul>
</footer>

Note that it is now possible to infer exactly the Outline of the page without suffering interference from other elements.

Then HTML 5 abolished the use of the element <div>?

Obviously not, otherwise he would have been removed from it. The purpose of HTML 5 was basically to transfer the responsibility of creating sections in the Outline of <div> for the new elements, however, any detail of layout, whether on the page, or even within a section of Outline, the <div>. For example, if within a section of Outline I need to display a slide of photos, I will do this using the <div>; if he used the <section> I’d be changing the Outline application and returning to HTML 4 problems.

Additional readings

• MDN: Using HTML sections and Outlines
• Tableless: Understanding the HTML Outline
• W3C: HTML 5 Differences from HTML 4

Other links

• Outliner: Form to simulate the Outline code
• Extension: HTML 5 Outliner (untested)

Finally, this is all about Semantics and semantics matter!

Answer 2

Rereading some documents, I realized that the way HTML4 treated Outline structuring was not very effective and had many problems, for example:

*It was very inaccurate in the structuring of Outline because it was done basically by div and H1 H6. There were several problems, for example: a div could be used only for style and would not have semantic meaning in the context of the page, which would cause a strange Outline.

*Having only one document to deal with is much easier than having to put several together. With the new Html5 sectioning elements the sections are always daughters of the nearest sections, resulting in a single document.

As I understand it, the practice recommended in HTML5 is that each header element stays within its own sectioning element and that each sectioning element has its own hgroup grouping the H1-H6, so only H1 would appear on Outline, making the document much cleaner and more objective, as H1 would define the main title of what the rest is about.

For example, if I do:

<article>
<hgroup>
<h1>Cabeçalho do artigo</h1>
<h2>Subcabeçalho do artigo</h2>
</hgroup>
<section>
<h2>Seção do cabeçalho</h2>
<p>Conteúdo...</p>
<section>
<h4>Subseção do cabeçalho</h4>
<p> Conteúdo..</p>
</section>
</section>
</article>

Outline will be like this:

1 . Seção sem título
    1. Cabeçalho do artigo
      1.Seção do cabeçalho
        1.Subseção do cabeçalho

Note that the H2 inside the hgroup did not appear on Outline and all Outline is in a single document containing nested sections.

For those who are curious to know the Outline of some site, just access:

https://gsnedders.html5.org/outliner/

Enter the url or code, it will return to the document’s Outline. ;)