Référence des éléments HTML5 - Apprendre le HTML

HTML5 est un ensemble de technologies permettant de créer des sites web et des applications plus variés et plus puissants, qui prennent en charge le multimédia, interagissent avec les interfaces logicielles, structurent les documents, etc.

Cette page constitue une référence rapide aux éléments qu'HTML5 a ajoutés (ou officiellement standardisés). Chaque entrée renvoie vers un chapitre dédié présentant les attributs, la compatibilité des navigateurs et des exemples exécutables.

Pourquoi HTML5 a introduit des éléments sémantiques

Avant HTML5, la structure d'une page était construite presque entièrement à partir de conteneurs génériques <div> et <span>, distingués uniquement par des noms de class ou d'id qui avaient du sens pour l'auteur mais rien pour la machine. HTML5 a introduit des éléments sémantiques — des balises dont le nom décrit le sens du contenu qu'elles englobent (<header>, <nav>, <article>, <footer>, …) plutôt que sa simple apparence. Cela est important pour trois raisons concrètes :

Accessibilité. Les lecteurs d'écran et autres technologies d'assistance exposent des points de repère tels que « principal », « navigation » et « complémentaire » afin que les utilisateurs puissent accéder directement à la partie souhaitée. Un <nav> est annoncé comme navigation ; un <div class="nav"> ne l'est pas.
SEO et lisibilité par les machines. Les moteurs de recherche et autres robots d'exploration utilisent la structure pour comprendre le sujet d'une page et identifier quelle partie constitue le contenu principal, au lieu de le deviner à partir des noms de classes.
Maintenabilité. Le balisage sémantique se lit comme un plan de la page, ce qui permet au prochain développeur (ou à vous-même dans le futur) de comprendre la mise en page sans déchiffrer les hooks CSS.

Pour une présentation plus complète de la structuration sémantique d'une page, consultez Éléments sémantiques en HTML5.

Remarque : Quelques éléments listés ci-dessous — tels que <embed> et <wbr> — existaient dans les navigateurs bien avant HTML5 et ont simplement été standardisés (formellement spécifiés) dans cette version, plutôt qu'étant véritablement nouveaux.

Nouveaux éléments structurels/sémantiques

Éléments	Description
`<article>`	Définit un contenu indépendant et autonome.
`<aside>`	Définit une section avec des informations supplémentaires liées au contenu environnant l'élément aside.
`<details>`	Contient des détails supplémentaires que l'utilisateur peut ouvrir et consulter.
`<dialog>`	Spécifie une boîte de dialogue ou une fenêtre.
`<figcaption>`	Ajoute une légende ou une explication au contenu de la balise `<figure>`.
`<figure>`	Spécifie un contenu autonome.
`<footer>`	Définit le pied de page d'une page web ou d'une section.
`<header>`	Définit l'en-tête d'une page ou d'une section.
`<main>`	Spécifie le contenu principal d'un document.
`<nav>`	Définit un bloc de liens de navigation, soit dans le document actuel, soit vers d'autres documents.
`<section>`	Crée des sections autonomes au sein d'une page web contenant un contenu logiquement connecté.
`<summary>`	Définit l'en-tête visible de l'élément `<details>`.

Éléments typographiques et d'internationalisation (i18n)

Ces éléments décrivent la signification au niveau du texte, les annotations et la gestion des scripts à direction mixte ou des langues d'Asie orientale.

Éléments	Description
`<bdi>`	Isole le texte bidirectionnel (lorsqu'une langue avec une directionnalité de droite à gauche, telle que l'arabe ou l'hébreu, est utilisée avec des langues de gauche à droite).
`<data>`	Associe le contenu visible à une `value` lisible par machine (ajouté dans HTML 5.1).
`<mark>`	Met en évidence une partie du texte qui présente une pertinence.
`<rp>`	Définit un texte alternatif affiché dans les navigateurs qui ne prennent pas en charge la balise `<ruby>`.
`<rt>`	Ajoute le texte de prononciation/annotation affiché au-dessus (ou à côté) du texte de base dans un élément `<ruby>`.
`<ruby>`	Définit une annotation ruby (furigana) — des guides phonétiques utilisés avec le japonais et d'autres langues d'Asie orientale.
`<time>`	Définit une heure lisible par l'humain sur une horloge de 24 heures ou une date précise dans le calendrier grégorien.
`<wbr>`	Marque une position où le navigateur peut ajouter un saut de ligne si nécessaire (une « opportunité de coupure de mot »).

Nouveaux éléments de formulaire

Éléments	Description
`<datalist>`	Crée une liste d'options de saisie prédéfinies par la balise `<input>`.
`<output>`	Définit un emplacement pour représenter le résultat d'un calcul effectué par un script ou de l'interaction de l'utilisateur avec un élément de formulaire (balise `<form>`).

Nouveaux éléments multimédia et graphiques

Éléments	Description
`<audio>`	Intègre du contenu audio dans un document HTML.
`<canvas>`	Définit une zone sur la page web où l'on peut dessiner des objets, des images, des animations et des compositions photo via des scripts.
`<embed>`	Sert de conteneur pour des applications externes et du contenu interactif (standardisé dans HTML5).
`<picture>`	Fournit plusieurs sources d'images afin que le navigateur puisse choisir la meilleure pour le viewport ou le format.
`<source>`	Définit plusieurs ressources multimédia dans différents formats pour `<audio>`, `<video>` ou `<picture>`.
`<svg>`	Dessine des graphiques vectoriels évolutifs (voir SVG en HTML5).
`<track>`	Spécifie des pistes textuelles (sous-titres, légendes) pour les éléments multimédia.
`<video>`	Intègre une vidéo dans un document HTML.

Autres nouveaux éléments

Éléments	Description
`<meter>`	Définit une mesure scalaire dans une plage connue (par exemple, l'utilisation du disque).
`<progress>`	Affiche la progression de l'achèvement d'une tâche (une barre de progression).
`<template>`	Contient du HTML inerte qui n'est pas rendu au chargement mais peut être cloné et inséré par un script.

Éléments supprimés / obsolètes dans HTML5

Ces éléments faisaient autrefois partie de la spécification mais ont depuis été supprimés. Les navigateurs ne les prennent plus en charge de manière fiable et vous ne devriez pas les utiliser dans du nouveau code.

Éléments	Description
`<keygen>`	Générait une paire de clés publique/privée lors de la soumission du formulaire. Supprimé de la norme — utilisez plutôt l'API Web Crypto.
`<menuitem>`	Définissait une commande dans un menu contextuel. Supprimé de la norme ; jamais largement pris en charge.

Un exemple sémantique rapide

Le fragment ci-dessous montre comment les éléments structurels s'assemblent pour décrire une mise en page typique — notez qu'il se lit comme un plan même sans aucun CSS :

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Why semantic HTML matters</h2>
      <p>Semantic tags describe meaning, not just appearance.</p>
      <figure>
        <img src="diagram.png" alt="Page structure diagram" />
        <figcaption>A semantic page outline.</figcaption>
      </figure>
    </article>

    <aside>
      <h2>Related</h2>
      <p>Links to other posts.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>

Pratique

Lesquels des éléments suivants sont des éléments HTML5 valides ?