Référence de 126 balises HTML
Ce que fait chaque balise, si elle exige une fermeture et quels attributs servent vraiment — une ligne chacune.
Squelette5
Le squelette que possède tout document, à l'ordre et à la place fixes.
<html>L'élément racine qui enveloppe tout le document ; son attribut lang déclare la langue.<head>Contient les informations du document non affichées : titre, méta, styles.<body>Tout ce que le lecteur voit réellement se trouve dans cet élément.<title>Le titre du document affiché dans l'onglet et dans les résultats de recherche.<base>Définit l'URL de base à laquelle se rapportent les liens relatifs.
Sections17
Découpe la page en blocs porteurs de sens ; moteurs et lecteurs d’écran suivent cette structure.
<header>La partie introductive d'une section : titre, logo, navigation.<nav>Un bloc de liens de navigation principaux, pas n'importe quel groupe de liens.<main>Le contenu principal du document : un seul par page, hors en-tête et pied de page.<section>Un regroupement thématique doté d'un titre, pas une boîte générique.<article>Un contenu qui garde son sens isolément : article, publication, commentaire.<aside>Contenu en marge du flux principal : sans lui, le texte se lit toujours.<footer>La partie finale d'une section : copyright, contact, liens connexes.<div>Une boîte sans signification propre : à n'utiliser que si aucun autre élément ne convient.<h1>Le titre de plus haut niveau de la page : en principe un seul par document.<h2>Un titre d'un niveau sous h1, pour découper la page en grandes parties.<h3>Un titre qui subdivise ce qui se trouve sous un h2.<h4>Un titre de quatrième niveau : descendre si bas invite à revoir la structure.<h5>Un titre de cinquième niveau : rarement utile en pratique.<h6>Le sixième et plus petit niveau de titre.<hgroup>Regroupe un titre et le sous-titre qui l'accompagne.<address>Indique les coordonnées de l'article ou du document, pas une adresse postale quelconque.<search>Signale un groupe de contrôles de recherche : un ajout récent à la norme.
Blocs de texte7
Du texte qui coule en bloc : paragraphes, citations, listings de code.
<p>Un paragraphe. Le navigateur le ferme tout seul si la balise fermante manque.<br>Un simple retour à la ligne, pas un moyen d'espacer les paragraphes.<hr>Marque un changement de sujet, ce n'est pas une simple ligne décorative.<pre>Affiche le texte tel quel : espaces et retours à la ligne sont conservés.<blockquote>Une longue citation venue d'ailleurs ; l'URL de la source va dans l'attribut cite.<figure>Une figure ou un bloc de code autonome référencé depuis le texte ; déplaçable sans perte.<figcaption>La légende d'une figure, placée en premier ou en dernier dans figure.
Balisage en ligne30
Balise une partie de ligne sans en commencer une nouvelle.
<a>Un lien vers ailleurs ; sans href, c'est un espace réservé, pas un lien.<span>Une boîte en ligne sans signification, pour styler une partie de texte.<strong>Indique une information importante ; l'affichage en gras n'est qu'un effet.<em>La partie que l'on accentuerait à voix haute ; l'italique n'est que son rendu.<b>Attire l'œil sans marquer d'importance ; pour cela, utilisez strong.<i>Un texte d'un autre registre : mots étrangers, noms scientifiques, pensées.<u>Souligne un texte nécessitant une annotation non textuelle, comme une faute d'orthographe.<s>Barre un contenu devenu inexact ; pour l'historique des modifications, utilisez del.<mark>Surligne ce qui compte pour le lecteur, comme un marqueur.<small>Les mentions en petits caractères : avertissements, lignes de copyright.<sub>Texte en indice, comme le 2 de H₂O.<sup>Texte en exposant, pour les puissances et les appels de note.<code>Un fragment de code, généralement affiché en police à chasse fixe.<kbd>Représente une touche pressée par l'utilisateur, comme Ctrl ou Entrée.<samp>La sortie produite par un programme.<var>Le nom d'une variable dans une formule ou du code.<q>Une courte citation en ligne ; le navigateur ajoute les guillemets.<cite>Désigne le titre d'une œuvre, pas le nom d'une personne.<abbr>Une abréviation ; la forme développée va dans l'attribut title.<time>Une date ou une heure ; l'attribut datetime porte la forme lisible par machine.<data>Associe une valeur lisible par machine à la valeur affichée.<dfn>Marque le terme défini à cet endroit du texte.<bdi>Isole un texte dont le sens d'écriture perturberait la ligne autour.<bdo>Force le sens d'écriture ; l'attribut dir est obligatoire.<ruby>Annotation ruby : la prononciation au-dessus des caractères, avec rt.<rt>Dans ruby, contient la prononciation elle-même.<rp>Parenthèses de repli pour les navigateurs qui ne gèrent pas ruby.<wbr>Indique un endroit où la ligne peut se couper ; utile dans les longues URL.<ins>Contenu ajouté ensuite : utile quand un document garde son historique visible.<del>Contenu supprimé ; s'associe à ins pour montrer l'historique.
Listes7
Listes ordonnées, non ordonnées et listes de définitions.
<ul>Une liste non ordonnée : changer l'ordre ne change rien.<ol>Une liste ordonnée ; start fixe le premier numéro et reversed compte à rebours.<li>Un élément de liste ; il se place dans un ul ou un ol.<dl>Une liste appariant des termes et leurs descriptions.<dt>Dans un dl, c'est le terme décrit.<dd>La description qui suit un dt ; un terme peut en avoir plusieurs.<menu>Une liste de commandes ou d'outils ; se comporte aujourd'hui comme ul.
Tableaux10
Des données en lignes et colonnes, pas un outil de mise en page.
<table>Contient des données en lignes et colonnes ; ce n'est pas un outil de mise en page.<thead>Les lignes d'en-tête du tableau ; elles se répètent à chaque page imprimée.<tbody>Les lignes de corps du tableau ; le navigateur l'ajoute même sans l'écrire.<tfoot>Les lignes de synthèse en bas du tableau, comme les totaux.<tr>Une ligne du tableau, contenant des cellules th ou td.<th>Une cellule d'en-tête ; scope indique si elle décrit une ligne ou une colonne.<td>Une cellule de données ; colspan et rowspan la fusionnent en largeur ou en hauteur.<caption>Le titre du tableau entier, placé en premier enfant.<colgroup>Traite plusieurs colonnes en groupe, pratique pour styler par colonne.<col>Dans colgroup, désigne une colonne, ou autant que l'indique span.
Formulaires14
Des contrôles qui reçoivent une valeur et l’envoient.
<form>Regroupe des saisies à envoyer ; action indique où et method comment.<input>Un champ de saisie ; l'attribut type en fait du texte, un nombre, une date, une couleur ou un fichier.<textarea>Une zone de texte multiligne ; le texte par défaut se place entre les balises.<button>Un bouton ; dans un formulaire, sans type il devient bouton d'envoi.<select>Une liste déroulante pour choisir une valeur ; avec multiple, on en choisit plusieurs.<option>Un choix au sein d'un select.<optgroup>Regroupe des options sous un intitulé.<label>Une étiquette de champ ; reliée par for, cliquer le texte active le champ.<fieldset>Encadre des champs liés ; disabled les désactive tous d'un coup.<legend>Le titre d'un fieldset, placé en premier enfant.<datalist>Des suggestions pour un champ ; l'utilisateur peut toujours saisir autre chose.<output>Contient le résultat d'un calcul ; for nomme les champs d'origine.<progress>Une barre indiquant l'avancement d'une tâche.<meter>Affiche une valeur dans une plage connue ; pas pour l'avancement.
Médias10
Images, audio, vidéo et surfaces de dessin.
<img>Une image ; alt doit porter ce que l'image transmet.<picture>Laisse le navigateur choisir une autre image selon l'écran ou le format.<source>Un fichier candidat dans picture, video ou audio.<video>Lit une vidéo ; autoplay ne fonctionne en général qu'avec muted.<audio>Lit du son ; sans controls, rien n'apparaît à l'écran.<track>Ajoute sous-titres ou descriptions, en pointant un fichier WebVTT.<canvas>Une surface vierge dessinée par script ; le tracé n'est pas du texte.<svg>Dessine du vectoriel dans le document ; net à toutes les tailles.<map>Superpose des zones cliquables sur une image, avec area.<area>Une zone cliquable d'un map, définie par une forme et des coordonnées.
Intégration4
Place un autre document ou une ressource dans celui-ci.
<iframe>Intègre un autre document comme une fenêtre ; title en indique le contenu.<embed>Intègre du contenu de plugin externe ; rarement utilisé aujourd'hui.<object>Intègre une ressource externe, avec un contenu de repli à l'intérieur.<portal>Un élément expérimental pour prévisualiser une autre page et y naviguer.
Script et style5
Ajoute comportement et apparence au document.
<script>Charge ou contient du JavaScript ; defer l'exécute après l'analyse du document.<noscript>Contenu affiché seulement si le script est désactivé.<style>Du CSS écrit directement dans le document, en principe dans head.<template>Un fragment non rendu, cloné plus tard par script.<slot>Réserve dans un composant web une place pour du contenu extérieur.
Infos du document2
Informations lues par les navigateurs et les moteurs, pas par les gens.
Dépliables3
Ce qui s’ouvre et se ferme au clic, sans JavaScript.
Obsolètes12
Balises retirées de la norme ; on ne les croise que dans d'anciens documents.
<center>L'ancienne façon de centrer ; aujourd'hui, c'est le rôle du CSS.<font>L'ancienne balise pour fixer police, taille et couleur.<marquee>L'ancienne balise de texte défilant ; l'animation CSS la remplace.<blink>Faisait clignoter le texte ; plus aucun navigateur ne le gère.<big>L'ancienne balise pour agrandir le texte d'un cran.<strike>L'ancienne balise de texte barré ; on utilise s ou del.<tt>L'ancienne balise à chasse fixe ; code la remplace.<frame>Un volet de l'ancienne méthode de découpage de la fenêtre.<frameset>L'ancien conteneur disposant les frames à la place de body.<acronym>L'ancienne balise des acronymes ; abbr la remplace.<applet>L'ancienne balise des applets Java ; l'environnement a disparu.<dir>L'ancienne balise de liste de répertoires ; ul l'a remplacée.
Comment lire
- La plupart des balises vont par paire, ouvrante et fermante. Seules celles sans contenu — img, br — restent non fermées.
- Écrire </br> pour un élément vide ne sert à rien : le navigateur l'ignore ou ajoute une ligne vide.
- L'apparence relève du CSS. Une balise dit ce qu'est une chose ; le gras ou l'italique n'en est que la conséquence.
- Choisir la balise qui correspond au sens profite aux moteurs comme aux lecteurs d'écran. Tout envelopper dans des div jette cette information.
Questions fréquentes
Q. Combien y a-t-il de balises HTML ?
Environ 110 subsistent dans la norme vivante, et près de 130 en comptant les obsolètes. Cette référence en liste 126 : celles d'aujourd'hui et celles que l'on croise encore dans d'anciens documents.
Q. Quelles balises ne se ferment pas ?
Celles sans contenu : img, br, hr, input, meta, link et quelques autres. Écrire </img> ne fait rien. La barre à la XHTML dans <br /> est tolérée mais ne change rien en HTML.
Q. Quelle différence entre div et section ?
Un div est une boîte sans signification ; une section est un groupe thématique doté d'un titre. Si un titre aurait sa place, prenez section ; s'il ne s'agit que d'accrocher des styles, div est honnête.
Q. Les noms de balises peuvent-ils être en majuscules ?
HTML ne distingue pas la casse, <DIV> fonctionne donc. L'usage est la minuscule, et dans les contextes XML comme XHTML ou SVG, seule la minuscule est valide.
Q. Que se passe-t-il si j'utilise une balise obsolète ?
La plupart des navigateurs l'affichent encore. Mais la norme l'a retirée : elle peut disparaître à tout moment, et les remplaçants existent déjà — CSS pour center et font, animation CSS pour marquee.