Syntaxe HTML

1. Balise ouvrante et fermante

Une balise est un mot entre chevrons. Elle va presque toujours par deux : une balise ouvrante qui annonce le début, une balise fermante qui annonce la fin. Seule la fermante porte une barre oblique.

<p>Le web a été inventé en 1989.</p>

Ce que l’on écrit entre les deux, c’est le contenu. L’ensemble, les deux balises et ce qu’elles entourent, s’appelle un élément.

La balise ne s’affiche jamais à l’écran. Elle dit au navigateur ce qu’est le texte qu’elle entoure : ici, p pour paragraphe.

2. Balises imbriquées

Un élément peut en contenir un autre. On dit qu’il est imbriqué.

<p>Le web a été inventé en <strong>1989</strong>.</p>

Une seule règle, et tout en découle : on ferme toujours dans l’ordre inverse de l’ouverture. Le dernier ouvert est le premier fermé. Deux éléments ne se croisent jamais.

<p>Correct  : <strong><em>texte</em></strong></p>
<p>Incorrect : <strong><em>texte</strong></em></p>

Cette imbrication se décrit avec un vocabulaire de famille.

• Le p est le parent du strong, qui est son enfant.
• Deux éléments de même parent sont frères. Celui qui vient avant est l’aîné, celui qui suit est le cadet.
• Un élément peut avoir des descendants sur plusieurs générations, et un seul parent.

Ce vocabulaire n’est pas décoratif : on s’en servira tout le temps en CSS pour désigner les éléments à mettre en forme.

3. Les balises auto-fermantes

Quelques balises n’entourent rien. Une image n’a pas de contenu textuel : elle est le contenu. Ces balises s’ouvrent et se ferment d’un coup, et n’ont pas de balise fermante.

<img src="chat.jpg" alt="Un chat roux endormi">
<br>

Elles sont peu nombreuses, et vous les reconnaîtrez vite : img pour une image, br pour un retour à la ligne forcé, meta et link dans l’en-tête de la page.

4. Attributs

Un attribut est une information donnée au navigateur, qui ne s’affiche pas telle quelle à l’écran. C’est une annotation qui apporte du contexte.

Il s’écrit dans la balise ouvrante, sous la forme nom="valeur".

<a href="https://tzi.fr/">Le site de Thomas</a>

Quatre attributs à connaître tout de suite.

• href décrit un comportement : vers où l’utilisateur sera emmené s’il clique. L’adresse s’affiche en bas de l’écran au survol, avant même le clic.
• src indique le fichier à aller chercher, pour une image par exemple.
• title est un message qui apparaît au survol, après un instant d’attente.
• alt est le texte de remplacement d’une image : il s’affiche si l’image ne se charge pas, et c’est lui qu’entend une personne aveugle dont le logiciel lit la page à voix haute. Décrivez ce que l’image montre, pas ce qu’elle est.

5. Le nom des caractères

Pour se comprendre à l’oral, encore faut-il savoir nommer ce qu’on tape.

• < et > sont des chevrons, ouvrant et fermant.
• / est une barre oblique, que tout le monde appelle un slash.
• " sont des guillemets droits.

Attention à ces derniers. Si vous écrivez votre code dans un traitement de texte au lieu d’un éditeur de code, le logiciel remplacera gentiment vos guillemets droits par des guillemets français, « comme ceci ». Le navigateur ne les reconnaîtra pas, et votre attribut ne fonctionnera pas.

6. La gestion des espaces

Les espaces comptent, et pas de la même façon selon l’endroit.

Dans une balise, la règle est stricte.

• Pas d’espace entre le chevron < et le nom de la balise.
• Pas d’espace autour du = d’un attribut.
• Un espace entre le nom de la balise et le premier attribut.
• Un espace entre deux attributs.

<img src="chat.jpg" alt="Un chat roux">

En dehors des balises, c’est l’inverse : tout ce que vous écrivez s’affiche, mais plusieurs espaces d’affilée n’en font qu’un seul à l’écran.

<p>Un      seul      espace</p>

Cette page affichera « Un seul espace ». Les retours à la ligne comptent eux aussi pour un espace : ce qui organise votre code ne dérange pas l’affichage.