HTML and CSS Reference
In-Depth Information
Implicitly creating an outline using heading content
elements to establish the order and hierarchy, like so:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Outline Algorithm</title>
</head>
<body>
<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>
</body>
</html>
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