web-dev-qa-db-fra.com

Comment utiliser correctement h1 en HTML5

Lequel des éléments suivants est la bonne façon de structurer une page:

1) h1 uniquement dans header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

Si j'utilise h1 exclusivement dans header comme titre du site, chaque page aura le même contenu pour le h1 tag. Cela ne semble pas très instructif.

2) h1 dans header et section, pour le site et le titre de la page 

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

J'ai également vu des exemples d'utilisation de h1 plusieurs fois, dans les balises header et section. Cependant, n'est-ce pas faux d'avoir deux titres pour la même page? Cet exemple montre plusieurs en-têtes et h1 tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3) h1 uniquement dans section, en soulignant le titre de la page 

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

Enfin, W3 semble recommander d'utiliser h1 au sein de l'élément principal section, cela signifie-t-il que je ne devrais pas l'utiliser dans l'élément header?

Les sections peuvent contenir des en-têtes de n'importe quel rang, mais les auteurs sont fortement encouragés à utiliser uniquement des éléments h1 ou à utiliser des éléments du rang approprié pour le niveau d'imbrication de la section.

htmlhtml5seosemanticssemantic-markup
76
deb

Comme je le dis dans mon commentaire et vous le citez dans le W3C, h1 est un titre et non un titre. Chaque élément de sectionnement peut avoir ses propres éléments d'en-tête. Vous ne pouvez pas considérer h1 comme étant le titre d'une page uniquement, mais comme l'en-tête de cette section particulière de la page. Tout comme la première page d'un journal, chaque article peut avoir son propre titre (ou titre).

Voici un bon article à ce sujet.

59
Rob

Je recommanderais d'utiliser h1 partout. Oublie ça h2 à travers h6.

De retour en HTML4, les 6 niveaux de titre ont été utilisés pour définir implicitement les sections. Par exemple,

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

Désormais, avec l'élément section, vous pouvez définir explicitement les sections plutôt que de vous fier aux sections implicites créées par votre navigateur en lisant les différents niveaux de titre. Un navigateur équipé de HTML5 sait que tout à l'intérieur d'un élément section est "rétrogradé" d'un niveau dans le plan du document. Ainsi, par exemple, un section > h1 est sémantiquement traité comme un h2, une section > section > h1 est comme un h3, etc.

Ce qui est déroutant, c'est que les navigateurs [~ # ~] toujours [~ # ~] créent des sections implicites basées sur le h2 – h6 niveaux de titre, mais le h2 – h6 les éléments ne changent pas de style. Cela signifie qu'un h2, quel que soit le nombre de sections dans lesquelles il est imbriqué, apparaîtra toujours comme un h2 (au moins dans Webkit). Ce serait déroutant si votre h2 était censé être, par exemple, une rubrique de niveau 4.

Mélange h2 – h6 avec section conduit à des résultats très inattendus. Restez avec h1 uniquement, et utilisez section pour créer des sections explicites.

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

De plus , vous pouvez utiliser le <main> élément . Cet élément ne contient que des informations spécifiques à la page et ne doit pas inclure de contenu répété à l'échelle du site, comme des liens de navigation, des en-têtes/pieds de page, etc. Il peut y avoir un seul<main> élément présent dans le <body>. Votre solution peut donc être aussi simple que cela:

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>
14
chharvey

Cependant, n'oubliez pas les problèmes d'accessibilité. Selon MDN , "il n'y a actuellement aucune implémentation connue du algorithme de contour dans les navigateurs graphiques ou les agents utilisateurs des technologies d'assistance." Cela signifie qu'un lecteur d'écran pourrait ne pas être en mesure de comprendre l'importance relative des sections avec uniquement <h1>. Il pourrait avoir besoin de plus de niveaux de titre, tels que <h2> et <h3>.

5
Michael McGinnis