Fundamental Syntax and Semantics - HTML5

HTML and CSS Reference

In-Depth Information

An implicit section starts with a new heading and is positioned in the document outline

according to that heading's rank in relation to a previous heading. If a heading is a lower

rank than its predecessor, it opens a new subsection in the outline. If a heading is a

higher rank, it closes the previous section and opens a new one.

Let's create a new example to see how heading rank supports implicit sections:

<h1>You've Got the <code>DOCTYPE</code>, Now What?</h1>

<h2>Simplified <code>link</code>s and <code>script</code>s</h2>

<p>HTML5's more flexible and simplified syntax ...</p>

<h2>Block-Level Links</h2>

<p>With HTML5, <code>a</code>s can contain block ...</p>

<h3>Looking Back</h3>

<p>In earlier versions of HTML, you had to ...</p>

<h2>Add Structure</h2>

<p>HTML5 gives us several new elements to add ...</p>

</section>

This example utilizes heading rank, rather than explicit sectioning elements, to generate

the following outline:

1. You've Got the DOCTYPE, Now What?

1.1 Simplified links and scripts

1.2 Block-level Links

1.2.1 Looking Back

1.3 Add Structure

Why is this important?

Knowing what your document outline looks like can help you decide not only which

heading levels to use, but also which structural elements to use. Remember how we

said that a section should have a natural heading ( Recipe 1.6 )? Checking your docu-

ment outline will show you if you have neglected to include a heading, which may

prompt you to reconsider whether that element was the most appropriate one to use

for your content. Additionally, a document outline that accurately reflects your content

hierarchy can help users of assistive devices navigate your site.

Unfortunately, no browsers have implemented this outlining yet, nor do any assistive

technologies utilize it for navigation. Still, checking the document outline should be a

part of the development process, and it helps significantly when considering which

elements and heading levels to use.