Éléments HTML

Référence des éléments HTML avec leur catégorie, attributs et exemples d'utilisation

Référence des éléments HTML organisés par catégorie. Chaque tableau présente l'élément, son usage sémantique et des conseils pour choisir le bon élément selon le contexte.

Structure du document

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<html> Racine du document HTML Toujours présent, une seule fois. Ajouter lang="fr" pour le français. document
<head> Métadonnées du document Contient title, meta, link, style, script. Aucun contenu visible. —
<body> Contenu visible du document Tout ce qui s'affiche à l'écran. Un seul par document. generic

Métadonnées

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<title> Titre du document affiché dans l'onglet Obligatoire. Doit être unique et descriptif pour le SEO. —
<meta charset> Encodage des caractères <meta charset="utf-8"> en première ligne du head. —
<meta name="viewport"> Configuration de l'affichage mobile <meta name="viewport" content="width=device-width, initial-scale=1"> pour le responsive. —
<meta name="description"> Description pour les moteurs de recherche Résumé de 150-160 caractères affiché dans les résultats Google. —
<meta name="robots"> Instructions pour les robots noindex pour exclure une page des résultats de recherche. —
<link rel="stylesheet"> Lien vers une feuille de style externe À privilégier par rapport aux styles intégrés pour faciliter la maintenance. —
<link rel="icon"> Favicon du site Formats : .ico, .svg, .png. Plusieurs tailles recommandées. —
<link rel="preload"> Préchargement de ressources critiques Polices, images principales, scripts critiques. Améliore le LCP. —
<link rel="canonical"> URL canonique de la page Évite le contenu dupliqué quand plusieurs URLs mènent au même contenu. —
<style> Styles CSS intégrés au document Utile pour le CSS critique. Préférer les fichiers externes pour le reste. —
<script> Code JavaScript Ajouter defer pour charger sans bloquer le rendu. type="module" pour les modules ES. —
<noscript> Contenu alternatif si JavaScript est désactivé Message d'avertissement ou version simplifiée de la fonctionnalité. —
<base> URL de base pour les liens relatifs Rarement utilisé. Peut provoquer des comportements imprévus. —

Sections

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<header> En-tête d'une section ou du document Logo, navigation principale, titre de page. Pas seulement en haut de page : chaque <article> peut avoir son header. banner (uniquement si placé directement dans <body>, sinon generic)
<nav> Navigation principale Menu principal, fil d'Ariane, pagination. Pas pour tous les liens : seulement les blocs de navigation importants. navigation
<main> Contenu principal unique Un seul par page. Exclut header, footer, sidebar. Aide les lecteurs d'écran à sauter au contenu. main
<article> Contenu autonome et redistribuable Article de blog, commentaire, widget, carte produit. Test : ce contenu a-t-il un sens seul dans un flux RSS ? article
<section> Section thématique avec titre Chapitres, onglets, groupes de contenu. <section> vs <div> : section a un titre (h2-h6), div est neutre. region (uniquement si possède un aria-label, aria-labelledby ou title, sinon generic)
<aside> Contenu complémentaire Barre latérale, encarts, publicités, liens « voir aussi ». Lié au contenu principal mais pas essentiel. complementary (uniquement si placé directement dans <body>, sinon generic)
<footer> Pied d'une section ou du document Copyright, liens légaux, auteur, date. Chaque article/section peut avoir son propre footer. contentinfo (uniquement si placé directement dans <body>, sinon generic)
<address> Coordonnées de l'auteur Email, liens sociaux, adresse physique de l'auteur. Pas pour n'importe quelle adresse postale. group
<hgroup> Groupe titre + sous-titre Titre principal avec slogan ou sous-titre. Garde le plan du document propre. group

Titres

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<h1> Titre principal de la page Un seul par page. Décrit le sujet principal. heading (niveau 1)
<h2> Sections principales Grandes divisions du contenu. heading (niveau 2)
<h3> Sous-sections Divisions au sein d'un h2. heading (niveau 3)
<h4> Sous-sous-sections Rarement nécessaire. Si on descend aussi bas, revoir la structure. heading (niveau 4)
<h5>, <h6> Niveaux profonds Très rarement utilisés. Indiquent souvent une structure trop complexe. heading (niveau 5-6)

