Couverture de l’article : liste des balises HTML, avec un aperçu du squelette d’une page HTML dans l’éditeur

HTML 15 septembre 2026 17 min de lecture

Liste des balises HTML : 70 balises expliquées en 6 étapes

Vous cherchez une liste balise HTML complète, mais chaque page trouvée s’arrête aux dix mêmes balises ? Ce tutoriel passe en revue plus de 70 balises, du squelette d’une page aux éléments interactifs, en les regroupant par usage plutôt que par ordre alphabétique. Il s’adresse à celles et ceux qui débutent en HTML ou qui veulent enfin comprendre à quoi servent ces balises qu’on croise dans le code sans jamais les utiliser. À la fin, vous saurez quelle balise choisir pour un titre, une liste, un tableau, un formulaire, une citation ou une vidéo, et pourquoi.

Sommaire

Les points essentiels à retenir

Toute page repose sur quatre balises fixes : <!DOCTYPE html>, <html>, <head> et <body> ; seul le contenu du <body> est visible.
Les titres vont de <h1> à <h6>, avec un seul <h1> par page et une hiérarchie respectée.
Les listes utilisent <ul> ou <ol> avec des <li>, les tableaux combinent <table>, <tr>, <th> et <td>.
Les balises sémantiques (<header>, <nav>, <section>, <article>, <footer>) décrivent le rôle d’un bloc, là où <div> et <span> ne servent qu’à styler.
Plusieurs balises natives remplacent du JavaScript : <details> pour un bloc dépliable, <dialog> pour une fenêtre modale, <progress> pour une barre de progression.

Étape 1 : le squelette d’une page, les balises qu’on retrouve partout

Avant de parler de contenu, il faut poser la structure. Un document HTML s’ouvre toujours sur la déclaration <!DOCTYPE html>, puis sur la balise <html> qui englobe tout le reste. À l’intérieur, deux grandes zones se partagent le travail.

La zone <head> : c’est l’en-tête invisible de la page. On y place les balises <meta> (encodage, description destinée aux robots, réglages d’affichage), la balise <title> qui donne le texte affiché dans l’onglet du navigateur, la balise <link> qui relie une feuille de style CSS, et la balise <script> qui charge un fichier JavaScript.
La zone <body> : tout ce qui s’y trouve est rendu à l’écran. Titres, paragraphes, images, formulaires : c’est ici que vivent presque toutes les balises de cette liste.

Un dernier élément de ce squelette n’est pas une balise à proprement parler mais on l’utilise en permanence : le commentaire. Il s’écrit  et n’apparaît jamais dans la page affichée. Pratique pour laisser une note à un collègue ou désactiver un bloc sans le supprimer.

Code HTML d’une page minimale avec doctype, html, head contenant meta, title, link et script, puis body avec un commentaire — Le squelette de base : tout ce qui est dans head reste invisible, tout ce qui est dans body s’affiche.

Si vous partez d’un document Word ou d’un simple fichier texte, ce squelette peut être généré automatiquement : notre convertisseur texte vers HTML produit une page valide qu’il ne reste plus qu’à enrichir avec les balises qui suivent.

La démonstration complète en vidéo, étape par étape.

Étape 2 : titres, paragraphes, liens et images, la base du contenu

Ces balises représentent 90 % de ce qu’on écrit au quotidien. Elles sont peu nombreuses, mais chacune a une règle d’usage précise.

Les titres de h1 à h6

On parle souvent de balises Hn, le chiffre allant de 1 à 6. Elles structurent la page comme le plan d’un document : un seul <h1> par page pour le titre principal, des <h2> pour les grandes parties, des <h3> pour les sous-parties, et ainsi de suite. Le navigateur leur applique par défaut une taille décroissante, ce qui permet de vérifier d’un coup d’œil que la hiérarchie tient debout.

Code HTML des six niveaux de titre h1 à h6 à gauche et leur rendu de taille décroissante dans l’aperçu à droite — Six niveaux de titre, de h1 à h6 : le rendu par défaut du navigateur suit la hiérarchie.

Paragraphe et retour à la ligne

La balise <p> délimite un paragraphe. On peut en enchaîner autant qu’on veut, chacun forme un bloc séparé du suivant. Pour passer à la ligne au sein du même paragraphe sans ouvrir un nouveau bloc, on utilise <br>. La nuance compte : <p> crée un espace entre deux blocs, <br> ne fait qu’un simple passage à la ligne.

Le lien

Un lien s’écrit avec la balise <a> et son attribut href qui contient l’adresse de destination, par exemple <a href="https://exemple.fr">Voir le site</a>. Le texte placé entre les deux balises devient cliquable.

