Embedded Files
We will now present some best practices for starting to use <section>, <article>, <nav>, <aside>, in particular concerning the use of headings (h1, h2, h3, h4, h5 and h6).
Use <h1>...<h6> for the headings
Use <h1>...<h6> for the headings
Since the very beginning, HTML has had heading elements: <h1>...<h6>. These elements are used to display headings with different sizes by default, when no CSS is used. The following example shows 6 sentences that are surrounded by <h1>, <h2>, <h3>, <h4>, <h5> and <h6>:
These headings define a hierarchy, as shown by the default sizes given by the browser. This hierarchy can also be used to define an outline of the document. Note that we have only used H1... H6 elements, without any HTML5 structural elements such as <section> or <article>.
Here is a list of browser extensions you can try, for visualizing the outline of a document: table-of-contents-crx Chrome extension or this Firefox extension.
Using headings and sectioning elements (section, article, aside, nav)
Using headings and sectioning elements (section, article, aside, nav)
Definition of heading content and sectioning content
Definition of heading content and sectioning content
The <section>, <article>, <nav> and <aside> elements are called "sectioning elements". They cut a document into slices we call "sections".
The HTML5 specification says that "each sectioning element potentially has a heading and has also an outline associated".
<h1>...<h6> are called headings, and define the header of a section (whether explicitly marked up using sectioning content elements, or implied by the heading content itself). This means that:
<body>
<h1>Title of my document</h1>
...
</body>
... defines the header of a section implicitly, while:
<body>
...
<section>
<h1>Title of my section</h1>
...
</section>
</body>
... defines the heading of the explicit section (its parent element <section>).
Use multiple headings of different rank with sectioning content
Use multiple headings of different rank with sectioning content
The first element of a heading content in an element of sectioning content represents the heading for that section (the <section><h1>...</h1></section> in the above example).
Subsequent headings of equal or higher rank start (implied) sections, headings of lower rank start implied subsections that are part of the previous one. In both cases, the element represents the heading of the implied section.
Let's clarify this by looking at some example code:
<body>
<section>
<h1>This H1 is the heading of an explicit section</h1>
...
<h2>This H2 is a subheading, part of the same section
(lower rank)</h2>
....
<h1>This H1 starts an implicit section in the explicit
section (equal or higher rank)</h1>
...
<h2>This is a H2 heading in the section that has
just started</h2>
...
</section>
</body>
Page updated
Google Sites
Report abuse