HTML5 Semantics - H1 ou H2 pour les titres ARTICLE dans une SECTION


10

Je crois comprendre (basé sur ce chapitre de Plonger dans HTML5: http://goo.gl/9zliD ) qu'il peut être considéré sémantiquement approprié d'utiliser des balises H1 dans plusieurs zones de la page, comme méthode de définition du titre le plus important pour ce contenu particulier.

Si j'utilise cette méthodologie et que j'ai une SECTION à laquelle j'ai attribué un H1 d '«Articles», dois-je utiliser H1 ou H2 pour définir les titres des ARTICLES dans cette SECTION? C'est un peu déroutant pour moi car les titres d'articles sont la rubrique la plus importante de leur ARTICLE, mais sont également des «enfants» du titre de la SECTION.

Exemple de code:

<section class="article-list">
  <header>
    <h1>Articles</h1>
  </header>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="201-02-01">Today</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-31">Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>

  <article>
    <header>
      <h2>Article Title</h2>
      <time datetime="2011-01-30">The Day Before Yesterday</time>
    </header>
    <p>Article text...</p>
  </article>
</section>

J'ai entendu des critiques mitigées de la série Dive into .... D'après ce que je comprends, ce n'est peut-être pas la meilleure référence.
the_e

4
@espais: Où avez-vous entendu ces critiques? Avez-vous un lien vers l'un d'eux négatifs?
Lèse majesté

@ Lèse: Je ne peux rien dire de plus que l'hérésie à ce stade. Je suis presque sûr de l'avoir vu sur l'un des sites SE dans le passé ... mais pour l'instant je n'ai aucune source.
the_e

1
@espais bizarre, car toutes les références que je peux y trouver dans Webmasters et SO sont non seulement positives, mais généralement très appréciées. stackoverflow.com/search?q=%22dive+into+html5%22 , webmasters.stackexchange.com/search?q=%22dive+into+html5%22
Yahel

@ Lèse: oui, puisque je ne peux vraiment pas sauvegarder mon commentaire, je vais le retirer respectueusement
the_e

Réponses:


7

Pilgrim n'est pas le seul à contester cela.

Selon HTML5 pour Jeremy Keith pour les concepteurs Web , vous pouvez utiliser plusieurs <h1>s dans un document sans ruiner le résumé du document, tant qu'ils sont imbriqués dans des balises sectionnelles sémantiques discrètes.

Citant directement à partir de l'eBook (que j'ai acheté sur iBooks)

Jusqu'à présent, le nouveau contenu de sectionnement ne nous donne pas beaucoup plus que ce que nous pourrions faire avec les versions précédentes de HTML. Voici le kicker: en HTML5, chaque élément de contenu de section a son propre contour autonome. Cela signifie que vous n'avez pas à suivre le niveau de cap que vous devez utiliser - vous pouvez simplement commencer à partir de h1 à chaque fois:

<h1>An Event Apart</h1> 
    <section>
        <header>
            <h1>Cities</h1>
        </header>
         <p>Join us in these cities in 2010.</p> 
        <section>
            <header>
                <h1>Seattle</h1>
            </header>
            <p>Follow the yellow brick road.</p> 
       </section>
        <section>
            <header>
                <h1>Boston</h1>
            </header>
            <p>That’s Beantown to its friends.</p> 
        </section> 
        <section>
             <header>
                   <h1>Minneapolis</h1>
             </header>
             <p>It's so <em>nice</em>.</p> 
         </section>
     </section> 
     <small>Accommodation not provided.</small>

(Exemple de code également tiré du livre, page 73)


@Matt aucun problème. Cela ne veut pas dire que cela pourrait ne pas poser de problème. Deux me viennent à l'esprit. Tout d'abord, cela peut être un peu bizarre pour CSS, mais c'est gérable. Mais plus important encore, cela pourrait être dangereux pour le référencement, car il existe une sagesse conventionnelle assez bien établie selon laquelle il ne devrait y en avoir qu'un <h1>sur votre page, et que tout le reste dilue la capacité des robots d'exploration à déchiffrer votre site. Mais je ne suis pas un gourou du référencement, je ne peux donc pas commenter cela.
Yahel

2

J'aurais tendance à être d 'accord avec l' interprétation de Mark Pilgrim . Si vous enfermez votre article à l'intérieur d'un articleélément, vous pouvez recommencer avec un h1titre pour l'article.

