Docs HTML exécutables : Balises HTML

Q: Quelle est la différence entre une balise HTML et un élément HTML ?

Une balise est le code que vous tapez, comme ou . Un élément est l'ensemble que le navigateur construit à partir de là : la balise ouvrante, ses attributs, le contenu et la balise fermante. Hi se compose de deux balises qui forment un seul élément p.

Q: Les balises HTML sont-elles sensibles à la casse ?

Non. et produisent le même élément, tout comme n'importe quel mélange de majuscules et de minuscules. Les minuscules sont le style standard et ce que produisent la plupart des outils de formatage.

Ce qu'est une balise HTML

Une balise HTML est un nom entre chevrons qui balise un morceau de contenu. La plupart des balises vont par paires : une balise ouvrante comme <p> et une balise fermante avec une barre oblique comme </p>. Tout ce qui se trouve entre les deux est le contenu, et l'ensemble forme un élément.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tags</title>
</head>
<body>
  <h1>A heading</h1>
  <p>A paragraph with a <strong>strong</strong> word and a <a href="#end">link</a>.</p>
  <ul>
    <li>A list item</li>
    <li>Another list item</li>
  </ul>
  <p id="end">The browser draws each element in its own way.</p>
</body>
</html>

Changez <h1> en <h2> (la balise ouvrante et la balise fermante) et le titre devient plus petit. C'est le nom de la balise qui indique au navigateur ce qu'est le contenu.

Anatomie : balises, attributs et éléments

<a href="/docs/html/links" class="nav">Links</a>

Partie	Dans l'exemple
Balise ouvrante	`<a href="/docs/html/links" class="nav">`
Nom de la balise	`a`
Attributs	`href="/docs/html/links"` et `class="nav"`
Contenu	`Links`
Balise fermante	`</a>`
Élément	tout ce qui précède ensemble

Les attributs se placent toujours dans la balise ouvrante, jamais dans la fermante. Ils sont présentés sur la page des attributs.

Les noms de balises sont insensibles à la casse : <P> et <p> sont identiques. Écrivez-les en minuscules.

Balises vides : pas de balise fermante

Certains éléments ne peuvent rien contenir, ils n'ont donc qu'une balise ouvrante. On les appelle éléments vides (on parle aussi de balises auto-fermantes) :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Void tags</title>
</head>
<body>
  <p>Line one<br>Line two after a br</p>
  <hr>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40'%3E%3Crect width='120' height='40' rx='6' fill='%232563eb'/%3E%3C/svg%3E" alt="A blue rectangle">
  <p><input type="text" placeholder="An input"></p>
</body>
</html>

La liste complète : area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr.

Vous pouvez les écrire <br /> avec une barre oblique. En HTML, la barre ne fait rien ; elle est autorisée pour que le code de style XHTML continue de fonctionner. Une barre sur une balise normale, comme <div />, est aussi ignorée, ce qui veut dire que le div reste ouvert.

Imbriquer des balises

Les éléments se placent à l'intérieur d'autres éléments. La règle : fermez les balises dans l'ordre inverse de leur ouverture. La dernière ouverte est la première fermée.

<p>This is <strong>very <em>important</em></strong>.</p>   <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p>   <!-- wrong -->

Les navigateurs ne rejettent pas une imbrication cassée. Ils la réparent, et la réparation ne correspond pas toujours à ce que vous vouliez. Cet exemple donne deux fragments mal imbriqués à l'analyseur du navigateur et affiche la structure qu'il a réellement construite :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nesting</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <pre id="out"></pre>
  <script>
    const snippets = [
      '<p>Bold <b>and <i>italic</b> overlap</i>.</p>',
      '<p>A paragraph <div>with a div inside</div></p>'
    ];
    const box = document.createElement('div');
    document.getElementById('out').textContent = snippets.map((html) => {
      box.innerHTML = html;
      return 'You wrote:     ' + html + '\nBrowser built: ' + box.innerHTML;
    }).join('\n\n');
  </script>
</body>
</html>

Deux réparations ont lieu. Les <b> et <i> qui se chevauchent sont découpés en éléments supplémentaires. Et un <p> ne peut pas contenir de <div> : le navigateur ferme donc le paragraphe avant le div et transforme le </p> orphelin en un nouveau paragraphe vide. Quand le CSS ou le JavaScript se comporte bizarrement, une imbrication cassée est l'une des premières choses à vérifier.

Éléments bloc et inline