Contenu textuel

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<p> Paragraphe de texte Bloc de texte courant. <p> vs <div> : p pour du texte, div pour regrouper des éléments. paragraph
<div> Conteneur générique sans sémantique Regroupement pour le style ou le JavaScript. En dernier recours : préférer un élément sémantique si possible. generic
<hr> Rupture thématique Changement de sujet au sein d'une section. Pas pour la décoration : utiliser CSS pour les lignes purement visuelles. separator
<pre> Texte préformaté Code, art ASCII, poésie avec mise en forme. Préserve espaces et retours à la ligne. generic
<blockquote> Citation longue en bloc Citation d'une autre source. Ajouter cite="URL" pour la source. <blockquote> vs <q> : blockquote pour les citations en bloc, q pour les citations courtes dans le texte. blockquote
<figure> Contenu autonome avec légende optionnelle Images, diagrammes, code, citations. Peut être déplacé sans affecter le flux principal. figure
<figcaption> Légende d'une figure Description de l'image/diagramme. Premier ou dernier enfant de figure. caption
<ul> Liste non ordonnée Éléments sans ordre particulier. Menus, tags, options. list
<ol> Liste ordonnée Étapes, classements, instructions. L'ordre a une signification. list
<li> Élément de liste Enfant direct de ul, ol ou menu. listitem
<dl> Liste de définitions Glossaires, métadonnées clé-valeur, FAQ. list
<dt> Terme à définir Le mot ou concept dans une dl. term
<dd> Définition du terme Explication qui suit le dt. Plusieurs dd possibles par dt. definition

Sémantique inline

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<a> Lien hypertexte Navigation, téléchargement (download), email (mailto:), téléphone (tel:). <a> vs <button> : a pour naviguer, button pour une action. link (uniquement si possède un attribut href, sinon generic)
<span> Conteneur en ligne sans sémantique Style ou JavaScript sur une portion de texte. En dernier recours : préférer strong, em, mark, etc. generic
<strong> Importance forte Avertissements, mots-clés critiques. <strong> vs <b> : strong = importance, b = attirer l'attention visuellement sans importance. strong
<em> Emphase, accent tonique Changer le sens de la phrase. « C'est ton chat ? » <em> vs <i> : em = emphase, i = voix différente (terme technique, pensée). emphasis
<b> Attirer l'attention sans importance Mots-clés dans un résumé, noms de produits. Pas de poids sémantique. generic
<i> Voix alternative ou terme spécial Termes techniques, mots étrangers, pensées. Parfois utilisé pour les icônes (span préférable). generic
<u> Annotation non textuelle Erreurs d'orthographe, noms propres chinois. Éviter pour le style : confusion avec les liens. generic
<s> Contenu obsolète ou inexact Prix barré, information périmée. <s> vs <del> : s = devenu inexact, del = supprimé d'un document. deletion
<mark> Texte surligné, pertinent dans le contexte Résultats de recherche, passages importants référencés ailleurs. mark
<small> Texte secondaire Mentions légales, copyright, avertissements. Ne pas utiliser juste pour réduire la taille du texte. generic
<sub> Indice Formules chimiques (H₂O), notes de bas de page. subscript
<sup> Exposant Puissances (x²), ordinaux (1ᵉʳ), notes de référence. superscript
<code> Fragment de code Variables, fonctions, commandes. Souvent dans un <pre> pour les blocs. code
<kbd> Entrée clavier Raccourcis : Ctrl+C. generic
<samp> Sortie de programme Résultat affiché par un script ou terminal. generic
<var> Variable mathématique ou de programmation Dans les formules : x = y + 2. generic
<abbr> Abréviation ou acronyme <abbr title="HyperText Markup Language">HTML</abbr>. Le title donne la forme complète. generic
<cite> Titre d'une œuvre Livres, films, articles, chansons. Pas pour l'auteur : seulement le titre de l'œuvre. generic
<q> Citation inline courte Le navigateur ajoute les guillemets. Pour les citations longues, utiliser blockquote. generic
<dfn> Terme en cours de définition Marque la première occurrence d'un terme, généralement suivie de sa définition. term
<time> Date ou heure <time datetime="2024-01-15">15 janvier 2024</time>. Format machine dans datetime. time
<data> Donnée avec valeur lisible par machine <data value="398">Téléphone XYZ</data>. Associe un texte affiché à une valeur exploitable par un script. generic
<br> Retour à la ligne Poésie, adresses postales. Pas pour créer de l'espace : utiliser les marges CSS. —
<wbr> Point de césure possible URLs longues, mots composés. Le navigateur peut couper la ligne ici si nécessaire. —
<bdi> Isolation bidirectionnelle Contenu utilisateur dans une langue potentiellement droite-à-gauche. Isole le texte du contexte environnant. generic
<bdo> Forcer la direction du texte <bdo dir="rtl">texte</bdo> pour forcer droite-à-gauche. generic
<ruby> Annotation ruby (langues asiatiques) Prononciation affichée au-dessus des caractères japonais ou chinois. generic
<rt> Texte de l'annotation ruby La prononciation dans un élément ruby. generic
<rp> Parenthèses de repli pour ruby Affiché uniquement si le navigateur ne supporte pas ruby. —

