Mappage des éléments HTML5 aux classes HTML et aux ID, mais qu'en est-il des balises d'en-tête?

Question

au travail que nous commençons à suivre ce guide particulier pour la mise en œuvre lentement goodies HTML5:

http://oli.jp/2008/html5-class-cheatsheet/

L'idée de base en utilisant la structure HTML5, mais avec HTML4 divs avec des classes et des ID au lieu. Nous connaissons les scripts Javascript qui peuvent générer les éléments HTML5 (donc IE peut les styler, sinon ça ne sera pas le cas!) Mais nous nous efforçons de rendre tous nos sites accessibles, de travailler sur IE6 + et de ne pas avoir besoin de Javascript être fonctionnel.

Nous avons déjà commencé à utiliser le doctype HTML5, car la puissance des attributs 'data-' nous est utile. (L'article de John Resig http://ejohn.org/blog/html-5-data-attributes/)

Tout ce que suggère le premier article nous semble plutôt bien, mais une des zones de confusion est ce qu'il faut faire avec la hiérarchie des balises d'en-tête. Pour chaque bloc défini (que ce soit un article, un aparté, un pied de page, etc.), est-ce que nous commençons à nouveau la hiérarchie d'en-tête? Donc h1, h2, h3 ... pour un article, par exemple. Alors l'article suivant sur la page aurait h1, h2, h3 ... alors pour le pied de page (s'il a des en-têtes) alors ça recommencera h1, h2, h3 ... et pour un aparté ça recommencera h1, h2, h3 ...

... si tel est le cas, quel est l'impact d'avoir beaucoup de h1, h2, h3 sur une page pour des choses comme les moteurs de recherche et les lecteurs d'écran? Nous utilisons le doctype html5, mais nous n'utilisons pas vraiment le nouvel article, le pied de page, les balises nav mais nous pensons utiliser la hiérarchie d'en-tête HTML5.

Quelqu'un peut-il aider à nettoyer la boue avec ce problème?

Answer 1

Si vous n'utilisez pas les éléments de section réels, vous ne devez pas réinitialiser à h1. Autrement dit, ce qui suit serait approprié:

<h1>Site title</h1> 
<div class=article> 
    <h2>The most interesting article ever!</h2> 
    <div class=section> 
    <h3>Foo</h3> 
    <p>Bar 
    </div> 
    <div class=section> 
    <h3>Baz</h3> 
    <p>Quux 
    </div> 
</div> 

Avec les éléments réels, vous pouvez utiliser soit

<h1>Site title</h1> 
<article> 
    <h2>The most interesting article ever!</h2> 
    <section> 
    <h3>Foo</h3> 
    <p>Bar 
    </section> 
    <section> 
    <h3>Baz</h3> 
    <p>Quux 
    </section> 
</article> 

ou

<h1>Site title</h1> 
<article> 
    <h1>The most interesting article ever!</h1> 
    <section> 
    <h1>Foo</h1> 
    <p>Bar 
    </section> 
    <section> 
    <h1>Baz</h1> 
    <p>Quux 
    </section> 
</article> 

Je suggère d'utiliser la HTML5 Outliner pour vérifier si votre utilisation des titres semble juste.