ptg16476052380 LESSON 13: Structuring a Page with HTML5
Prior to HTML5, sections in a document were defined using the div tag, and the relative
precedence of the content was specified using heading tags. Anytime a new heading tag
was encountered, it was treated as the beginning of a new section, with the precedence
of that section in the document structure indicated by the level of the heading. Here’s an
example:
<h1>Top Level Heading</h1>
<p>Some content.</p>
<h2>Second Level Heading</h2>
<p>More content.</p>
<h3>Third Level Heading</h3>
<p>Even more content.</p>
<h2>Second Level Heading</h2>
<p>Content.</p>In this case, the outline would read like this:- Top Level Heading
1.1 Second Level Heading
1.1.1 Third Level Heading
1.2 Second Level Heading
The typical page has a number of divs, headings, and other structural elements, but given
that div has no special semantic meaning, it is impossible to infer an accurate outline
from the structure of a typical page. Instead, the headings were used to define the outline
of the page.
The sectioning elements in HTML5 rectify this situation, enabling Web publishers to
control the page outline precisely. With HTML5, the first heading inside a sectioning
element defines the heading for that section rather than starting a new section. The sub-
sequent headings in a section are considered to start a new section. This is referred to as
implicit sectioning. If you want to force explicit sectioning, you must place every header
with a corresponding sectioning element.
Why does this matter? Obviously, Web browsers like Chrome and Firefox don’t present
an outline of a web page; they present a rendered web page. That’s not the case, however,
for Web browsers that use assistive technology for visitors with vision impairment. Well
thought-out page structure makes it much easier for such browsers to present the most
important information on the page to users and skip over the parts that are not critical.
The most important difference between HTML5 and previous versions is that HTML5
offers more structural elements than HTML 4 did. The second difference is that HTML5
excludes some structural elements in the document outline, so they are ignored by assis-
tive technology like screen readers.