Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

Référence des éléments HTML

Cette page répertorie tous les éléments HTML, qui sont créés à l'aide de balises.

Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.

Note : Pour plus d'informations sur les bases des éléments et attributs HTML, voir l'article Commencer avec le HTML.

Racine principale

Élément Description
<html> Représente la racine (élément de plus haut niveau) d'un document HTML. Tous les autres éléments doivent être des descendants de cet élément.

Métadonnées du document

Les métadonnées contiennent des informations à propos de la page. Elles comprennent des informations sur les styles, les scripts et les données qui aident des logiciels (moteur de recherche, navigateurs, etc.) à utiliser et à rendre la page. Les métadonnées liées aux styles et aux scripts peuvent être définies dans la page ou renvoyées vers un autre fichier contenant ces informations.

Élément Description
<base> Définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <base> au sein d'un document.
<head> Contient des informations lisibles par machine (métadonnées) sur le document, comme son titre, des scripts et des feuilles de style.
<link> Définit des relations entre le document courant et une ressource externe. Cet élément est principalement utilisé pour lier des feuilles CSS, mais sert aussi à définir des icônes de site (favicon) ou des icônes pour l'écran d'accueil et les applications mobiles, entre autres usages.
<meta> Représente des métadonnées qui ne peuvent pas être exprimées par d'autres éléments méta HTML, comme <base>, <link>, <script>, <style> et <title>.
<style> Contient des informations de style pour un document ou une portion de document. Il contient du CSS appliqué au contenu du document dans lequel cet élément se trouve.
<title> Définit le titre du document affiché dans la barre de titre du navigateurs ou dans l'onglet de la page. Il ne contient que du texte ; toute balise HTML présente à l'intérieur est traitée comme du texte brut.

Racine de sectionnement

Élément Description
<body> Représente le contenu principal d'un document HTML. Il ne peut y avoir qu'un seul élément <body> par document.

Sectionnement du contenu

Les éléments de sectionnement permettent d'organiser le contenu d'un document en parties logiques. Utilisez ces éléments pour construire le plan général de la page, incluant les en-têtes, les pieds de page et les éléments de titre qui identifient les différentes sections.

Élément Description
<address> Indique que le contenu HTML inclus fournit des informations de contact pour une personne, plusieurs personnes ou une organisation.
<article> Représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée indépendamment (par exemple en syndication). Exemples : un message de forum, un article de magazine, une entrée de blog, une fiche produit, un commentaire utilisateur·ice, un widget interactif, etc.
<aside> Représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal. Les apartés sont souvent affichés comme des encadrés ou des boîtes d'information.
<footer> Représente le pied de page de l'élément d'sectionnement ou de la racine de section la plus proche. Un <footer> contient généralement des informations sur l'auteur·ice, des données de droit d'auteur ou des liens vers des documents liés.
<header> Contient du contenu introductif, généralement un groupe d'éléments d'introduction ou d'aides à la navigation. Il peut inclure des éléments de titre, mais aussi un logo, un formulaire de recherche, le nom de l'auteur·ice, etc.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> Représente six niveaux de titres de section. <h1> est le niveau le plus élevé et <h6> le plus bas.
<hgroup> Représente un titre groupé avec du contenu secondaire, comme des sous-titres, un titre alternatif ou un slogan.
<main> Représente le contenu principal du corps d'un document. La zone principale contient le contenu directement lié au sujet central du document ou à la fonctionnalité principale d'une application.
<nav> Représente une section d'une page destinée à fournir des liens de navigation, soit au sein du document courant, soit vers d'autres documents. Exemples courants : menus, tables des matières, index.
<section> Représente une section autonome générique d'un document qui n'a pas d'élément sémantique plus spécifique pour la représenter. Les sections doivent généralement comporter un titre.
<search> Représente une partie contenant un ensemble de contrôles de formulaire ou d'autres contenus liés à la réalisation d'une recherche ou à une opération de filtrage.

Contenu textuel

