Sémantique HTML

Le HTML est un langage sémantique ; chaque élément a sa signification et ne peut pas être utilisé à des fins de présentation.

Halte au détournement de code !

Certains éléments HTML sont détournés de leur usage sémantique ; cela est bien entendu proscrit. Voici les cas de “détournement de code” les plus fréquents.

Confusion entre liens et boutons

Il existe deux types de détournement de code :

Utilisation des balises de lien <a>...</a>, pour obtenir des bouton sans arrière-plan ni bordure.
Utilisation d’un lien au lieu d’un bouton : <a href="#" onClick="...">...</a>.
Ici, une action javascript a été posé sur le lien via un onClick. Un lien sur lequel on pose un onClick n’est pas un lien, c’est un bouton. La bonne façon de faire sera : <button onClick="...">...</button>, quitte à donner ensuite à son bouton l’allure d’un lien hypertexte via du CSS.

Pour plus d’informations sur la différences entre liens et boutons, se référer à la rubrique Liens et boutons

Utiliser la balise `<hr>` pour créer une ligne horizontale de séparation.

La balise <hr> ne peut être utilisée qu’entre deux balises de type paragraphe <p>...</p> et sert à représenter un changement thématique entre deux paragraphes. On ne pourra donc utiliser <hr /> que dans le contexte suivant :

<p>Quand je mange du chocolat, tout va.</p>
<hr>
<p>Quand je dessine avec un pinceau en poils de chameau, tout est beau.</p>

Pour créer une ligne de séparation, on utilisera donc un style CSS déclaré, par exemple, via border-top: 1 px solid black;

Utilisation de `<fieldset>...</fieldset>` pour obtenir une bordure.

<fieldset>...</fieldset> est une balise spécifique au formulaire (balise <form>...</form>). La balise <fieldset> doit toujours est suivie ddes balises <legend>...</legend> pour que le code soit conforme.
Les balises <fieldset>...</fieldset> ne doivent être utilisées que dans les formulaire pour regrouper des champs de même nature.

Exemple

<form ...>
     <fieldset>
          <legend>Invité 1</legend>
               <label for="prenom1">Prénom</label>
               <input type="text" id="prenom1" name="prenom1" />
               <label for="nom1">Nom</label>
               <input type="text" id="nom1" name="nom1" />
     </fieldset>
     <fieldset>
          <legend>Invité 2</legend>
               <label for="prenom2">Prénom</label>
               <input type="text" id="prenom2" name="prenom2" />
               <label for="nom2">Nom</label>
               <input type="text" id="nom2" name="nom2" />
     </fieldset>
</form>

Pour plus d’informations sur les formulaires, se référer à la rubrique Formulaire.

Utiliser des éléments HTML à des fins de mise en forme

Les balises <q>...</q> sont parfois utilisées pour obtenir un texte entre guillemets (mise en forme par défaut des navigateurs).
Les balises <q>...</q> servent uniquement à indiquer une citation courte à l’intérieur d’un paragraphe.