10 erreurs HTML à éviter

David Yao
David Yao
Dec 10, 2018 · 4 min read

Quand on débute en programmation web, on commence forcément par apprendre HTML.

Bien qu’il soit relativement facile, il y a quelques erreurs qu’il faut éviter quand on utilise ce langage de balisage. Les voici:

1. Ne placez pas les éléments qui sont par en Block dans les éléments par défaut en Inline

Un élément HTML est affiché par défaut en tant que bloc ou en ligne. Les éléments de bloc, tels que divs et paragraphes, constituent la structure du document. Les éléments en ligne résident dans ces blocs, tels que les balises anchor (lien) et span. Donc, vous ne devriez jamais mettre des éléments blocs à l’intérieur d’éléments inline.

Mauvais:

<a href="#"><h2>Texte</h2></a>

Correct:

<h2><a href="#">Texte</a></h2>

2. Toujours avoir l’attribut alt pour les balises d’image

L’attribut ALT est obligatoire pour les balises IMG, il décrit le contexte de l’image. Il aide votre utilisateur sur un lecteur d’écran ou avec une connexion lente à décider si l’image est importante ou non. Cela permet également au robot d’indexation d’indexer mieux votre contenu. Si les images sont juste pour montrer, utilisez un attribut ALT vide comme alt = “”

Mauvais:

<img src="profilepic.jpeg"/>

Correct:

<img src="profilepic.jpeg" alt="Photo Utilisateur"/>

3. N’utilisez pas de sauts de ligne pour afficher une liste

Si vous ne souhaitez pas afficher une liste d’éléments dans un ordre à puces ou numéroté, n’utilisez jamais de sauts de ligne. Utilisez pour cela les balises <ul> de la liste non ordonnée ou <ol> de la liste ordonnée.

Mauvais:

1. Steve Jobs<br/>
2. Bill Gates<br/>
3. Linus Torvalds

Correct:

<ol>
<li>Steve Jobs</li>
<li>Bill Gates</li>
<li>Linus Torvalds</li>
</ol>

4. N’utilisez pas <b> et <i> pour les caractères gras et en italique

<b> et <i> sont utilisés pour les textes en gras et en italique. Cependant, sémantiquement, ils sont classés en tant que balises de présentation. Vous devriez plutôt utiliser les propriétés CSS font-weight et font-style à ces fins, respectivement. Si les raisons pratiques imposent d’appliquer les styles sur le document, utilisez plutôt <strong> et <em>. Ils font le même travail que <b> et <i> mais sont sémantiquement corrects.

Mauvais:

<b>C'est en gras, mais incorrect !</b>

Correct:

<strong>C'est gras et correct!</strong>

5. Ne pas utiliser plusieurs sauts de ligne

La balise de saut de ligne de <br /> ne doit être utilisée que pour insérer des sauts de ligne simples dans le flux de texte de paragraphe afin de mettre un mot particulier sur une nouvelle ligne. Il ne doit pas être utilisé pour créer des espaces entre les éléments, mais plutôt pour scinder le texte en paragraphes séparés.

Mauvais:

Une ligne
<br/>
<br/>
Une autre ligne.

Correct:

<p>Une ligne</p>
<p>Une autre ligne</p>

6. Évitez les styles à l’intérieur des balises

Vous avez probablement entendu cela beaucoup de fois auparavant. L’intérêt des codes HTML et CSS sémantiques est de séparer la structure et le style du document, il n’y a donc aucun sens de placer le style directement dans le document HTML.

Mauvais:

<h2 style="color:red;">Faux</h2>

Correct:

HTML => 
<h2>Correct</h2>
CSS =>
h2 .red{color: red;}

7. Ne pas ajouter (ou supprimer) l’attribut border en HTML

L’attribut Border est également une balise de présentation et doit être laissé sémantiquement pour être modifié dans le CSS plutôt que dans le document HTML.

Mauvais:

<img src="mypic.png" border="0"/>

Correct:

HTML => 
<img src="mypic.jpg"/>
CSS =>
img .no-border{border: 0px;}

8. N’utilisez jamais <blink> ou <marquee>

Ces balises n’ont jamais été incluses dans le standard HTML officiel du consortium W3C. En dehors de cela, leur utilisation est considérée comme laide et peu impressionnante. Si vous devez attirer l’attention sur une certaine partie de votre document, utilisez une autre approche d’une manière moins choquante.W

9. Évitez d’utiliser des éléments obsolètes

Certains anciens balises et attributs HTML ont été déclarés obsolètes par le consortium W3C. Bien que les navigateurs modernes les prennent actuellement en charge, ils pourraient ne plus l’être à l’avenir. Consultez cet article qui répertorie presque tous les éléments déconseillés.

10. N’oubliez pas de mettre le DOCTYPE

Le Doctype décrit le type de HTML que vous utilisez. Si ce n’est pas là, vous ne saurez pas si votre code est valide.
Enfin, utilisez l’aide du validateur HTML / CSS en ligne pour trouver des failles dans votre code. Voici les liens pour quelques-uns d’entre eux:

Et voilà ! C’est ce que je voulais partager avec vous. Avez-vous d’autres erreurs en tête ? Partagez-les dans les commentaires ci-dessous

  • Merci d’avoir lu ! Si vous avez aimé cet article,
  • Faites un coucou sur : Instagram | Facebook | Twitter |
  • Avez-vous besoin d’aide pour votre projet web ? Ecrivez moi à l’adresse suivante : david@oschool.ci
  • Téléchargez gratuitement mes livres ici.

Originally published at Deviens développeur web.

David Yao

Written by

David Yao

Full Stack Developer. Founder of https://oschool.ci. My goal is to be one of the greatest programming teachers and entrepreneurs in Africa

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade