Syntaxe HTML

Une balise va par deux

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

Une ouvrante, une fermante. Seule la fermante porte une barre oblique.

Les deux balises et leur contenu forment un élément.

On ferme dans l’ordre inverse de l’ouverture

<strong><em>correct</em></strong>
<strong><em>incorrect</strong></em>

Le dernier ouvert est le premier fermé. Deux éléments ne se croisent jamais.

Un vocabulaire de famille

• Un élément qui en contient un autre en est le parent.
• Deux éléments de même parent sont frères, aîné et cadet.
• Un élément a plusieurs descendants possibles, et un seul parent.

On s’en servira tout le temps en CSS.

Les balises auto-fermantes

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

Elles n’entourent rien : une image est le contenu. Pas de balise fermante.

Les attributs

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

Une information donnée au navigateur, qui ne s’affiche pas telle quelle. Elle s’écrit dans la balise ouvrante, sous la forme nom="valeur".

Quatre attributs à connaître

• href : où le clic vous emmène.
• src : le fichier à aller chercher.
• title : le message affiché au survol.
• alt : la description d’une image, lue à voix haute aux personnes aveugles.

Savoir nommer ce qu’on tape

• < et > sont des chevrons.
• / est une barre oblique, ou slash.
• " sont des guillemets droits.

Le piège des guillemets

Un traitement de texte remplace vos guillemets droits par des guillemets français.

Le navigateur ne les reconnaît pas. Écrivez votre code dans un éditeur de code.

Les espaces dans une balise

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

Les espaces en dehors

<p>Un      seul      espace</p>

Plusieurs espaces d’affilée n’en font qu’un à l’écran.

Les retours à la ligne comptent pour un espace : ce qui organise votre code ne dérange pas l’affichage.