Édition de document

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<ins> Texte inséré/ajouté Révisions, journaux de modifications. Attributs cite et datetime pour la source et la date. insertion
<del> Texte supprimé Révisions de document. <del> vs <s> : del = supprimé du document, s = obsolète/inexact. deletion

Images et médias

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<img> Image Toujours avec alt. alt="" si purement décoratif. Ajouter width et height pour éviter les sauts de mise en page. img (ou presentation si alt="")
<picture> Image responsive avec sources multiples Formats modernes (WebP, AVIF) avec repli, ou images différentes selon la taille d'écran. —
<source> Source alternative pour picture/video/audio Plusieurs formats ou résolutions. Le navigateur choisit la première compatible. —
<video> Contenu vidéo Attributs : controls, autoplay, muted, loop, poster. Fournir plusieurs formats. generic
<audio> Contenu audio Podcasts, musique, effets sonores. Fournir controls pour l'accessibilité. generic
<track> Piste de texte pour video/audio Sous-titres (kind="subtitles"), légendes (captions), descriptions (descriptions). —
<map> Carte cliquable pour une image Zones cliquables sur une image. Associée via usemap sur l'img. —
<area> Zone cliquable dans une map Forme (shape), coordonnées (coords), lien (href). link

<img srcset> vs <picture> : quel choix ?

Les deux approches permettent de servir des images adaptées, mais pour des cas d'usage différents.

Critère <img> avec srcset <picture> avec <source>
Cas d'usage Même image, différentes résolutions Images différentes selon le contexte (art direction) ou formats multiples
Le navigateur décide Oui — choisit la meilleure résolution selon la densité d'écran et la taille du viewport Partiellement — suit les conditions media ou type définies par le développeur
Formats modernes Non — un seul format par balise Oui — WebP, AVIF avec repli JPEG/PNG
Art direction Non — même image recadrée Oui — images complètement différentes selon le viewport
Complexité Simple Plus verbeux

Utilisez <img> avec srcset quand :

  • Vous avez la même image en plusieurs tailles (1x, 2x, 3x ou différentes largeurs)
  • Vous voulez laisser le navigateur optimiser le téléchargement selon la densité d'écran
  • L'image ne change pas de cadrage selon la taille d'écran
<img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Description de l'image"
/>

Utilisez <picture> avec <source> quand :

  • Vous voulez servir des formats modernes (WebP, AVIF) avec repli pour les anciens navigateurs
  • Vous avez besoin d'art direction : recadrage différent, orientation différente, ou image complètement différente selon la taille d'écran
  • Le contenu visuel change réellement entre mobile et desktop (ex. : version portrait vs paysage)
<!-- Formats modernes avec repli -->
<picture>
    <source srcset="photo.avif" type="image/avif" />
    <source srcset="photo.webp" type="image/webp" />
    <img src="photo.jpg" alt="Description" />
