Une balise ne décrit pas une apparence, elle décrit une nature. Choisir la bonne, c’est expliquer au navigateur, au moteur de recherche et au logiciel de lecture vocale ce qu’ils ont sous les yeux.
Première chose à savoir : on ne peut pas inventer une balise. Le navigateur n’en connaît qu’une liste, fixée par la norme. Une balise inventée ne provoque pas d’erreur, elle ne fait simplement rien.
Les plus courantes tiennent en quelques lignes.
En autonomie
45min
<p>Un paragraphe de texte.</p>
<b>Du gras</b> et <strong>de l’important</strong>.
<i>De l’italique</i> et <em>de l’emphase</em>.
Une ligne,<br>puis la suivante.
Demandez à la classe : quelle différence entre du gras et de l’important ? Entre de l’italique et de l’emphase ? À l’écran, elles s’affichent pareil.
La différence n’est pas visuelle, elle est dans ce que l’on dit.
b et i décrivent une apparence : mets ça en gras, mets ça en penché.strong et em décrivent une intention : ceci est important, ceci porte l’accent de la phrase.Cela change des choses très concrètes. Un logiciel de lecture d’écran modifie sa voix sur un strong, pas sur un b. Un moteur de recherche accorde du poids au premier et ignore le second. Dans le doute, préférez strong et em : vous voulez presque toujours dire quelque chose, pas seulement épaissir un trait.
Quant à br, il force un retour à la ligne à l’intérieur d’un texte. Il sert pour une adresse postale ou un poème, jamais pour écarter deux paragraphes : ça, c’est le travail du CSS.
Six niveaux, de h1 à h6.
<h1>Le titre de la page</h1>
<h2>Une grande partie</h2>
<h3>Une sous-partie</h3>
Le chiffre indique un rang, pas une taille. On ne choisit pas h4 parce qu’on le trouve plus joli, mais parce qu’on est au quatrième niveau de profondeur. Un h3 doit se trouver sous un h2, sans sauter de marche.
Un seul h1 par page, celui qui dit de quoi la page parle.
Ce n’est pas du formalisme. Les titres forment le sommaire de votre page : c’est par eux qu’une personne aveugle la parcourt, et c’est par eux qu’un moteur de recherche comprend son organisation.
Deux sortes, selon que l’ordre compte ou non.
<ul>
<li>Du pain</li>
<li>Du fromage</li>
</ul>
<ol>
<li>Casser les œufs</li>
<li>Battre les œufs</li>
</ol>
ul pour une liste à puces, ol pour une liste numérotée, et li pour chaque élément. Les numéros de ol sont ajoutés par le navigateur : ne les écrivez pas vous-même.
<img src="chat.jpg" alt="Un chat roux endormi sur un clavier">
src indique le fichier à afficher, alt le décrit. Cet attribut n’est pas optionnel : sans lui, une personne aveugle n’a rien, et un visiteur dont l’image ne charge pas non plus.
Une exception : si l’image est purement décorative et ne dit rien de plus que le texte à côté, on écrit alt="", vide. On dit alors « il n’y a rien à annoncer ici », ce qui vaut mieux que de faire lire « photo1234.jpg » à voix haute.
<a href="https://tzi.fr/">Le site de Thomas</a>
<a href="/cours/introduction-web/cours/">La liste des cours</a>
Le lien est la balise qui a fait le web. L’adresse peut être complète, vers un autre site, ou commencer par une barre oblique pour désigner une page du site où l’on se trouve.
Une règle qui compte : le texte du lien doit se comprendre seul. Un logiciel de lecture d’écran peut énumérer tous les liens d’une page, hors de leur phrase. Une page où dix liens s’appellent « cliquez ici » ne mène nulle part.
div et span ne veulent rien dire, et c’est exactement leur intérêt.
<div class="carte">
<p>Un texte avec <span class="prix">12 €</span> dedans.</p>
</div>
Ce sont des boîtes vides de sens, qui servent à regrouper ce qui va ensemble pour pouvoir le mettre en forme ensuite. div entoure un bloc, span entoure quelques mots à l’intérieur d’une ligne.
Elles sont pratiques, et c’est le piège : on est tenté de tout faire avec. Réservez-les aux cas où aucune balise ne dit ce que vous voulez dire. Un titre reste un h2, une liste reste un ul, même si l’on peut obtenir la même apparence avec des div.