Utilisez les éléments de contenu textuel HTML pour organiser des blocs ou des sections de contenu placés entre la balise d'ouverture <body> et la balise de fermeture </body>. Importants pour accessibility et SEO, ces éléments identifient la finalité ou la structure de ce contenu.

Élément Description
<blockquote> Indique que le texte inclus est une citation longue. Habituellement, cela se traduit visuellement par une indentation. Une URL de la source peut être fournie via l'attribut cite, et une représentation textuelle de la source peut être donnée avec l'élément <cite>.
<dd> Fournit la description, la définition ou la valeur du terme précédent (<dt>) dans une liste de descriptions (<dl>).
<div> Conteneur générique pour le contenu de flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme via du CSS (par exemple, en appliquant un style directement ou en utilisant un modèle de mise en page tel que flexbox sur son parent).
<dl> Représente une liste de descriptions. Cet élément contient des groupes de termes (spécifiés par <dt>) et des descriptions (fournies par <dd>). On l'utilise souvent pour implémenter un glossaire ou pour afficher des métadonnées sous forme de paires clé/valeur.
<dt> Spécifie un terme dans une liste de définition ou de descriptions et doit être utilisé à l'intérieur d'un élément <dl>. Il est généralement suivi d'un élément <dd> ; toutefois, plusieurs <dt> consécutifs indiquent plusieurs termes définis par le <dd> suivant.
<figcaption> Représente une légende décrivant le reste du contenu de son élément parent <figure>.
<figure> Représente un contenu autonome, éventuellement accompagné d'une légende facultative spécifiée par <figcaption>. La figure, sa légende et son contenu forment une unité référencée ensemble.
<hr> Représente une rupture thématique entre des éléments de niveau paragraphe : par exemple, un changement de scène dans un récit ou un changement de sujet au sein d'une section.
<li> Représente un élément d'une liste. Il doit être contenu dans un élément parent tel que <ol>, <ul> ou <menu>. Dans les listes non ordonnées, les éléments sont généralement affichés avec des puces ; dans les listes ordonnées, ils sont affichés avec un compteur (nombre, lettre, etc.).
<menu> Alternative sémantique à <ul> ; toutefois, les navigateurs et l'arbre d'accessibilité le traitent comme équivalent à <ul>. Il représente une liste non ordonnée d'éléments (chacun représenté par <li>).
<ol> Représente une liste ordonnée d'éléments — généralement rendue sous forme de liste numérotée.
<p> Représente un paragraphe. Visuellement, les paragraphes sont souvent séparés par une ligne blanche et/ou une indentation de la première ligne, mais en HTML un paragraphe peut contenir divers regroupements structurels (images, champs de formulaire, etc.).
<pre> Représente du texte préformaté qui doit être présenté tel qu'il est écrit dans le fichier HTML. Le texte est généralement rendu avec une police à chasse fixe (monospace), et les espaces sont affichés tels qu'ils apparaissent dans le code.
<ul> Représente une liste non ordonnée d'éléments, typiquement rendue sous forme de liste à puces.

Sémantique du texte en ligne

Utilisez les éléments en ligne pour définir la signification, la structure ou la mise en forme d'un mot, d'une ligne ou d'un fragment de texte.

