Vous cherchez la signification d’une balise HTML précise ? Ou vous voulez la liste complète pour apprendre ? Pas de panique.
Ce guide est la référence complète de toutes les balises HTML, classée par catégorie pour trouver ce qu’il vous faut en un clin d’œil.
Liste des balises HTML par catégorie
Voici la liste des balises HTML5, organisées par fonction. C’est un aide-mémoire pratique pour trouver rapidement l’élément dont vous avez besoin pour structurer votre page.
Balises de structure de base
Ces trois balises forment le squelette de n’importe quelle page web. Elles sont obligatoires.
| Balise | Description |
|---|---|
<html> |
C’est l’élément racine de toute la page. Tout le reste du code vient se placer à l’intérieur. |
<head> |
Contient les informations « invisibles » pour le visiteur mais lues par les navigateurs. On y met le titre de la page, les liens vers les fichiers CSS ou les scripts. |
<body> |
Cette balise contient tout le contenu visible de la page : textes, images, titres, vidéos, etc. |
Métadonnées du document
Ces balises se placent dans le <head>. Elles donnent des informations sur le document lui-même.
| Balise | Description |
|---|---|
<title> |
Définit le titre de la page, qui est affiché dans l’onglet du navigateur et utilisé par les moteurs de recherche. |
<meta> |
Fournit des métadonnées comme l’encodage des caractères (charset="UTF-8"), la description de la page pour le SEO, ou des mots-clés. |
<link> |
Permet de lier un fichier externe à la page. On l’utilise principalement pour les feuilles de style CSS. |
<style> |
Permet d’écrire du code CSS directement dans le fichier HTML. Utile pour des styles spécifiques à une seule page. |
<base> |
Indique l’URL de base à utiliser pour tous les liens relatifs présents dans la page. |
Sectionnement du contenu
Ces balises sémantiques aident à organiser les différentes parties de votre contenu. Elles donnent du sens à la structure de la page, ce qui est utile pour le SEO et l’accessibilité.
| Balise | Description |
|---|---|
<header> |
Représente l’en-tête d’une page ou d’une section. Contient généralement le logo, le titre principal et le menu de navigation. |
<nav> |
Définit une section de liens de navigation. C’est ici qu’on place le menu principal du site. |
<main> |
Cet élément contient le contenu principal et unique de la page. Il ne doit y en avoir qu’un seul par page. |
<article> |
Utilisé pour un contenu autonome qui pourrait exister seul, comme un article de blog, un message de forum ou un produit. |
<section> |
Regroupe des contenus qui ont un thème commun. C’est un conteneur générique pour organiser les blocs de la page. |
<aside> |
Pour le contenu qui est indirectement lié au contenu principal. Par exemple, une barre latérale (sidebar) avec des liens ou des publicités. |
<footer> |
Représente le pied de page du site ou d’une section. On y met les mentions légales, les liens de contact ou des crédits. |
<h1> à <h6> |
Ces balises définissent six niveaux de titres. <h1> est le plus important (titre principal de la page), <h6> le moins important. |
<address> |
Fournit des informations de contact (adresse, email, téléphone) pour l’auteur de l’article ou du site. |
<hgroup> |
Permet de grouper un titre (ex: <h2>) avec un ou plusieurs paragraphes qui servent de sous-titres ou de slogans. |
<search> |
Indique une partie de la page dédiée à la recherche ou au filtrage de contenu. |
Contenu textuel
Ces balises structurent les blocs de texte comme les paragraphes, les listes ou les citations.
| Balise | Description |
|---|---|
<p> |
La balise la plus courante. Elle définit un paragraphe de texte. |
<ul> |
Crée une liste non ordonnée (liste à puces). Chaque élément de la liste est défini par une balise <li>. |
<ol> |
Crée une liste ordonnée (numérotée). Chaque élément de la liste est aussi défini par une balise <li>. |
<li> |
Représente un élément dans une liste (<ul> ou <ol>). |
<blockquote> |
Utilisée pour une citation longue qui vient d’une autre source. Le navigateur l’affiche généralement avec un retrait. |
<dl>, <dt>, <dd> |
Crée une liste de description. <dl> est le conteneur, <dt> est le terme à définir et <dd> est sa définition. |
<div> |
Un conteneur générique de type « bloc ». Il ne veut rien dire par lui-même mais est très utilisé pour regrouper des éléments et leur appliquer du style CSS. |
<hr> |
Crée une rupture thématique dans le contenu, souvent affichée comme une ligne horizontale. |
<figure> et <figcaption> |
<figure> encadre un contenu autonome (image, diagramme, code) et <figcaption> lui ajoute une légende. |
<pre> |
Affiche du texte préformaté. Les espaces et les sauts de ligne sont conservés, ce qui est utile pour montrer des blocs de code. |
<menu> |
Alternative sémantique à <ul>, souvent utilisée pour des barres d’outils ou des menus interactifs. |
Sémantique du texte en ligne
Ces balises s’appliquent à l’intérieur d’un bloc de texte (comme un paragraphe) pour donner un sens ou un style particulier à un mot ou une phrase.
| Balise | Description |
|---|---|
<a> |
Crée un lien hypertexte. L’attribut href contient l’URL de destination. |
<strong> |
Indique qu’un texte a une forte importance. Les navigateurs l’affichent en gras. |
<em> |
Met un texte en emphase. Il est généralement affiché en italique. |
<span> |
Un conteneur générique en ligne. Comme <div>, il n’a pas de sens mais permet de cibler une partie de texte avec CSS ou JavaScript. |
<br> |
Provoque un saut de ligne. À utiliser avec modération, préférez les paragraphes <p>. |
<code> |
Indique un bout de code informatique. Le texte est affiché avec une police monospace. |
<b> |
Met du texte en gras sans lui donner d’importance sémantique particulière, contrairement à <strong>. |
<i> |
Met du texte en italique pour le différencier (mot étranger, nom de navire…). N’a pas de valeur d’emphase comme <em>. |
<u> |
Souligne un texte. Son utilisation est déconseillée car les utilisateurs peuvent le confondre avec un lien. |
<s> |
Affiche un texte barré pour indiquer qu’il n’est plus correct ou pertinent. |
<sub> et <sup> |
Affichent du texte en indice (<sub>) ou en exposant (<sup>). |
<abbr> |
Marque une abréviation ou un acronyme. L’attribut title peut donner la signification complète. |
<q> |
Utilisée pour une citation courte. Le navigateur ajoute automatiquement les guillemets. |
<time> |
Représente une date ou une heure. L’attribut datetime permet de spécifier la valeur dans un format lisible par la machine. |
<mark> |
Surligne un texte pour le mettre en évidence, comme avec un marqueur. |
<kbd> |
Représente une saisie au clavier de l’utilisateur (ex: Ctrl + C). |
<var> |
Indique le nom d’une variable dans une expression mathématique ou un programme. |
<samp> |
Représente un exemple de sortie d’un programme informatique. |
<small> |
Affiche un texte en plus petit. Utile pour les mentions légales ou les copyrights. |
Modifications de document
| Balise | Description |
|---|---|
<ins> |
Indique un texte qui a été ajouté à un document. Souvent affiché souligné. |
<del> |
Indique un texte qui a été supprimé d’un document. Souvent affiché barré. |
Images et médias
Pour intégrer des images, des vidéos ou de l’audio dans votre page.
| Balise | Description |
|---|---|
<img> |
Insère une image. Les attributs src (source du fichier) et alt (texte alternatif) sont obligatoires. |
<video> |
Permet d’intégrer un lecteur vidéo. On peut spécifier la source avec l’attribut src ou des balises <source>. |
<audio> |
Permet d’intégrer un lecteur audio pour écouter un son ou une musique. |
<track> |
Utilisée à l’intérieur de <video> ou <audio> pour ajouter des pistes de texte (sous-titres, chapitres). |
<map> et <area> |
Permettent de créer des zones cliquables sur une image. <map> est le conteneur, <area> définit chaque zone. |
Contenu embarqué
Ces balises permettent d’afficher du contenu qui provient d’une autre source.
| Balise | Description |
|---|---|
<iframe> |
Crée un cadre qui affiche une autre page web à l’intérieur de la page actuelle. Utile pour intégrer des cartes Google Maps ou des vidéos YouTube. |
<embed> |
Conteneur générique pour intégrer du contenu externe (application, plugin). Son utilisation est moins fréquente aujourd’hui. |
<object> |
Permet d’intégrer une ressource externe, comme une image, une vidéo, ou même une autre page web. Plus complexe que <iframe> ou <embed>. |
<picture> et <source> |
<picture> permet de fournir plusieurs sources d’images pour que le navigateur choisisse la plus adaptée (ex: format WebP, image différente sur mobile). |
Contenu tabulaire
Toutes les balises nécessaires pour créer des tableaux de données.
| Balise | Description |
|---|---|
<table> |
L’élément principal qui contient tout le tableau. |
<thead> |
Groupe les lignes de l’en-tête du tableau. |
<tbody> |
Groupe les lignes du corps principal du tableau. |
<tfoot> |
Groupe les lignes du pied de tableau (ex: pour les totaux). |
<tr> |
Définit une ligne (Table Row) dans le tableau. |
<th> |
Définit une cellule d’en-tête (Table Header). Le texte est généralement en gras et centré. |
<td> |
Définit une cellule de données (Table Data) standard. |
<caption> |
Ajoute un titre ou une légende au tableau. |
<colgroup> et <col> |
Permettent de définir des propriétés pour une ou plusieurs colonnes du tableau. |
Formulaires
Pour créer des formulaires interactifs et permettre aux utilisateurs de vous envoyer des informations.
| Balise | Description |
|---|---|
<form> |
Le conteneur principal pour tous les champs d’un formulaire. |
<input> |
L’élément le plus polyvalent. L’attribut type permet de créer des champs de texte, des cases à cocher, des boutons radio, des mots de passe, etc. |
<label> |
Définit une étiquette pour un champ <input>. C’est important pour l’accessibilité. |
<textarea> |
Crée un champ de texte sur plusieurs lignes, pour les messages ou commentaires. |
<button> |
Crée un bouton cliquable. Plus flexible que <input type="button">. |
<select> et <option> |
Crée une liste déroulante. <select> est le conteneur et chaque <option> est un choix dans la liste. |
<fieldset> et <legend> |
<fieldset> permet de regrouper des champs liés dans un formulaire, et <legend> donne un titre à ce groupe. |
<datalist> |
Fournit une liste de suggestions d’autocomplétion pour un champ <input>. |
<output> |
Affiche le résultat d’un calcul ou d’une action de l’utilisateur. |
<progress> |
Affiche une barre de progression pour une tâche. |
<meter> |
Représente une jauge, comme l’utilisation d’un espace disque. |
Éléments interactifs
Ces balises créent des widgets que l’utilisateur peut manipuler directement sur la page.
| Balise | Description |
|---|---|
<details> et <summary> |
Crée un accordéon simple (contenu dépliable). <summary> est le titre visible et le reste du contenu dans <details> est caché par défaut. |
<dialog> |
Définit une boîte de dialogue (pop-up) que l’on peut afficher ou cacher avec du JavaScript. |
Scripts et composants
Pour ajouter de l’interactivité avec JavaScript et créer des graphiques.
| Balise | Description |
|---|---|
<script> |
Permet d’intégrer du code JavaScript, soit directement entre les balises, soit en liant un fichier externe avec l’attribut src. |
<noscript> |
Affiche un contenu de secours si JavaScript est désactivé dans le navigateur de l’utilisateur. |
<canvas> |
Crée une zone de dessin sur laquelle on peut générer des graphiques, des animations ou des jeux avec JavaScript. |
<template> |
Contient du code HTML qui est ignoré par le navigateur au chargement. On peut ensuite l’utiliser et le cloner avec JavaScript. |
<slot> |
Utilisée dans les Web Components pour définir un espace réservé où du contenu peut être injecté. |
Qu’est-ce que le langage HTML ?
Maintenant que vous avez la liste complète, prenons un peu de recul. Le HTML est la base de toutes les pages que vous visitez sur internet.
Définition de l’HyperText Markup Language
HTML signifie HyperText Markup Language. Décortiquons ça :
- HyperText : C’est l’idée de pouvoir lier des pages entre elles grâce à des liens (la balise
<a>). C’est ce qui forme la « toile » (le Web). - Markup Language (Langage de balisage) : Ça veut dire que le HTML n’est pas un langage de programmation. Il ne peut pas prendre de décisions ou faire des calculs. Son seul rôle est de décrire et structurer le contenu d’une page à l’aide de balises.
En résumé, HTML dit au navigateur : « Ceci est un titre, ceci est un paragraphe, voici une image, etc. ». Le navigateur lit ce code et affiche la page en conséquence. Pour l’apparence (couleurs, polices, mise en page), on utilise un autre langage : le CSS (Cascading Style Sheets). Et pour l’interactivité (animations, formulaires dynamiques), on utilise le JavaScript.
Un peu d’histoire : de Tim Berners-Lee à HTML5
Le web n’a pas toujours ressemblé à ce qu’on connaît. Son histoire est liée à celle du HTML.
Tout commence en 1989, quand Tim Berners-Lee, un informaticien du CERN, propose un système pour partager des documents facilement entre chercheurs. C’est la naissance du concept de « World Wide Web ». Pour que ça marche, il invente le HTML.
La première version publique du HTML, en 1991, était très simple. Elle comptait moins de 20 balises, principalement pour les titres, les paragraphes et les listes.
Ensuite, le langage a beaucoup évolué :
- HTML 2.0 (1995) : Standardise les fonctionnalités de base, y compris les formulaires.
- HTML 4.01 (1999) : Une version stable et très utilisée pendant des années, qui sépare mieux le contenu (HTML) de la présentation (CSS).
- HTML5 (2014) : C’est la version majeure que nous utilisons aujourd’hui. Elle a introduit de nombreuses balises sémantiques (
<article>,<section>) et des fonctionnalités pour le multimédia (<video>,<audio>) et les graphiques (<canvas>).
La standardisation du HTML est aujourd’hui gérée par le W3C (World Wide Web Consortium), qui s’assure que le web reste une technologie ouverte et accessible à tous.
Bonnes pratiques et balises à éviter
Connaître les balises c’est bien, mais savoir lesquelles ne plus utiliser, c’est mieux. Un code propre est un code qui respecte les standards actuels.
Les balises obsolètes et dépréciées à ne plus jamais utiliser
Avec l’arrivée de CSS pour gérer le design, de nombreuses balises HTML sont devenues inutiles. Elles fonctionnent peut-être encore sur certains navigateurs, mais leur utilisation est une mauvaise pratique. Elles alourdissent le code et posent des problèmes d’accessibilité.
Voici une liste des balises à oublier :
<font>: servait à changer la police, la taille et la couleur du texte. Remplacée par CSS.<center>: pour centrer du contenu. Remplacée par CSS (text-align: center;).<marquee>: faisait défiler du texte. C’est aujourd’hui considéré comme une nuisance visuelle.<strike>: pour barrer du texte. Il faut utiliser<s>ou<del>qui ont un sens sémantique.<frame>et<frameset>: permettaient de diviser une page en plusieurs cadres. Remplacées par les<iframe>et surtout par des mises en page CSS modernes.<big>: agrandissait le texte. Remplacée par CSS.
La règle est simple : le HTML structure le contenu, le CSS gère la mise en forme. Si une balise ne fait que changer l’apparence d’un élément, elle est probablement obsolète.
Quelques conseils pour un code propre
Un bon code HTML est un code facile à lire et à maintenir, pour vous et pour les autres développeurs. Voici deux règles de base.
Premièrement, fermez toujours vos balises. La plupart des balises fonctionnent par paires : une ouvrante (<p>) et une fermante (</p>). Oublier de fermer une balise peut casser toute la mise en page. Certaines balises, dites « orphelines » comme <img> ou <br>, n’ont pas besoin d’être fermées.
Deuxièmement, indentez votre code. L’indentation consiste à décaler les balises imbriquées avec des espaces ou des tabulations. Ça ne change rien à l’affichage, mais ça rend la structure du code instantanément visible et lisible. C’est une habitude essentielle à prendre.
Avec cette liste complète et ces quelques règles, vous avez toutes les clés pour écrire un code HTML propre et sémantique. Le plus important reste de pratiquer. Gardez cette page en favori pour y revenir quand vous avez un doute.