L’image, et sa version réactive

La balise <img> affiche une image dont l’emplacement est indiqué par src : un fichier dans un dossier du site ou une adresse externe. L’attribut alt fournit un texte de remplacement lu quand l’image ne se charge pas. Vous avez sûrement déjà vu ce petit carré avec une icône cassée sur certains sites : c’est exactement ce qui s’affiche quand le fichier est introuvable, et le texte alt prend alors le relais.

Pour une image qui s’adapte à la largeur d’écran, on regroupe plusieurs sources dans une balise <picture> : chaque <source> indique un fichier et une largeur minimale d’écran, et la balise <img> placée en dernier sert d’image par défaut. Le tout peut être enveloppé dans <figure> avec une <figcaption> pour associer une légende à l’image.

Code HTML d’une balise figure contenant picture avec deux source, une img par défaut et une figcaption — figure, picture, source et figcaption : trois fichiers selon l’écran et une légende attachée à l’image.

Étape 3 : listes, tableaux et formulaires pour organiser les données

Listes à puces et listes numérotées

Deux familles existent. La liste non ordonnée <ul> affiche des puces sans numéro ; la liste ordonnée <ol> numérote automatiquement chaque entrée (en chiffres arabes par défaut, mais les chiffres romains sont aussi possibles). Dans les deux cas, chaque élément est une balise <li>. Une liste peut en contenir une autre : un <ul> imbriqué dans un <li> donne un sommaire à plusieurs niveaux.

Code HTML d’une liste non ordonnée ul contenant un li qui imbrique lui-même une seconde liste ul avec deux li — Une liste à puces imbriquée : ul pour la liste, li pour chaque élément, et un second ul à l’intérieur.

Les tableaux

Un tableau démarre par <table>. Chaque ligne est un <tr>. À l’intérieur d’une ligne, on choisit entre <th> pour une cellule d’en-tête et <td> pour une cellule ordinaire. Pour aller plus loin, <thead> regroupe les lignes d’en-tête et <tbody> le corps du tableau, ce qui facilite la mise en forme en CSS.

Code HTML d’un tableau avec table, une ligne tr de deux cellules th et une ligne tr de deux cellules td — Un tableau minimal : table, tr pour les lignes, th pour les en-têtes et td pour les cellules.

Les formulaires et tous leurs champs

Un formulaire s’ouvre avec <form>. Chaque champ est généralement précédé d’un <label> dont l’attribut for reprend l’identifiant du champ : cliquer sur l’étiquette place alors le curseur dans le bon champ. Les champs eux-mêmes sont des balises <input> dont l’attribut type change tout :

text pour du texte libre, password pour un mot de passe masqué ;
email, tel, url et number pour des saisies contrôlées ;
date et time qui ouvrent un sélecteur natif ;
checkbox pour une case à cocher, radio pour un choix unique parmi plusieurs options ;
range qui affiche un curseur à glisser plutôt qu’un champ à remplir.

Pour une liste déroulante, on utilise <select> avec des <option>, éventuellement groupées par <optgroup>. Pour une zone de texte sur plusieurs lignes, c’est <textarea>, dont les attributs rows et cols fixent le nombre de lignes et de colonnes. Le bouton d’envoi s’écrivait autrefois <input type="submit"> ; on lui préfère aujourd’hui <button type="submit">. Enfin, <fieldset> et <legend> tracent un cadre autour d’un groupe de champs avec un intitulé sur la bordure.

Code HTML d’un formulaire avec un label et un input par type de champ à gauche, et le formulaire rendu avec ses champs, cases et liste déroulante à droite — Un formulaire complet : un label et un input par champ, avec le rendu de chaque type à droite.

Étape 4 : div, span et les balises sémantiques qui structurent la page

C’est la partie la plus abstraite de cette liste balise HTML, et pourtant la plus utilisée en pratique. Ces balises n’affichent rien de particulier : elles servent à découper la page en zones.

div et span, les conteneurs neutres

La balise <div> ne produit aucun rendu visible seule. Elle sert de boîte qu’on va ensuite styler en CSS : le cadre blanc qui contient le contenu d’une page, par exemple, est presque toujours un <div>. Elle a une propriété importante : c’est un élément de type bloc. Deux <div> à la suite s’empilent l’un sous l’autre, alors que deux liens <a> à la suite restent sur la même ligne. C’est la différence entre l’affichage bloc et l’affichage en ligne.

La balise <span> est son équivalent en ligne. Elle n’a aucun sens structurel mais permet de cibler en CSS quelques mots au milieu d’une phrase, par exemple pour changer la couleur de deux mots.