Élément Description
<a> Avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements au sein de la page courante, ou toute autre destination qu'une URL peut adresser.
<abbr> Représente une abréviation ou un acronyme.
<b> Sert à attirer l'attention sur le contenu sans lui conférer une importance particulière. Autrefois appelé élément Boldface, la plupart des navigateurs rendent encore le texte en gras. N'utilisez pas <b> pour la mise en forme : utilisez plutôt la propriété CSS font-weight. Pour indiquer une importance particulière, utilisez <strong>.
<bdi> Demande à l'algorithme bidirectionnel du navigateur de traiter le texte qu'il contient isolément du texte environnant. Utile lorsque l'on insère dynamiquement du texte sans connaître sa direction.
<bdo> Permet de remplacer la direction du texte, afin que le texte à l'intérieur soit rendu dans une direction différente.
<br> Insère un saut de ligne dans le texte. Utile pour écrire un poème ou une adresse où la division en lignes est pertinente.
<cite> Sert à marquer le titre d'une œuvre créative. La référence peut être abrégée conformément aux conventions contextuelles de citation.
<code> Affiche son contenu en indiquant qu'il s'agit d'un court fragment de code. Par défaut, le texte est rendu en police monospace.
<data> Lie un contenu à une version interprétable par machine. Si le contenu concerne une date ou une heure, utilisez l'élément <time>.
<dfn> Utilisé pour indiquer le terme défini dans le contexte d'une phrase définition. L'élément <p> ancestor, la paire <dt>/<dd> ou la section la plus proche contenant <dfn> est considérée comme la définition du terme.
<em> Marque un texte comme devant être prononcé avec emphase. L'élément <em> peut être imbriqué, chaque niveau d'imbrication augmentant le degré d'emphase.
<i> Représente un fragment de texte distinct du texte courant (termes techniques, expressions étrangères, pensées d'un personnage, etc.). Historiquement rendu en italique, d'où le nom <i>.
<kbd> Représente une saisie utilisateur·ice (clavier, saisie vocale ou autre dispositif). Par convention, l'agent utilisateur rend le contenu de <kbd> en police monospace.
<mark> Représente un texte mis en évidence en raison de sa pertinence dans le contexte.
<q> Indique une citation courte en incise. Les navigateurs entourent généralement le texte de guillemets. Pour des citations longues, utilisez <blockquote>.
<rp> Fournit des parenthèses de secours pour les navigateurs qui ne prennent pas en charge les annotations ruby (<ruby>). Un <rp> doit entourer chaque parenthèse ouvrante et fermante qui entoure l'élément <rt>.
<rt> Spécifie le composant de texte d'une annotation ruby, utilisé pour fournir la prononciation, la traduction ou la translittération dans la typographie d'Asie de l'Est. <rt> doit toujours être contenu dans un élément <ruby>.
<ruby> Représente de petites annotations rendues au-dessus, en dessous ou à côté du texte de base, généralement utilisées pour indiquer la prononciation de caractères d'Asie de l'Est.
<s> Rendu avec une ligne traversante (barré). Utilisez <s> pour indiquer du contenu qui n'est plus pertinent ou incorrect. Pour indiquer des modifications de document, préférez <del> et <ins>.
<samp> Contient un exemple de sortie d'un programme informatique. Son contenu est généralement rendu en police monospace.
<small> Représente des commentaires ou du petit texte (mentions légales, droit d'auteur). Par défaut, il réduit la taille de police d'un niveau.
<span> Conteneur en ligne générique pour du contenu phrasé. Il n'a pas de signification sémantique propre ; on l'utilise pour grouper des éléments en vue d'un style ou parce qu'ils partagent des attributs (class, id, lang).
<strong> Indique que le contenu a une importance particulière. Les navigateurs affichent généralement ce contenu en gras.
<sub> Indique du texte en indice (sous la ligne de base), généralement rendu avec une taille de police plus petite.
<sup> Indique du texte en exposant (au-dessus de la ligne de base), généralement rendu avec une taille de police plus petite.
<time> Représente une période temporelle spécifique. Il peut contenir l'attribut datetime pour fournir un format lisible par machine, utile pour le référencement ou des fonctionnalités comme des rappels.
<u> Représente un fragment de texte annoté non textuellement ; il est rendu par défaut avec un soulignement solide, modifiable via CSS.
<var> Représente le nom d'une variable dans une expression mathématique ou un contexte de programmation, généralement rendu en italique.
<wbr> Représente un point où le navigateur peut éventuellement couper la ligne si nécessaire.

Images et médias

HTML prend en charge différents médias tels que les images, l'audio et la vidéo.

Élément Description
<area> Définit une zone cliquable dans une image cartographique. Une image map permet d'associer des zones géométriques d'une image à des liens.
<audio> Permet d'intégrer du contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio, définies via l'attribut src ou par l'élément source : le navigateur choisira la source la plus adaptée. Il peut également être la destination de médias en streaming, en utilisant un MediaStream.
<img> Permet d'insérer une image dans le document.
<map> Utilisé avec des éléments <area> pour définir une image cartographique (zone cliquable).
<track> Élément enfant des médias (audio, video) permettant de spécifier des pistes de texte synchronisées (par exemple pour les sous-titres). Les pistes sont formatées en WebVTT (.vtt).
<video> Intègre dans le document un lecteur multimédia capable de lire des vidéos. Vous pouvez également utiliser <video> pour du contenu audio, mais l'élément <audio> offre souvent une expérience utilisateur plus adaptée.

Contenu embarqué

En plus des médias courants, un document HTML peut embarquer d'autres types de contenu, même si les interactions y sont parfois limitées.

Élément Description
<embed> Intègre du contenu externe à l'endroit spécifié dans le document. Ce contenu provient d'une application externe ou d'une autre source de contenu interactif, comme un module d'extension du navigateur.
<fencedframe> Représente un contexte de navigation imbriqué, similaire à <iframe> mais offrant des fonctionnalités de confidentialité natives supplémentaires.
<iframe> Représente un contexte de navigation imbriqué, intégrant une autre page HTML dans la page courante.
<object> Représente une ressource externe pouvant être traitée comme une image, un contexte de navigation imbriqué ou une ressource prise en charge par un module (plug‑in).
<picture> Contient zéro ou plusieurs éléments <source> et un élément <img> afin de proposer des versions alternatives d'une image selon le dispositif ou le contexte d'affichage.
<source> Spécifie plusieurs ressources médias pour l'élément picture, audio ou video. C'est un élément vide : il n'a pas de contenu et n'a pas de balise de fermeture. Il est couramment utilisé pour proposer le même contenu média dans plusieurs formats afin d'assurer la compatibilité entre navigateurs.

SVG et MathML

Vous pouvez intégrer du contenu SVG et MathML directement dans les documents HTML en utilisant les éléments <svg> et <math>.

Élément Description
<svg> Conteneur définissant un nouveau système de coordonnées et un viewport. Il sert d'élément racine pour les documents SVG, mais peut aussi être utilisé pour intégrer un fragment SVG dans un document SVG ou HTML.
<math> Élément racine du MathML. Toute instance MathML valide doit être enveloppée par cet élément. De plus, il ne faut pas imbriquer un second élément <math> à l'intérieur d'un autre, mais on peut avoir un nombre arbitraire d'autres éléments fils.

Scripts

Pour créer du contenu dynamique et des applications Web, HTML prend en charge l'utilisation de langages de script, principalement JavaScript. Certains éléments facilitent cette utilisation.

Élément Description
<canvas> Conteneur utilisé avec l'API canvas ou l'API WebGL pour dessiner des graphiques et des animations.
<noscript> Définit une section HTML à insérer si un type de script n'est pas pris en charge ou si le script est désactivé dans le navigateur.
<script> Permet d'insérer du code exécutable ou des données ; il est généralement utilisé pour JavaScript. L'élément <script> peut également être employé pour d'autres langages (par exemple le GLSL de WebGL ou JSON).

Indication des modifications

Ces éléments permettent d'indiquer que certaines parties du texte ont été modifiées.

Élément Description
<del> Représente une plage de texte supprimée d'un document. Cela peut être utilisé, par exemple, pour afficher un suivi des modifications (track changes) ou des informations de diff de code source. L'élément <ins> peut être utilisé pour l'effet inverse : indiquer du texte qui a été ajouté au document.
<ins> Représente une plage de texte ajoutée à un document. Vous pouvez utiliser l'élément <del> pour représenter de manière similaire une plage de texte qui a été supprimée du document.

Contenu tabulaire

Les éléments suivants servent à créer et gérer des données tabulaires.

Élément Description
<caption> Définit la légende (ou le titre) d'un tableau.
<col> Définit une ou plusieurs colonnes dans un groupe de colonnes représenté par son élément parent implicite ou explicite <colgroup>. L'élément <col> n'est valide que s'il est enfant d'un <colgroup> qui ne définit pas l'attribut span.
<colgroup> Définit un groupe de colonnes au sein d'un tableau.
<table> Représente des données tabulaires — c'est‑à‑dire des informations présentées sous la forme d'un tableau en deux dimensions composé de lignes et de colonnes de cellules contenant des données.
<tbody> Contient un ensemble de lignes de tableau (éléments <tr>) correspondant au corps principal des données du tableau.
<td> Enfant de <tr>, il définit une cellule de tableau contenant des données.
<tfoot> Contient un ensemble de lignes de tableau (<tr>) correspondant au pied du tableau, généralement un résumé des colonnes (par exemple la somme des valeurs).
<th> Enfant de <tr>, il définit une cellule d'en-tête pour un groupe de cellules. La nature de ce groupe peut être explicitée via les attributs scope et headers.
<thead> Contient un ensemble de lignes de tableau (<tr>) qui forment l'en-tête du tableau, généralement sous la forme d'en-têtes de colonnes (<th>).
<tr> Définit une ligne de cellules dans un tableau. Les cellules de la ligne sont établies avec une combinaison de <td> et <th>.

Formulaires

HTML fournit plusieurs éléments pour créer des formulaires que l'utilisateur·ice peut remplir et soumettre. Pour plus d'informations, consultez le guide des formulaires HTML.

Élément Description
<button> Élément interactif activé par l'utilisateur·ice (souris, clavier, doigt, commande vocale ou autres aides techniques). Lors de son activation, il exécute une action, par exemple soumettre un formulaire ou ouvrir une boîte de dialogue.
<datalist> Contient un ensemble d'éléments <option> représentant les valeurs possibles ou recommandées pour d'autres contrôles.
<fieldset> Sert à regrouper plusieurs contrôles ainsi que leurs étiquettes (<label>) au sein d'un formulaire.
<form> Représente une section de document contenant des contrôles interactifs permettant la saisie et la soumission d'informations.
<input> Permet de créer des contrôles interactifs pour les formulaires web afin de recevoir des données de l'utilisateur·ice ; de nombreux types d'entrée et widgets existent selon l'appareil et l'agent utilisateur. L'élément <input> est l'un des plus puissants et complexes du HTML en raison du grand nombre de combinaisons possibles d'attributs et de types.
<label> Représente une légende pour un élément d'interface utilisateur.
<legend> Représente une légende pour le contenu de son parent <fieldset>.
<meter> Représente une valeur scalaire dans un intervalle connu ou une valeur fractionnaire.
<optgroup> Crée un groupe d'options au sein d'un élément <select>.
<option> Définit un élément contenu dans un <select>, un <optgroup> ou un <datalist>. Ainsi, <option> peut représenter des éléments de menu dans des popups et d'autres listes.
<output> Conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur·ice.
<progress> Affiche une indication de progression d'une tâche, généralement sous la forme d'une barre de progression.
<select> Représente un contrôle fournissant un menu d'options.
<selectedcontent> Affiche le contenu de l'<option> actuellement sélectionné à l'intérieur d'un <select> fermé.
<textarea> Représente un contrôle d'édition de texte multi‑ligne, utile pour permettre à l'utilisateur de saisir une grande quantité de texte libre (commentaire, avis, etc.).

Éléments interactifs

HTML propose un ensemble d'éléments pour créer des composants d'interface utilisateur interactifs.

Élément Description
<details> Crée un widget de révélation dans lequel l'information n'est visible que lorsque le widget est basculé en état « ouvert ». Un résumé ou une étiquette doit être fourni via l'élément <summary>.
<dialog> Représente une boîte de dialogue ou un autre composant interactif (alerte réductible, inspecteur, sous‑fenêtre, etc.).
<summary> Spécifie un résumé, une légende ou un titre pour la zone révélée par un élément details. Cliquer sur <summary> bascule l'état du parent <details> entre ouvert et fermé.

Composants Web

Les composants Web (Web Components) permettent de créer et d'utiliser des éléments personnalisés comme s'il s'agissait d'éléments HTML standards. Ils permettent également de créer des versions personnalisées d'éléments standards.

Élément Description
<slot> Partie de la suite technologique des Web Components ; slot est un espace réservé à l'intérieur d'un composant dans lequel vous pouvez insérer votre propre balisage, permettant de présenter plusieurs arbres DOM ensemble.
<template> Mécanisme pour contenir du HTML qui ne doit pas être rendu immédiatement lors du chargement de la page, mais qui peut être instancié ultérieurement au moment de l'exécution via JavaScript.

Éléments obsolètes et dépréciés

Attention : Ces éléments HTML sont obsolètes et dépréciés : n'utilisez jamais ces éléments dans de nouveaux projets, et remplacez‑les dans les anciens projets dès que possible. Ils sont listés ici uniquement pour complétude.

Élément Description
<acronym> Ancien élément permettant d'indiquer explicitement une séquence de caractères composant un acronyme ou une abréviation.
<big> Rend le texte contenu un niveau de taille de police supérieur à celui du texte environnant. La taille est plafonnée par la taille maximale autorisée par le navigateur.
<center> Centre horizontalement le contenu de bloc ou en ligne dans son conteneur.
<content> Partie obsolète de la suite Web Components — était utilisée dans le Shadow DOM comme point d'insertion ; elle a été remplacée par <slot>. Utilisez slot à la place.
<dir> Ancien conteneur pour un répertoire de fichiers et/ou dossiers. N'utilisez pas cet élément obsolète : utilisez plutôt <ul> pour représenter des listes, y compris des listes de fichiers.
<font> Définissait la taille, la couleur et la police du contenu.
<frame> Définissait une zone particulière dans laquelle un autre document HTML pouvait être affiché. Les frames étaient utilisées au sein d'un <frameset>.
<frameset> Conteneur d'éléments <frame>.
<image> Précurseur ancien et peu supporté de l'élément <img> ; à proscrire.
<marquee> Insérait une zone de texte défilant. Ses attributs contrôlaient le comportement lorsque le texte atteignait les bords de la zone.
<menuitem> Représentait une commande exécutable par l'utilisateur·ice via un menu contextuel ou un menu associé à un bouton.
<nobr> Empêchait le texte de se couper automatiquement sur plusieurs lignes, ce qui pouvait forcer l'utilisateur à faire défiler horizontalement pour voir le texte complet.
<noembed> Méthode obsolète et non standard pour fournir du contenu de secours aux navigateurs qui ne supportent pas <embed> ou le type de contenu intégré souhaité. Dépréciée au profit d'un contenu de repli placé entre les balises d'un élément <object>.
<noframes> Fournissait du contenu à afficher dans les navigateurs qui ne supportent pas ou ont désactivé les frames. Malgré une large prise en charge, certains navigateurs spécialisés ou textuels n'acceptaient pas les frames.
<param> Définissait des paramètres pour un élément <object>.
<plaintext> Rende tout le contenu suivant la balise de début comme du texte brut, sans interpréter le HTML suivant. Il n'y a pas de balise de fermeture.
<rb> Délimite le composant de texte de base d'une annotation ruby ; un <rb> doit entourer chaque segment atomique du texte de base.
<rtc> Accueille des annotations sémantiques de caractères présentées dans une annotation ruby (éléments <rb>). Les éléments <rb> peuvent contenir des annotations de prononciation (<rt>) et des annotations sémantiques (<rtc>).
<shadow> Partie obsolète des Web Components destinée à servir de point d'insertion du Shadow DOM. Elle a été remplacée par <slot>.
<strike> Applique une ligne horizontale (barré) sur le texte.
<tt> Rend le texte en police monospace par défaut de l'agent utilisateur.
<xmp> Rends le texte entre les balises sans interpréter le HTML et en utilisant une police à chasse fixe.

Voir aussi