Embedded Files
Best practice #1: always add a heading to explicit sectioning content
Best practice #1: always add a heading to explicit sectioning content
It's always better - mainly for accessibility reasons - to include a heading (a <h1>, <h2>...<h6>) in each sectioning element (<section>, <article>, <nav>, <aside>), but also after the <body> element (called a "sectioning root").
Here are some examples:
Good (heading in each explicit section):
Good (heading in each explicit section):
<section>
<h1>Blog post of April 2020</h1>
...
</section>
Good (heading in a <header> does not change anything)
Good (heading in a <header> does not change anything)
<section>
<header>
<h1>Blog post of April 2020</h1>
<p>Posted by Michel Buffa...</p>
</header>
...
</section>
Bad (there is no Hx after the <section>):
Bad (there is no Hx after the <section>):
<section>
<header>
<p class="article title">Blog post of April 2020</p>
<p>Posted by Michel Buffa...</p>
</header>
...
</section>
The last example is bad for accessibility reasons. A screen reader that vocalizes the page will just say "Entering section", while in the previous two good examples it would say "entering section with heading Blog Posts of April 2020". You can also check if your headings and sectioning elements are ok by using a browser extension that displays the outline of the document (just search for "html5 outliner" in your browser's extension search engine).
UPDATE : For the course screenshots, we used the Google Chrome HTML5 outliner extension that is no more available (it has been removed by its developer), but you can use any other equivalent extension such as table-of-contents-crx for Chrome or Outline sidebar for Firefox.
Final good version:
Final good version:
<body>
<h1>Example Blog</h1>
<section>
<header>
<h2>Blog post of April 2020</h2>
<p>Posted by Michel Buffa...</p>
</header>
<p>Content of the blog post...</p>
</section>
</body>
In red, the sectioning root (<body>) and the sectioning elements (<section> here...), each have a heading.
To sum up:
To sum up:
Always use a heading element after a sectioning element, for example <section><Hx>...</Hx>...</section>, and after <body>, where x can be 1..6,
Or, use a <header> element, like in <section><header><Hx>...</Hx>.....</header>...</section>
More about the <header> element
More about the <header> element
The <header> element is just a container. It is not taken into account for defining new sections of a document nor does it affect the hierarchy levels.
You can use heading elements <h1>...<h6> in a <header> but be careful if you use more than one, as the rules explained in the previous part of the course will apply and may generate implicit "sections" in the header.
This example has two headings in the <header>:
<section>
<header>
<h1>Some text in a h1 in a header of a section</h1>
<h2>This a h2 in the header...</h2>
</header>
</section>
Here is the resulting table of contents, notice the two subsections that appear, one for the H1, one for the H2:
Indeed, HTML does not have a dedicated mechanism for marking up subheadings, alternative titles or taglines.
If you do not want the subtitles to be included in the table of contents, just use standard markup, for example <p> elements, as shown in the next example. Of course, CSS rules can be applied to change colors, sizes, etc.
<header>
<h1>HTML 5.1 Nightly</h1>
<p>A vocabulary and associated APIs for HTML and XHTML</p>
<p>Editor's Draft 9 May 2013</p>
</header>
Best practice #2: try not to rely on implicit sectioning, use <section>, <article>, etc. instead of just <h1>...<h6>
Best practice #2: try not to rely on implicit sectioning, use <section>, <article>, etc. instead of just <h1>...<h6>
The example below defines several implicit "sections" by using <Hx> directly (at lines 7 and 9):
Ok version (no explicit sections everywhere):
Ok version (no explicit sections everywhere):
<body>
<h4>Apples</h4>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<h6>Sweet</h6>
<p>Red apples are sweeter than green ones.</p>
<h1>Color</h1>
<p>Apples come in various colors.</p>
</section>
</body>
Better version (best practice):
Better version (best practice):
<body>
<h1>Apples</h1>
<p>Apples are fruit.</p>
<section>
<h2>Taste</h2>
<p>They taste lovely.</p>
<section>
<h3>Sweet</h3>
<p>Red apples are sweeter than green ones.</p>
</section>
</section>
<section>
<h2>Color</h2>
<p>Apples come in various colors.</p>
</section>
</body>
Both of the examples above are semantically identical and produce the same outline.
Page updated
Google Sites
Report abuse