</picture>

<!-- Art direction : images différentes selon le viewport -->
<picture>
    <source media="(max-width: 600px)" srcset="photo-mobile.jpg" />
    <source media="(min-width: 601px)" srcset="photo-desktop.jpg" />
    <img src="photo-desktop.jpg" alt="Description" />
</picture>

Règle simple : si vous servez la même image à différentes résolutions, srcset suffit. Si vous changez le contenu visuel ou le format, utilisez <picture>.

Contenu embarqué

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<iframe> Document externe imbriqué Vidéos YouTube, cartes Google Maps, composants tiers. Ajouter title pour l'accessibilité et loading="lazy" pour la performance. generic
<embed> Contenu externe (plugins) Historiquement pour Flash. Préférer object ou les solutions natives du navigateur. generic
<object> Ressource externe avec contenu de repli PDF avec alternative textuelle. Affiche le contenu de repli si non supporté. generic
<svg> Graphiques vectoriels Icônes, logos, illustrations. Redimensionnable sans perte de qualité. Peut être intégré directement dans le HTML. graphics-document
<math> Formules mathématiques (MathML) Équations complexes. Le support varie selon les navigateurs. math
<canvas> Zone de dessin programmable Graphiques dynamiques, jeux, visualisations de données. Nécessite JavaScript. generic

Tableaux

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<table> Données tabulaires Données à deux dimensions. Jamais pour la mise en page. table
<caption> Titre du tableau Description du contenu. Premier enfant de table. Améliore l'accessibilité. caption
<thead> En-tête du tableau Contient les lignes d'en-tête (th). rowgroup
<tbody> Corps du tableau Données principales. Plusieurs tbody possibles pour grouper. rowgroup
<tfoot> Pied du tableau Totaux, résumés. Peut être placé avant tbody dans le code, mais s'affiche toujours en bas. rowgroup
<tr> Ligne de tableau Contient th ou td. row
<th> Cellule d'en-tête Titres de colonnes ou de lignes. Ajouter scope="col" ou scope="row". columnheader ou rowheader
<td> Cellule de données Données du tableau. colspan/rowspan pour fusionner. cell
<colgroup> Groupe de colonnes Permet d'appliquer un style à plusieurs colonnes à la fois. —
<col> Colonne dans un colgroup Cible une colonne spécifique pour lui appliquer un style. —

Formulaires

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<form> Formulaire interactif Contient les contrôles. action pour l'URL, method pour GET/POST. form (uniquement si possède un aria-label, aria-labelledby ou name, sinon generic)
<fieldset> Groupe de contrôles liés Regroupe des champs thématiquement (adresse, paiement). group
<legend> Titre d'un fieldset Description du groupe. Premier enfant de fieldset. —
<label> Étiquette d'un contrôle Obligatoire pour l'accessibilité. Lier avec for="id" ou en englobant le contrôle. —
<output> Résultat d'un calcul Affiche le résultat d'un calcul effectué par l'utilisateur (calculatrice, total de panier). status
<progress> Barre de progression Téléchargement, avancement d'une tâche. Attributs value et max pour indiquer l'état. progressbar
<meter> Mesure dans une plage connue Espace disque, note, niveau. <meter> vs <progress> : meter = valeur statique, progress = tâche en cours. meter
<datalist> Liste de suggestions pour un champ Autocomplétion. Associé à un input via list="id". L'utilisateur peut aussi saisir une valeur libre. listbox
<optgroup> Groupe d'options dans un select Organise les options par catégorie. group