Code HTML avec deux balises div consécutives et l’aperçu montrant les deux textes empilés sur deux lignes — Deux div à la suite : chacun occupe sa propre ligne, c’est le comportement d’un élément bloc.

Les balises qui donnent un rôle à chaque zone

Plutôt que d’empiler des <div> partout, HTML propose des balises qui décrivent la fonction d’un bloc. Elles ne changent rien visuellement mais aident le navigateur, les moteurs de recherche et les autres développeurs à comprendre la page :

<header> : l’en-tête d’une section. Le bandeau du haut avec le menu en est l’exemple classique, mais n’importe quel bloc peut posséder son propre header, même loin du sommet de la page.
<nav> : entoure un menu de navigation, c’est-à-dire un groupe de liens.
<section> : une partie d’un ensemble plus grand, comme l’introduction puis le corps d’un billet.
<article> : un contenu autonome, typiquement un billet de blog.
<aside> : un contenu annexe, secondaire par rapport au sujet principal.
<footer> : le pied de page, généralement dans une teinte distincte, avec les coordonnées de contact et le formulaire d’abonnement.

Pour voir comment ces balises s’articulent sur un cas concret, notre guide pour structurer un article de blog en HTML sémantique détaille un exemple complet.

Étape 5 : les balises de mise en forme et de sens dans le texte

Voici la famille la plus fournie. Beaucoup de ces balises sont méconnues, et certaines doublonnent avec du CSS ; on indique à chaque fois quand il vaut mieux passer par la feuille de style.

Importance, mise en valeur et corrections

<strong> signale qu’un passage est important. C’est une balise à ne pas négliger : elle donne un poids sémantique au texte, ce que les moteurs de recherche prennent en compte.
<mark> surligne un passage, comme un surligneur sur une feuille.
<small> réduit la taille d’une portion de texte, pour une mention légale par exemple.
<del> barre un texte pour indiquer qu’il a été supprimé ; <ins> signale au contraire un texte ajouté. On les voit peu, mais elles sont utiles pour montrer une modification.
<sub> place un texte en indice, sous la ligne d’écriture.
<u> souligne et <i> met en italique. Elles existent toujours, mais on préfère aujourd’hui obtenir ces effets en CSS.

Citations, définitions et abréviations

<blockquote> encadre une citation longue, typiquement un témoignage client.
<q> sert aux citations courtes insérées dans une phrase.
<cite> désigne la source d’une citation ou le titre d’une œuvre.
<dfn> marque le terme qu’on est en train de définir. Peu utilisée, mais correcte.
<abbr> indique une abréviation. Avec son attribut title, le navigateur affiche la forme développée quand la souris passe dessus.

Code HTML d’une balise abbr avec l’attribut title contenant la forme développée Hypertext Markup Language — abbr et son attribut title : le sens complet de l’abréviation apparaît au survol.

Code, dates et séparateurs

<code> affiche un extrait de code, indispensable pour les sites qui publient des tutoriels comme celui-ci.
<pre> conserve un texte préformaté, espaces et retours à la ligne compris.
<kbd> représente une touche ou une combinaison à taper au clavier.
<var> désigne une variable, par exemple dans une formule mathématique.
<time> contient une date. Son attribut datetime reçoit la date au format année-mois-jour, tandis que le texte visible peut être écrit en français. Les moteurs de recherche s’en servent pour repérer la date d’un contenu.
<hr> trace un trait horizontal pour séparer deux contenus. Là encore, un simple style CSS peut faire le même travail.

Étape 6 : multimédia et éléments interactifs sans JavaScript

Dernière famille, et sans doute la plus surprenante pour qui pense que l’interactivité passe forcément par du JavaScript. Plusieurs de ces balises font tout le travail seules.

Blocs dépliables, modales et indicateurs

La balise <details> crée un bloc replié ; la balise <summary> qu’elle contient est le texte toujours visible, sur lequel on clique pour révéler le reste. C’est exactement le mécanisme d’une FAQ, disponible nativement. La balise <dialog> définit une fenêtre modale qu’on ouvre ou ferme grâce à l’attribut open. Enfin, <progress> affiche une barre de progression à partir d’une valeur et d’un maximum (50 sur 100 remplit la moitié de la barre), et <meter> fonctionne sur le même principe pour représenter une jauge.

Code HTML d’une balise details contenant un summary et un paragraphe, avec le contenu déplié visible dans l’aperçu — details et summary créent un bloc dépliable sans une ligne de JavaScript.

Son, vidéo et contenus externes

