5 erreurs HTML courantes à éviter.

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>

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;
}

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.