Balises HTML
Découvrez ce qu'est une balise HTML : balises ouvrantes et fermantes, différence entre balises, éléments et attributs, éléments vides et règles d'imbrication.
Une balise HTML est un mot-clé (un nom de balise) entouré de chevrons, comme <p> ou <img>. Les balises sont les éléments constitutifs de HTML : elles indiquent au navigateur où commence et où se termine un contenu, ainsi que le type de contenu dont il s'agit. Le navigateur lit les balises et construit la page à partir d'elles, mais n'affiche jamais les balises elles-mêmes.
Cette page explique ce qu'est une balise, en quoi une balise ouvrante diffère d'une balise fermante, comment les balises se combinent en éléments avec des attributs, quelles balises sont autonomes (éléments vides), et les règles d'imbrication correcte des balises.
Balises ouvrantes et fermantes
La plupart des balises viennent par paires : une balise ouvrante et une balise fermante. La balise fermante est identique à la balise ouvrante, mais commence par une barre oblique (/).
<p> <!-- opening tag -->
</p> <!-- closing tag -->- La balise ouvrante marque le début du contenu.
- La balise fermante marque la fin du contenu.
Tout ce qui se trouve entre les deux balises est le contenu auquel s'appliquent les balises.
Balise vs. élément vs. attribut
Ces trois termes sont souvent confondus ; il est donc utile de les définir précisément.
- Une balise est le mot-clé entre chevrons lui-même —
<p>ou</p>. - Un élément est l'unité complète : la balise ouvrante, le contenu et la balise fermante ensemble.
- Un attribut est une information supplémentaire placée dans la balise ouvrante qui configure l'élément.
Voici un seul élément paragraphe décomposé en ses parties :
<p class="intro">Hello world</p>| Partie | Ce que c'est |
|---|---|
<p ...> | la balise ouvrante |
class="intro" | un attribut (nom class, valeur "intro") |
Hello world | le contenu |
</p> | la balise fermante |
| toute la ligne | l'élément |
Ainsi, <p> est une balise, tandis que <p>Hello world</p> est un élément. Pour en savoir plus, consultez Éléments HTML et Attributs HTML.
Exemple d'un élément complet
<!DOCTYPE html>
<html>
<head>
<title>Tags, elements, and attributes</title>
</head>
<body>
<h1>HTML tags</h1>
<p class="intro">This whole line is a paragraph element.</p>
</body>
</html>Éléments vides (void elements)
Certains éléments n'ont pas de contenu et donc pas de balise fermante. On les appelle éléments vides. Ils se composent d'une seule balise.
Les éléments vides les plus courants sont :
<br>— un saut de ligne<hr>— une séparation thématique (règle horizontale)<img>— une image<input>— un champ de formulaire
<p>First line<br>Second line</p>
<hr>
<img src="logo.png" alt="Company logo">
<input type="text" name="username">En HTML, on écrit un élément vide sous la forme d'une seule balise sans barre oblique, par exemple <br>. La forme auto-fermante <br /> est également acceptée et obligatoire en XHTML, mais elle est facultative en HTML.
Les balises ne sont pas sensibles à la casse
Les noms de balises HTML ne sont pas sensibles à la casse : <P>, <p> et <P> signifient tous la même chose. Par convention, cependant, les balises sont écrites en minuscules, ce qui est le style recommandé.
<!-- All three are valid and identical to the browser -->
<DIV></DIV>
<Div></Div>
<div></div>Imbriquer les balises correctement
Les balises peuvent contenir d'autres balises. Dans ce cas, elles doivent être correctement imbriquées : un élément interne doit s'ouvrir et se fermer entièrement à l'intérieur de son parent. Les balises ne doivent pas se chevaucher.
<!-- Correct: <em> opens and closes inside <p> -->
<p>This is <em>important</em> text.</p><!-- Wrong: the tags overlap -->
<p>This is <em>important</p></em>Dans l'exemple incorrect, <em> est ouvert à l'intérieur de <p> mais fermé en dehors. Les navigateurs essaient de se remettre de ce type d'erreur, mais le résultat est imprévisible ; fermez donc toujours d'abord la balise la plus interne.
Pour les notes que le navigateur ignore plutôt qu'il ne rend, voir Commentaires HTML.
Note historique : dans les années 1990, les auteurs enveloppaient parfois le contenu des scripts dans des marqueurs de commentaires HTML pour les masquer aux navigateurs très anciens qui ne comprenaient pas
<script>. Cette technique est obsolète et ne doit plus être utilisée aujourd'hui.