Champs de formulaire

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<input type="text"> Texte court sur une ligne Nom, ville, recherche générique. Type par défaut. textbox
<input type="password"> Mot de passe masqué Champs sensibles. Les caractères sont cachés. textbox
<input type="email"> Adresse email Validation automatique du format. Clavier adapté sur mobile. textbox
<input type="url"> URL complète Validation du format. Doit inclure le protocole (https://). textbox
<input type="tel"> Numéro de téléphone Clavier numérique sur mobile. Pas de validation de format (varie par pays). textbox
<input type="number"> Valeur numérique Quantités, âge. Attributs min, max, step. Pas pour les numéros de téléphone ou cartes. spinbutton
<input type="search"> Champ de recherche Similaire à text, mais avec des styles natifs (bouton pour effacer sur certains navigateurs). searchbox
<input type="date"> Sélecteur de date Date sans heure. Affiche un calendrier natif. textbox
<input type="time"> Sélecteur d'heure Heure sans date. Format selon les paramètres locaux. textbox
<input type="datetime-local"> Date et heure combinées Rendez-vous, événements. Sans fuseau horaire. textbox
<input type="month"> Mois et année Expiration de carte, période. textbox
<input type="week"> Semaine de l'année Planification hebdomadaire. textbox
<input type="checkbox"> Case à cocher Options multiples, acceptation de conditions. <input type="checkbox"> vs <input type="radio"> : checkbox = plusieurs choix, radio = un seul. checkbox
<input type="radio"> Bouton radio Choix exclusif dans un groupe. Même name pour grouper. radio
<input type="file"> Téléversement de fichier Attribut accept pour filtrer les types de fichiers, multiple pour en sélectionner plusieurs. button
<input type="color"> Sélecteur de couleur Choix de thème, personnalisation. Renvoie une valeur hexadécimale. button
<input type="range"> Curseur coulissant Volume, filtres, valeurs approximatives. Attributs min, max, step. slider
<input type="hidden"> Valeur cachée Jetons CSRF, identifiants. Invisible mais envoyé avec le formulaire. —
<input type="submit"> Bouton de soumission Envoie le formulaire. Préférer <button type="submit"> qui permet d'inclure du HTML (icônes, etc.). button
<input type="reset"> Bouton de réinitialisation Remet tous les champs à leur valeur initiale. Rarement utile et souvent source de frustration pour l'utilisateur. button
<input type="button"> Bouton sans action par défaut Pour déclencher du JavaScript. Préférer <button type="button"> qui permet du contenu HTML. button
<input type="image"> Image cliquable de soumission Soumet le formulaire avec les coordonnées du clic. Rarement utilisé. button
<textarea> Zone de texte multiligne Commentaires, messages, descriptions. Attributs rows, cols. textbox
<select> Liste déroulante Choix parmi des options prédéfinies. multiple pour sélection multiple. combobox ou listbox
<option> Option dans un select ou datalist value pour la valeur envoyée, contenu pour l'affichage. option
<button type="submit"> Bouton de soumission Soumet le formulaire. Type par défaut dans un form. Peut contenir du HTML comme des icônes. button
<button type="reset"> Bouton de réinitialisation Remet le formulaire à l'état initial. button
<button type="button"> Bouton sans action par défaut Pour déclencher du JavaScript. <button> vs <a> : button pour une action, a pour naviguer. button

Éléments interactifs

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<details> Contenu dépliable FAQ, informations complémentaires. Fonctionne sans JavaScript. group
<summary> Résumé/titre d'un details Texte visible quand fermé. Premier enfant de details. button
<dialog> Boîte de dialogue modale Confirmations, formulaires en fenêtre modale. Méthodes showModal() et close(). Gère automatiquement le focus. dialog

Scripting et templates

Élément Usage sémantique Quand l'utiliser Rôle ARIA
<template> Fragment HTML réutilisable Contenu cloné par JavaScript. Invisible tant qu'il n'est pas activé par script. —
<slot> Point d'insertion dans le Shadow DOM Utilisé avec les Web Components pour injecter du contenu personnalisé. —

Éléments obsolètes à éviter

Élément Raison Alternative
<center> Déprécié CSS text-align: center ou flexbox/grid
<font> Déprécié CSS pour les styles typographiques
<marquee> Déprécié, problèmes d'accessibilité Animations CSS si vraiment nécessaire
<blink> Déprécié, problèmes d'accessibilité À éviter. Animations CSS si vraiment nécessaire
<frame>, <frameset> Déprécié <iframe> si nécessaire
<acronym> Déprécié <abbr>
<big> Déprécié CSS font-size
<tt> Déprécié <code>, <kbd>, <samp> selon le contexte