1. En-tête et pied de page sémantiques
Les divs n’ont pas de structure sémantique. Au lieu d’utiliser des divs pour créer des structures d’en-tête ou de pied de page, utilisez des éléments « header » et « footer ».
Ne faites pas cela
<div id="header">
...
</div>
<div id="footer">
...
</div>
Faites cela
<header>
...
</header>
<footer>
...
</footer>
2. Utiliser l’élément Figure
Si vous devez ajouter une légende à votre image, utilisez l’élément « figure » combiné à l’élément « figcaption ».
Ne faites pas cela
<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>
Faites cela
<figure>
<img src="image url" alt="image description" />
<figcaption>
<p> Lorem Ipsum Description </p>
</figcaption>
</figure>
3. N’utilisez pas de balises en gras ou en italique
Les balises « b » et « i » sont des balises de présentation et n’ont pas de signification sémantique. Il faut plutôt modifier le font-weight/font-style dans le CSS ou utiliser l’élément « strong » ou « em ».
Ne faites pas cela
<b>Bold</b>
<i>Italics</i>
Faites cela
<strong>Bold</strong>
<em>Italics</em>
4. Utiliser des liens descriptifs
Le texte d’un lien doit être explicite et indiquer où il redirige l’utilisateur. Les utilisateurs et les moteurs de recherche peuvent ainsi comprendre plus facilement votre contenu et sa relation avec les autres pages.
Ne faites pas cela
<a href="url">
Check our pricing...
</a>
Faites cela
Check our <a href="url"> pricing </a>
5. Utiliser les styles en ligne
L’écriture de styles en ligne viole le principe selon lequel la structure (HTML) est séparée de la présentation (CSS). Il est préférable d’écrire les styles dans une feuille de style.
Ne faites pas cela
<h1 style="font-size: 24px;">
Header
</h1>
Faites cema
h1 {
font-size: 24px;
}