HTML and CSS Reference
In-Depth Information
Figure 3-2.
Implicit section creation of adjacent heading elements. Adjacent heading elements
with the same rank will implicitly create new sections, while those with a lower rank will implicitly
create nested sections.
In earlier times, it was a common practice to use the
h1
through
h6
elements inside
div
elements to structure the sections of a page. The problem with this is that the
div
element is not part of the sectioning content group of elements, so it won't break the
page into sections according to the HTML5 outline algorithm. Implicitly creating sec-
tions provides some backward compatibility with this older coding style, because sec-
tions can be created automatically based on the heading elements used inside the
div
elements. However, this isn't the preferred means of structuring the sections in the page.
Instead, explicitly including sectioning content elements will make the nesting structure
more apparent when viewing the source code, which is what we'll do next.
Creating an outline using sectioning content
providing a grouping of content that is (ideally) thematically related. By adding
sec-
tion
elements to the code, we can explicitly show where the sections will show up,
which may make it easier to see how the page is organized (refer to
Figure 3-2
if the
nesting of elements in the following example does not make sense):
…
<body>
<h1>Site Title</h1>
<section><h2>Main Navigation</h2></section>
<section><h2>Featured Content</h2>
Search WWH ::
Custom Search