Dans la spécification HTML5, les articles sont censés être traités comme une partie indépendante et autonome de la page. Vous devriez pouvoir transplanter l' articleélément tel quel dans une autre page sans reformater les en-têtes.

Si les en-têtes d'article devaient être une continuation de la hiérarchie des en-têtes de document, alors lorsque vous déposez le articledirectement sous une bodybalise, vous devez aller à h1, mais si vous le déposez sous des sections imbriquées, vous devrez le changer en h3/ h4/ h5/ etc., selon l'endroit où vous le placez.

En fait, chaque fois que vous créez un nouveau sectionou article, vous devez y revenir h1, car les éléments suivants sont identiques:

<article>
  <h1>Meta Data</h1>
    <h2>Data Warehousing</h2>
    <h2>On the Web</h2>
      <h3>Dublin Core</h3>
      <h3>XFN</h3>
      <h3>Microformats</h3>
      <h3>RDFa</h3>
</article>

et:

<article>
  <h1>Meta Data</h1>
  <section>
    <h1>Data Warehousing</h1>
  </section>
  <section>
    <h1>On the Web</h1>
    <section>
      <h1>Dublin Core</h1>
    </section>
    <section>
      <h1>XFN</h1>
    </section>
    <section>
      <h1>Microformats</h1>
    </section>
    <section>
      <h1>RDFa</h1>
    </section>
  </section>
</article>

En remarque, si votre en-tête n'est qu'un élément de titre (par exemple h1) et rien d'autre, vous n'avez pas besoin de l'envelopper dans un headerélément.


Merci Lèse. Pourriez-vous fournir une référence pour votre note sur l'utilisation appropriée de l'élément «en-tête»? Je suis intéressé à en savoir plus à ce sujet.
Matt

@Matt: Je me base principalement sur le libellé de la spécification HTML5, qui appelle header"un groupe d'aides à l'introduction ou à la navigation". Ceci et le fait que les spécifications de h1- h6n'exigent pas qu'elles soient imbriquées dans un header(et incluent de nombreux exemples utilisés directement dans la section dont elles font partie) me suggèrent que ce n'est pas nécessaire. Ce sentiment est repris par Oli Studholme et Remy Sharp de HTML5 Doctor.
Lèse majesté

0

Bien que les titres d'articles de votre page soient importants, généralement l'en-tête de niveau supérieur de la page définit le contenu de la page. Parfois, c'est le nom de l'article, et parfois, comme vous le montrez, c'est le titre d'une liste d'articles.

<h1>My Very Interesting Articles</h1>

Cette rubrique définit la page entière comme des «articles intéressants». Ensuite, chaque article est répertorié mais a un niveau de titre inférieur.


-1

La réponse officielle de w3schools à l'utilisation des balises de titre sur une page est la suivante: les titres H1 doivent être utilisés comme titres principaux, suivis des titres H2, puis des titres H3 moins importants, et ainsi de suite.


5
Il n'y a en fait rien de «officiel» dans W3Schools. C'est un nom trompeur, car ils ne sont en aucun cas affiliés ou approuvés par le W3C.
Lèse majesté

en effet, consultez w3fools.com pour une description détaillée de la gravité de W3Schools.
Yahel

Je pensais que ce site de questions-réponses aurait quelques utilisateurs plus constructifs. Vous semblez un peu hautain.
Keith Groben

2
Cela n'a rien à voir avec l'orgueil, et rien à voir avec un désir d'être méchant, et tout à voir avec un désir de voir la désinformation comme celle-ci annulée. Trop de gens pensent que w3schools est une source fiable et faisant autorité, et qu'elle est extrêmement préjudiciable à la qualité du développement Web. L'intérêt des sites stackexchange est de fournir des réponses précises et de qualité, ainsi que de repousser et de corriger les réponses inexactes, incorrectes ou trompeuses.
Yahel

1
En fait, votre réponse a complètement ignoré ma question et a répondu à une question qui n'a pas été posée. Ma question indiquait clairement «Si j'utilise cette méthodologie ...» Cette partie était même en gras pour garantir que la question était claire. Je suppose que c'est la raison la plus probable pour laquelle votre réponse a été rejetée.
Matt
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.