The outlining algorithm, also known as the outlining structure or the document outline, defines six headings, <h1>...<h6>, that play an important role in the semantic structure of your document. It’s crucial that you understand it so you can implement readable documents.
The number in each of the headings represents a subheading of an earlier, higher-numbered heading, traveling all the way up to the <h1> element, which can be thought of as the root—or master—heading. Let’s look at an example:
<h1>The United States</h1> <h2>New York</h2> <h2>California</h2>
In the code fragment above, New York is structurally subordinate to The United States, as is California. That The United States is wrapped in <h1> tags and that New York and California are wrapped in <h2> tags—showing their sibling relationship—reflects the semantic structure of the content.
Let’s introduce a lower level heading into the discussion, the <h3> element. In the following example, Forest Hills is wrapped in <h3> tags. It is a section of Queens, and, therefore, requires a higher-numbered heading than Queens. The following three elements can be thought of as follows: Queens is to New York City what Forest Hills is to Queens.
<h1>New York City</h1> <h2>Queens</h2> <h3>Forest Hills</h3>
Changing the order of the heading elements or switching the content of either one would upset the logical outline of the document. Consider the following:
<h1>Queens</h1> <h2>New York City</h2> <h3>Forest Hills</h3>
It doesn’t make much sense, does it? How about the following?
<h2>Queens</h2> <h3>Forest Hills</h3> <h1>New York City</h1>
So, there are two rules to keep in mind.
- As the content becomes more specific, the heading numbers should increase.
- As the content becomes more general, the heading numbers should decrease.
Size Versus Semantics
Many authors make the mistake of choosing headings based on browser-defined font sizing rather than semantic fit, ruining the outlining algorithm in the process. To understand the problem, let’s first discuss browser-defined heading sizes. As heading numbers increase, the font size associated with each heading decreases. The <h1> element, for instance, is typically twice the size of the normal font, the <h4> element is equal to the normal font, and the <h6> element is somewhere between 67% – 75%.
Let’s look at an example. Imagine an author produces a document about news in the five boroughs of New York City. She decides she only needs two headings, one for New York City and one for each of the five boroughs. Semantically, a single <h1> and a series of <h2>s are all that are required: The <h1> for New York City and the <h2>s for each of the five boroughs.
As she marks her document up, she realizes that she doesn’t like the default size of <h1>, so she starts with an <h2>, and, for the second heading, the one she’ll need for the five boroughts, she prefers the size of an <h4> over an <h3>. Consequently, her final outline looks like:
<h2>New York City News</h2> <h4>Queens</h4> <h4>Manhattan</h4> <h4>The Bronx</h4> <h4>Brooklyn</h4> <h4>Staten Island</h4> site
However, the correct structure is
<h1>New York City News</h1> <h2>Queens</h2> <h2>Manhattan</h2> <h2>The Bronx</h2> <h2>Brooklyn</h2> <h2>Staten Island</h2>
Here’s what both outlines look like in the W3 Validator:
In the screen capture above, take special note of what the validator has suggested:
If this does not look like a real outline, it is likely that the heading tags are not being used properly. (Headings should reflect the logical structure of the document; they should not be used simply to add emphasis, or to change the font size.)
Always keep in mind that the logic of your web projects begins at the HTML level, then moves on to the presentational structure in CSS. That is, choose your headings based on the logical form of your content, then move on to the presentational structure via CSS.
Creating Subheadings
Creating subheadings in HTML5 is very semantic. Take this web site’s title as an example:
<header> <h1>Essential HTML</h1> <p>Discussions/Tutorials About HTML (and sometimes CSS)</p> </header>
Because the <h1> and <p> elements are wrapped in the <header> element, it’s clear that <header>’s content is heading material. That the <p> element follows the <h1> solidifies the semantic subordination of the paragraph’s content to the level one heading.
It would also have been fine to use a <div> to get across the same idea:
<header> <h1>Essential HTML</h1> <div>Discussions/Tutorials About HTML (and sometimes CSS)</div> </header>
If your subheading consists of just text-based content, then it’s more semantic to use a paragraph element for your subheading. However, if you plan to use images and text in your subheading, a division element likely makes more sense.