<audio> lit une piste son, un MP3 par exemple. On indique le fichier via une balise <source> et on peut prévoir un texte de repli, même si presque tous les navigateurs actuels prennent en charge l’audio.
<video> fait la même chose pour un fichier vidéo dont on possède la source, un MP4 par exemple. Attention : elle ne permet pas d’intégrer une vidéo YouTube.
<iframe> incruste une autre page web dans la vôtre, qu’elle vienne de votre site ou d’un site tiers. C’est par elle que passe l’intégration d’une vidéo hébergée ailleurs.
<embed> intègre un fichier comme un PDF ou un document directement dans la page.

Dessin vectoriel et dessin par script

La balise <svg> décrit une forme vectorielle : un cercle, un tracé, une icône. En pratique, on exporte ces formes depuis un logiciel de design plutôt que de les écrire à la main, mais rien n’empêche de dessiner un cercle en quelques lignes pour comprendre le principe. La balise <canvas> fournit quant à elle une zone de dessin pilotée en JavaScript ; beaucoup de jeux dans le navigateur reposent sur elle pour animer leurs éléments.

Code HTML d’une balise svg contenant un cercle rouge avec contour noir, et le cercle rendu dans l’aperçu à droite — svg dessine une forme vectorielle directement dans la page : ici un cercle rouge décrit en six attributs.

Erreurs fréquentes quand on découvre ces balises

Plusieurs h1 sur une même page. On garde un seul <h1>, puis on descend d’un niveau à la fois : pas de <h4> directement sous un <h2>.
Utiliser br pour espacer des paragraphes. Trois <br> à la suite ne remplacent pas une balise <p> : la première crée un bloc, la seconde ne fait que passer à la ligne.
Oublier l’attribut alt. Sans lui, une image qui ne se charge pas n’affiche qu’une icône cassée, sans aucune information pour le lecteur.
Tout mettre dans des div. Quand un bloc est un menu, un en-tête ou un pied de page, les balises <nav>, <header> et <footer> disent la même chose, mais avec du sens en plus.
Vouloir intégrer YouTube avec video. La balise <video> attend un fichier ; pour une vidéo hébergée ailleurs, c’est <iframe> qu’il faut.
Souligner avec u ou mettre en italique avec i par réflexe. Ces balises fonctionnent, mais un style CSS est plus propre et plus facile à faire évoluer.

Si votre HTML vient d’un export Word, une bonne partie de ces erreurs sont déjà présentes dans le code généré. Notre article sur les balises meta complète ce tour d’horizon pour la partie <head>, celle qu’on ne voit pas mais que Google lit en premier.

Questions fréquentes

Combien de balises HTML existe-t-il vraiment ?

Ce tutoriel en présente plus de 70, ce qui couvre la quasi-totalité de ce qu’on rencontre dans un projet. Certaines balises très anciennes ou très spécialisées n’y figurent pas, mais celles listées ici suffisent pour construire n’importe quelle page.

Quelle est la différence entre une balise bloc et une balise en ligne ?

Un élément bloc, comme <div> ou <p>, occupe toute la largeur disponible et repousse l’élément suivant à la ligne. Un élément en ligne, comme <a> ou <span>, reste dans le flux du texte : plusieurs éléments en ligne se suivent sur une même ligne.

Faut-il utiliser strong ou b pour mettre en gras ?

Le rendu visuel est le même, mais <strong> porte un sens : le passage est important. C’est cette balise qu’il faut privilégier quand le mot compte vraiment, et réserver le gras purement décoratif au CSS.

Peut-on faire une FAQ ou une modale sans JavaScript ?

Oui. Le couple <details> et <summary> gère un bloc qui s’ouvre et se ferme au clic, et la balise <dialog> définit une fenêtre modale pilotable par son attribut open. Dans les deux cas, le navigateur fait le travail.

Vous avez un document Word à passer en HTML propre ?

Obtenez un code léger avec les bonnes balises, sans les styles parasites de l’export Word.

Essayer gratuitement

Quiz : avez-vous tout retenu ?

1. Quelle balise contient tout ce qui est visible à l’écran ?

2. Pour créer une liste numérotée, on utilise :

3. Quelle balise sert de cellule d’en-tête dans un tableau ?

4. Deux balises div placées à la suite s’affichent :

5. Quel attribut de la balise abbr affiche la forme développée au survol ?

6. Pour intégrer une vidéo hébergée sur une plateforme externe, on utilise :

Vous avez maintenant une liste de balises HTML complète et organisée par usage : le squelette, le contenu de base, les données, la structure, la mise en forme et le multimédia. Inutile de tout mémoriser d’un coup. Gardez cette page sous la main, et à chaque fois que vous hésitez entre deux balises, demandez-vous ce que le bloc représente plutôt que ce à quoi il ressemble : c’est la bonne balise qui répondra.