Quelle balise HTML utiliser ?
Table des matières
129 balises HTML, SVG et MathML utilisables en body
Le HTML, le
SVG et le
MathML totalisent
129 balises utilisables entre les balises <body>. La plupart des
projets en utilisent une dizaine, et comblent le reste avec des <div>.
Ce n'est pas une question de paresse. C'est une question de visibilité. On ne choisit pas une balise qu'on ne connaît pas. Et on ne cherche pas une balise quand on ne sait pas qu'elle existe.
Cette page inverse l'approche. Au lieu de lister des balises et d'expliquer à quoi elles servent, elle part de ce que tu veux faire, ton intention, et te montre la balise qui y répond.
Chaque intention renvoie vers un micro-article dédié : ce que c'est, quand l'utiliser, ce que tu gagnes en accessibilité, en SEO et en GEO, un exemple de code, et les liens vers les specs.
Pars de la nature de ton contenu
Structure de page12
- Dire au navigateur "c'est ici que ça se passe"<main>
- Introduire une page ou une section, et non, ce n'est pas juste un logo<header>
- Conclure une page ou une section, bien plus qu'un © en bas<footer>
- Proposer un menu de navigation, et toutes les navigations ne se valent pas<nav>
- Isoler un contenu qui a du sens tout seul : article, post, commentaire<article>
- Découper une page en parties titrées, et la différence avec <article><section>
- Ajouter du contenu que tu pourrais retirer sans rien perdre<aside>
- Associer un titre à son sous-titre sans casser la hiérarchie<hgroup>
- Afficher des coordonnées de contact, pas dans un <p>, pas dans un <div><address>
- Lier une image ou un schéma à sa description, même si tu déplaces le tout<figure> <figcaption>
- Délimiter une zone de recherche, le landmark que <form> ne crée pas<search>
- Utiliser <meta>, <link> ou <style> dans le body : microdonnées, resource hints, CSS inline<meta> <link> <style>
Texte courant10
- Tout n'est pas un paragraphe, quand <p> est (et n'est pas) la réponse<p>
- La hiérarchie des titres que 90 % des sites cassent<h1> <h2> <h3> <h4> <h5> <h6>
- Dire "ce mot est important", et que le lecteur d'écran le sache<strong>
- Changer le ton d'une phrase, l'emphase que l'italique seul ne porte pas<em>
- Écrire des petites mentions (copyright, conditions) sans les noyer<small>
- Séparer deux sujets visuellement et sémantiquement<hr>
- Forcer un retour à la ligne, les rares cas où c'est légitime<br>
- Suggérer où couper un mot long sans imposer la coupure<wbr>
- Annoter la prononciation d'un caractère (langues CJK)<ruby> <rt> <rp>
- Isoler un fragment de texte bidirectionnel (arabe, hébreu)<bdi> <bdo>
Citations et références4
Code et données techniques8
- Afficher du code source dans le texte<code>
- Conserver l'indentation et les espaces : code, poésie, ASCII art<pre>
- Montrer une touche ou un raccourci clavier<kbd>
- Afficher ce qu'un programme a renvoyé<samp>
- Représenter une variable dans une formule ou du code<var>
- Exécuter du JavaScript, et offrir un repli quand il est désactivé<script> <noscript>
- Préparer du HTML invisible, prêt à apparaître quand JavaScript le décide<template>
- Percer un trou dans un composant pour que l'extérieur le remplisse<slot>
Marquage et annotations13
- Surligner un mot : résultat de recherche, passage clé<mark>
- Montrer qu'un texte a été supprimé, et que la suppression compte<del>
- Montrer qu'un texte a été ajouté : correction, mise à jour<ins>
- Barrer un texte qui n'est plus exact sans le supprimer<s>
- Écrire une formule chimique ou une note de bas de page<sub> <sup>
- Indiquer une date, une heure ou une durée lisible par les machines<time>
- Définir un terme, la première fois qu'un concept apparaît<dfn>
- Appliquer un style inline ou changer de langue dans une phrase<span>
- Marquer un texte dans une voix alternative : terme technique, pensée intérieure<i>
- Attirer l'attention sur un mot sans lui donner d'importance sémantique<b>
- Associer une valeur lisible par les machines à un texte humain<data>
- Regrouper du contenu quand aucune balise sémantique ne convient, le dernier recours<div>
- Souligner un nom propre (convention typographique chinoise)<u>
Listes et données groupées4
Liens, boutons et interactions7
- Naviguer vers une autre page, mais aussi télécharger, envoyer un mail, ancrer<a>
- Déclencher une action, et pourquoi ce n'est jamais un <a><button>
- Afficher ou masquer du contenu, sans une ligne de JavaScript<details> <summary>
- Ouvrir une fenêtre modale, avec un piège de focus intégré<dialog>
- Montrer l'avancement d'une tâche : téléchargement, formulaire, quiz<progress>
- Afficher une valeur dans une échelle connue : score, jauge, quota<meter>
- Afficher le résultat d'un calcul en temps réel<output>
Formulaires7
- Regrouper des champs pour envoyer des données : inscription, recherche, paiement<form>
- Créer un champ de saisie, et il en existe 20 types différents<input>
- Dire à l'utilisateur ce que tu attends dans un champ, et le rendre cliquable<label>
- Grouper des champs qui vont ensemble : adresse, paiement, préférences<fieldset> <legend>
- Proposer un choix dans une liste fermée<select> <option> <optgroup>
- Permettre un texte long : commentaire, message, bio<textarea>
- Suggérer des options pendant la saisie, quand les lecteurs d'écran veulent bien<datalist>
Média9
- Afficher une image, et pourquoi un mauvais alt est pire que rien<img>
- Servir la bonne image selon l'écran : responsive, formats, art direction<picture> <source>
- Intégrer une vidéo, avec sous-titres, descriptions, et sans autoplay<video> <source> <track>
- Intégrer de l'audio : podcast, musique, et les pièges d'accessibilité<audio> <source> <track>
- Embarquer du contenu externe : vidéo YouTube, carte, widget<iframe>
- Embarquer une ressource externe générique : PDF, Flash (historique), applet<object>
- Embarquer du contenu externe sans aucun repli, et pourquoi c'est rarement une bonne idée<embed>
- Dessiner au pixel : le seul élément que les lecteurs d'écran ne peuvent pas lire<canvas>
- Découper une image en zones cliquables, la technique que SVG a rendue obsolète<map> <area>
Tableaux6
- Présenter des données en lignes et colonnes, pas pour la mise en page<table>
- Donner un titre au tableau que les lecteurs d'écran annoncent<caption>
- Définir les en-têtes, et l'attribut scope que presque personne n'utilise<thead> <th>
- Remplir le corps du tableau avec des données<tbody> <tr> <td>
- Ajouter un pied de tableau : totaux, moyennes, résumés<tfoot>
- Styliser des colonnes entières sans répéter le CSS dans chaque cellule<colgroup> <col>
SVG, Graphiques et illustrations8
- Intégrer un graphique vectoriel accessible directement dans le HTML<svg>
- Dessiner des formes : cercles, rectangles, lignes<circle> <rect> <line> <ellipse> <polygon>
- Dessiner un tracé libre ou complexe<path>
- Grouper des éléments pour les styliser ou les identifier ensemble<g>
- Ajouter du texte dans un graphique<text> <tspan>
- Créer un lien cliquable dans un SVG<a>
- Réutiliser un symbole sans le dupliquer<use> <defs> <symbol>
- Donner un titre et une description accessibles au SVG<title> <desc>
MathML, Formules mathématiques8
- Intégrer une formule mathématique dans le HTML<math>
- Écrire des variables, nombres et opérateurs<mi> <mn> <mo>
- Écrire une fraction<mfrac>
- Écrire un exposant ou un indice mathématique<msup> <msub>
- Écrire une racine carrée ou n-ième<msqrt> <mroot>
- Grouper des sous-expressions dans une formule<mrow>
- Ajouter du texte dans une formule<mtext>
- Créer une matrice ou un système d'équations<mtable> <mtr> <mtd>
Pourquoi cette approche
La question "quelle balise utiliser ?" est la question que personne ne pose
: <div> est toujours là pour combler le vide. Mais chaque <div>
posée à la place d'un élément sémantique
coûte en accessibilité, en performance,
en SEO et en GEO.
La sémantique n'est pas un luxe. C'est le socle sur lequel reposent les lecteurs d'écran, les moteurs de recherche et les LLM qui choisissent leurs sources.
Ces balises existent pour une raison. Cette page t'aide à trouver la bonne.
Au moment où j'écris ces lignes, <selectedcontent>, <fencedframe> et
<geolocation> sont encore expérimentales et n'apparaissent pas dans la
mind map. Le compteur augmentera quand elles atteindront
Baseline.
Télécharger la mind map
Tu veux l'afficher dans ton bureau, l'imprimer, ou la partager à ton équipe ? Télécharge la version complète en poster.