La plupart des balises se rangent dans deux groupes d'affichage. Les éléments bloc (div, p, h1 à h6, ul, section) commencent sur une nouvelle ligne et prennent toute la largeur. Les éléments inline (span, a, strong, em, code) s'insèrent dans une ligne de texte et ne sont pas plus larges que leur contenu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Block and inline</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div, p { border: 2px solid #2563eb; }
    span, a, strong { border: 2px solid #f59e0b; }
  </style>
</head>
<body>
  <div>div is block</div>
  <p>p is block, with <span>a span</span>, <a href="#">a link</a> and <strong>strong</strong> inline.</p>
</body>
</html>

Les boîtes bleues s'étirent sur toute la page ; les boîtes ambre n'entourent que leur texte. Le CSS peut changer cela avec la propriété display, mais chaque balise part de sa valeur par défaut. Voir div et span pour les deux conteneurs génériques.

Les balises HTML les plus courantes

Balise	Rôle
`<html>`, `<head>`, `<body>`	Le squelette du document
`<title>`, `<meta>`, `<link>`	Les informations de la page dans le head
`<h1>` à `<h6>`	Titres
`<p>`	Paragraphe
`<a>`	Lien
`<img>`	Image
`<ul>`, `<ol>`, `<li>`	Listes
`<strong>`, `<em>`	Texte important et texte accentué
`<br>`, `<hr>`	Retour à la ligne, séparation thématique
`<div>`, `<span>`	Conteneurs génériques bloc et inline
`<table>`, `<tr>`, `<th>`, `<td>`	Tableaux
`<form>`, `<input>`, `<label>`, `<button>`	Formulaires
`<header>`, `<nav>`, `<main>`, `<footer>`, `<section>`, `<article>`	Structure de page porteuse de sens

Pour une liste sur une page à imprimer, voir l'aide-mémoire HTML.

Les balises qui n'existent pas

Si vous tapez une balise que le navigateur ne connaît pas, il ne plante pas. Il crée un élément inconnu, affiche son contenu et le traite comme inline :

<p>Before <card style="border: 2px solid #16a34a; padding: 2px 6px">an unknown tag</card> after.</p>
<p>A custom element: <user-badge style="background: #e5e7eb; padding: 2px 6px">user-badge</user-badge></p>

Une balise inconnue n'a aucun sens pour les moteurs de recherche ni pour les lecteurs d'écran, alors préférez une vraie balise. Si vous créez votre propre composant en JavaScript, donnez-lui un nom avec un trait d'union (user-badge) : les noms avec trait d'union sont réservés aux éléments personnalisés et n'entreront jamais en conflit avec de futures balises HTML.

Erreurs fréquentes

Oublier une balise fermante. Un </a> ou un </strong> manquant transforme le reste de la page en lien ou en gras. Les navigateurs ferment certaines balises à votre place (</p>, </li>), mais pas celles-là.
Fermer une balise vide. </br> et </img> ne sont pas valides. Les navigateurs lisent même </br> comme un <br> ouvrant, donc <br></br> donne deux retours à la ligne.
Faire se chevaucher des balises. Fermez dans l'ordre inverse : <b><i>x</i></b>, jamais <b><i>x</b></i>.
Mettre un bloc dans un paragraphe. Un <div>, une liste ou un titre dans un <p> termine le paragraphe trop tôt. Utilisez un <div> comme conteneur extérieur.
Choisir des balises pour leur apparence. Utilisez <h2> parce que c'est un titre, pas parce qu'il est gros. La taille et la graisse relèvent du CSS.

Questions fréquentes

Quelle est la différence entre une balise HTML et un élément HTML ?

Une balise est le code que vous tapez, comme <p> ou </p>. Un élément est l'ensemble que le navigateur construit à partir de là : la balise ouvrante, ses attributs, le contenu et la balise fermante. <p>Hi</p> se compose de deux balises qui forment un seul élément p.

Quelles balises HTML n'ont pas besoin de balise fermante ?

Les éléments vides ne peuvent pas avoir de contenu, ils n'ont donc pas de balise fermante : <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col> et <embed>.

Faut-il écrire <br> ou <br /> ?

Les deux sont du HTML valide. La barre oblique finale est autorisée sur les éléments vides et ignorée par le navigateur. Sur une balise non vide comme <div />, la barre est aussi ignorée, donc le div reste ouvert jusqu'à un </div>.

Les balises HTML sont-elles sensibles à la casse ?

Non. <P> et <p> produisent le même élément, tout comme n'importe quel mélange de majuscules et de minuscules. Les minuscules sont le style standard et ce que produisent la plupart des outils de formatage.

Combien existe-t-il de balises HTML ?

Le standard HTML actuel définit plus de 100 éléments, mais les pages courantes en utilisent environ 20 à 30 : titres, paragraphes, liens, images, listes, div, span, formulaires et balises de mise en page sémantiques.

Que se passe-t-il si j'utilise une balise qui n'existe pas ?

Le navigateur crée quand même un élément, affiche son contenu et le traite comme un élément inline sans signification particulière. Les éléments personnalisés sont autorisés si leur nom contient un trait d'union, comme <user-card>.

Concepts liés