Sémantique
La sémantique est liée au sens qu'on donne à un élément, par exemple les titres. Ce dernier vous cause beaucoup de problèmes dans vos réalisations. Quel est le lien entre les titres et la sémantique ? Il s'agit de donner une importance différente pour chacun de mes titres. En HTML, on associe cette importance avec le chiffre de la balise, par exemple <h1> ... le 1 signifie que c'est le titre principal.
Organisation des différents niveaux de titre
[ Mettre en place une hiérarchie des titres ]
L'exemple est un cas typique d'un saut dans la hiérarchie des titres. C'est-à-dire, on observe un bond entre les niveaux en passant de <h1> à <h3>. Ce bond constitue une faute importante concernant la sémantique des titres. L'image du correctif démontre que la bonne approche est de mettre un <h2> à la suite d'un <h1>.
ASTUCES
C'est important de voir les titres comme si vous étiez en train de rédiger un texte à l'aide de Word. Votre titre principal de votre travail est représenté en HTML par un <h1>. Si votre texte, par exemple, se divise en 5 sujets, alors vous aurez 5 <h2> afin de les identifier dans le travail. Si certaines de ces divisions peuvent se subdiviser encore, alors nous sommes au troisième niveau ... donc ... un <h3>.
[ Utilisation adéquate des titres ]
Voici une variante de la même erreur présentée plus haut. On observe que le <h1> revient dans les <section>. Théoriquement, on associe le <h1> à un <header>. Les autres niveaux sont suceptibles de se retrouver au milieu d'un <section> (comme nous le démontrons dans l'image du correctif). On se rappelle qu'un <section> permet de subdiviser un sujet principal, donc ... un <article>. C'est celui-ci qui accueillera alors le titre principal à l'intérieur d'un <header> afin de bien identifier le titre du site ou du sujet principal.
