5 erreurs HTML courantes à éviter

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 les éléments “header” et “footer”.

Ne fais pas ça

<div id="header">
...
</div>
<div id="footer">
...
</div>

Faites ceci

<header>
...
</header>
<footer>
...
</footer>

2. Utiliser l’élément de figure
Si vous avez besoin d’ajouter une légende à votre image, utilisez l’élément “figure” combiné avec l’élément “figcaption”.

Ne fais pas ça

<img src="image url" alt="image description" />
<p> Lorem Ipsum Description </p>

Faites ceci

<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 aucune signification sémantique, à la place, modifiez le font-weight/font-style dans le CSS ou utilisez l’élément “strong” ou “em”.

Ne fais pas ça

<b>Bold</b>
<i>Italics</i>

Faites ceci

<strong>Bold</strong>
<em>Italics</em>

4. Utiliser des liens descriptifs
Le texte d’un lien doit être explicite et indiquer où redirige l’utilisateur, les utilisateurs et les moteurs de recherche peuvent plus facilement comprendre votre contenu et comment il se rapporte à d’autres pages.

Ne fais pas ça

<a href="url">
Check our pricing...
</a>

Faites ceci

Check our <a href="url"> pricing </a>

5. Utiliser des styles en ligne
L’écriture de styles en ligne viole le principe d’avoir la structure (HTML) séparée de la présentation (CSS). Écrivez plutôt les styles dans une feuille de style.

Ne fais pas ça

<h1 style="font-size: 24">
 Header
</h1>

Faites ceci

h1 {
font-size: 24
}