HTML and CSS Reference
In-Depth Information
Implicitly creating an outline using heading content
The previous website outline ( Figure 3-1 ) could be created using h1 , h2 , h3 , and h4
elements to establish the order and hierarchy, like so:
<!DOCTYPE html>
<meta charset="utf-8" />
<title>HTML5 Outline Algorithm</title>
<h1>Site Title</h1>
<h2>Main Navigation</h2>
<h2>Featured Content</h2>
<h3>An Article</h3>
<h4>Article Synopsis</h4>
<h2>Other News</h2>
<h3>Another Article</h3>
Hold on! If you read the outline algorithm parsing rules closely, you might notice a
problem here. The h1 through h4 elements are heading content elements, not sectioning
content elements, so would this page have any sections other than the root section cre-
ated by the body? The answer is yes. Sections may implicitly be created if the algorithm
encounters a situation where they would be expected.
The h1 through h6 heading elements are said to have a rank , which is the number
given in their names (for example, h1 has a rank of 1, h2 a rank of 2, and so forth). A
lower-ranked heading element, when placed below higher-ranked elements, will be nes-
ted within the section of the higher-ranking heading element. If, however, the heading
element has the same or higher rank as its predecessor, it will implicitly create a new
section, if one is not already defined ( Figure 3-2 ) . Note that no elements are being added
here; this is just how the HTML5 outline algorithm interprets how the content on the
page is grouped together.
Search WWH ::

Custom Search