Comment utiliser correctement h1 en HTML5

Question

Comment utiliser correctement h1 en HTML5

Demandé el 13 de Septembre, 2011: Quand la question a-t-elle été
21292 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Lequel des énoncés suivants est la façon correcte de la structure d'une page:

1) h1 seulement en header

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

Si j'utilise h1 exclusivement à l'intérieur d' header comme le titre du site, chaque page peut avoir le même contenu pour l' h1 balise. Cela ne semble pas très instructif.

2) h1 en header et section, pour les deux site et de la page de titre

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

J'ai aussi vu des exemples de l'utilisation de h1 plus d'une fois, dans les deux header et section tags. Cependant, n'est-il pas mauvais d'avoir deux titres pour la même page? Cet exemple montre plusieurs d'en-tête et h1 tags http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3) h1 seulement en section, mettant l'accent sur la page de titre

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

Enfin, W3 semble recommandons l'utilisation d' h1 dans le section élément, est-ce à dire que je ne devrais pas l'utiliser dans l' header élément?

Les articles peuvent contenir des titres de rang quelconque, mais les auteurs sont fortement encouragés à utiliser uniquement les éléments h1, ou utiliser des éléments de la grade approprié pour la section du niveau d'imbrication.

Demandé el 13 de Septembre, 2011 par deb

Answer 1

2 Réponses

Answer 2

57voto

Rob Points 6332

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

Voici un bon article à ce sujet.

Répondu el 13 de Septembre, 2011 par Rob (6332 Points )

Answer 3

17voto

chharvey Points 1001

Je vous conseille d'utiliser l' h1 tout au long de. Oublier h2 par h6.

De retour en HTML4, le 6 niveaux de titre ont été utilisés pour définissent 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>

Maintenant, avec l' section élément, vous pouvez définir de façon explicite les sections plutôt que d'avoir à compter sur l'implicite sections créées par votre navigateur lisant les différents niveaux de titre. Un navigateur équipé avec HTML5 sait que tout à l'intérieur d'un section élément est "rétrogradé" d'un niveau dans la doc contour. Ainsi, par exemple, un section > h1 est sémantiquement traité comme un h2, section > section > h1 , c'est comme un h3, etc.

Ce qui est déroutant, c'est que les navigateurs ENCORE créer implicite sections en fonction de l' h2–h6 niveaux de titre, mais l' h2–h6 éléments ne changent pas leurs styles. Cela signifie que l' h2, peu importe combien d'articles il est imbriqué dans, apparaît toujours comme un h2 (au moins dans Webkit). Ce serait source de confusion si vous h2 était censé être, disons, un niveau 4 de la rubrique.

Mélanger h2–h6 avec section conduit à des résultats inattendus. Il suffit de coller avec h1 seulement, et utiliser section créer explicite sections.

<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>

En outre, vous pouvez utiliser l' <main> élément. Cet élément contient uniquement des informations spécifiques à la page, et ne doit pas inclure de contenu qui se répète à l'échelle du site, tels que les liens de navigation, site des en-têtes/pieds de page, etc. Il peut y avoir un seul <main> - élément présent dans l' <body>. Donc votre solution peut être aussi simple que cela:

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

Répondu el 15 de Août, 2014 par chharvey (1001 Points )

Comment utiliser correctement h1 en HTML5

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment utiliser correctement h1 en HTML5

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: