Balises HTML

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 rien.

La mise en forme

<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.

Quelle différence entre du gras et de l’important ?

L’apparence ou l’intention

• b et i disent une apparence : mets ça en gras, mets ça en penché.
• strong et em disent une intention : ceci est important, ceci porte l’accent.

Un lecteur d’écran change de voix sur un strong, pas sur un b. Un moteur de recherche pèse le premier et ignore le second.

Les titres

<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.

Les titres font le sommaire

• Un seul h1 par page.
• Pas de marche sautée : un h3 vit sous un h2.
• C’est par eux qu’une personne aveugle parcourt la page.

Les listes

<ul>
    <li>Du pain</li>
    <li>Du fromage</li>
</ul>

ul quand l’ordre ne compte pas, ol quand il compte. Les numéros sont ajoutés par le navigateur.

Les images

<img src="chat.jpg" alt="Un chat roux endormi sur un clavier">

alt n’est pas optionnel. Une image décorative prend alt="", ce qui veut dire « il n’y a rien à annoncer ici ».

Les liens

<a href="https://tzi.fr/">Le site de Thomas</a>
<a href="/cours/introduction-web/cours/">La liste des cours</a>

Le texte du lien doit se comprendre seul.

Une page où dix liens s’appellent « cliquez ici » ne mène nulle part.

Les divisions anonymes

<div class="carte">
    <p>Un texte avec <span class="prix">12 €</span> dedans.</p>
</div>

div et span ne veulent rien dire, et c’est leur intérêt : elles regroupent ce qui va ensemble.

Le piège

Tout est faisable avec des div. Ce n’est pas une raison.

Un titre reste un h2, une liste reste un ul, même si l’apparence finale est la même.