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
Of the four sectioning content elements, the section elemen t 3 is the most generic,
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):
<h1>Site Title</h1>
<section><h2>Main Navigation</h2></section>
<section><h2>Featured Content</h2>
Search WWH ::

Custom Search