Balises HTML essentielles : le guide de référence avec exemples pour structurer vos pages

Thématique: Développement web & mobile
Mis à jour: 26 septembre 2026
Lecture: 13 min
Formation: Apprendre HTML5 - Les bases du développement web

L'essentiel en 30 secondes

Les balises HTML sont des marqueurs entre chevrons qui indiquent au navigateur la nature de chaque contenu : titre, paragraphe, lien, image, tableau ou formulaire.
La plupart des balises vont par paires (ouvrante et fermante) ; quelques-unes, comme img, br ou input, sont des éléments vides sans balise fermante.
Les attributs complètent une balise : href pour la destination d'un lien, src et alt pour une image, type et name pour un champ de formulaire.
Les balises sémantiques HTML5 (header, nav, main, article, section, aside, footer) décrivent le rôle des zones de la page et améliorent l'accessibilité et le référencement.
Une trentaine de balises suffisent pour construire la grande majorité des pages web ; la mise en forme relève ensuite du CSS.

Sommaire de l'article

Qu’est-ce qu’une balise HTML ?
Pourquoi bien choisir ses balises HTML ?
Les balises HTML essentielles, catégorie par catégorie
Tableau HTML et formulaires : les balises des données
Les balises sémantiques HTML5
Les erreurs fréquentes avec les balises HTML
HTML, CSS et JavaScript : qui fait quoi ?
Comment maîtriser les balises HTML rapidement ?
En résumé

Les balises HTML sont les marqueurs qui structurent une page web : écrites entre chevrons, comme <p> pour un paragraphe ou <a> pour un lien, elles indiquent au navigateur la nature de chaque contenu. Ce guide de référence présente les balises essentielles, regroupées par usage, avec pour chacune un exemple de code prêt à tester.

Il s’adresse aux débutants en HTML qui veulent une vue claire des balises à connaître, aux rédacteurs et chefs de projet qui manipulent un CMS et aux développeurs qui souhaitent vérifier le bon usage d’une balise. Pour le parcours complet d’apprentissage du langage (environnement, méthode, projets), consultez notre guide pour apprendre HTML : ici, l’objectif est de disposer d’une référence pratique.

Qu’est-ce qu’une balise HTML ?

Une balise HTML est un mot-clé placé entre chevrons qui délimite un contenu et lui donne un rôle. La plupart vont par paires : une balise ouvrante, le contenu, puis une balise fermante précédée d’une barre oblique. L’ensemble forme un élément, que le navigateur affiche selon sa nature.

<p>Ceci est un paragraphe.</p>
<a href="https://www.exemple.fr">Ceci est un lien</a>
<img src="photo.jpg" alt="Vue du port au coucher du soleil">

Trois notions à retenir :

Les attributs précisent une balise : ils s’écrivent dans la balise ouvrante sous la forme nom="valeur", comme href ou alt ci-dessus.
Les éléments vides n’ont pas de contenu ni de balise fermante : <img>, <br>, <hr>, <input>, <meta>, <link>.
L’imbrication doit être respectée : une balise ouverte à l’intérieur d’une autre se ferme avant elle.

<!-- Correct -->
<p>Un mot <strong>important</strong> dans la phrase.</p>

<!-- Incorrect : les balises se chevauchent -->
<p>Un mot <strong>important</p></strong>

La ligne entre  est un commentaire : il n’est pas affiché et sert à annoter le code.

Pourquoi bien choisir ses balises HTML ?

HTML ne sert pas à mettre en forme, mais à donner du sens. Choisir la bonne balise a des effets concrets :

Accessibilité : les lecteurs d’écran annoncent les titres, les listes, les liens et les zones de la page. Une structure correcte permet à un utilisateur malvoyant de naviguer efficacement.
Référencement : les moteurs de recherche s’appuient sur les titres, les liens et les attributs alt pour comprendre le contenu.
Maintenance : un code sémantique est plus lisible et plus simple à styliser avec le CSS.
Compatibilité : un HTML valide s’affiche de façon cohérente sur tous les navigateurs.

Les balises HTML essentielles, catégorie par catégorie

Voici les balises à connaître, regroupées par usage, de la structure du document jusqu’aux médias. Chaque exemple peut être copié dans un fichier .html et ouvert dans votre navigateur.

La structure de base d’une page HTML

Toute page commence par le même squelette :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Atelier Bois & Création - Meubles sur mesure</title>
  <meta name="description" content="Fabrication de meubles sur mesure en bois massif.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Meubles sur mesure en bois massif</h1>
  <p>Bienvenue dans notre atelier.</p>
</body>
</html>

Balise	Rôle
`<!doctype html>`	Déclare un document HTML5 (ce n’est pas une balise à proprement parler)
`<html lang="fr">`	Racine du document ; l’attribut `lang` indique la langue
`<head>`	Informations sur la page, non affichées : encodage, titre, liens vers les feuilles de style
`<meta charset="utf-8">`	Encodage des caractères, indispensable pour les accents
`<meta name="viewport">`	Adaptation de l’affichage aux écrans mobiles
`<title>`	Titre affiché dans l’onglet et, souvent, dans les résultats de recherche
`<link>`	Relie une ressource externe, typiquement une feuille CSS
`<body>`	Tout le contenu visible de la page

Notez l’écriture de l’esperluette : dans le texte, le caractère & s’écrit idéalement &, et les chevrons < et > s’écrivent < et > pour ne pas être confondus avec des balises.

Les balises de texte : titres, paragraphes et mise en valeur

Titres et paragraphes

Les titres vont de <h1> à <h6>, du plus important au moins important. Une page comporte en général un seul <h1>, puis des <h2> pour les grandes parties et des <h3> pour les sous-parties, sans sauter de niveau.

<h1>Guide de la randonnée en montagne</h1>
<h2>Préparer son sac</h2>
<h3>L'équipement indispensable</h3>
<p>Un bon sac de randonnée pèse idéalement moins de dix kilos.</p>
<p>Première ligne de l'adresse<br>Seconde ligne de l'adresse</p>
<hr>

<br> force un retour à la ligne à l’intérieur d’un même paragraphe (adresse, poème) ; ne l’utilisez pas pour créer des espacements, c’est le rôle du CSS. <hr> marque une séparation thématique entre deux blocs de contenu.

Mise en valeur et sens du texte

Balise	Signification	Exemple d’usage
`<strong>`	Importance forte	Un avertissement
`<em>`	Emphase, accentuation	Un mot sur lequel on insiste
`<mark>`	Texte surligné, pertinent dans le contexte	Terme recherché
`<abbr title="...">`	Abréviation, avec sa forme longue en infobulle	`<abbr title="HyperText Markup Language">HTML</abbr>`
`<blockquote>` / `<q>`	Citation longue / courte	Extrait d’un auteur
`<cite>`	Titre d’une œuvre citée	Nom d’un livre
`<code>` / `<pre>`	Code informatique / texte préformaté	Extrait de programme
`<sub>` / `<sup>`	Indice / exposant	Formule chimique, « 1er » avec exposant
`<del>` / `<ins>`	Texte supprimé / inséré	Ancien et nouveau prix
`<s>`	Texte qui n’est plus exact	Offre expirée
`<address>`	Coordonnées de contact	Bloc de contact en pied de page
`<time datetime="...">`	Date ou heure lisible par les machines	Date d’un événement

<p><strong>Attention :</strong> le sentier est <em>fermé</em> en hiver.</p>
<p>Prix : <del>89 €</del> <ins>69 €</ins></p>
<blockquote cite="https://www.exemple.fr/source">
  <p>La montagne se mérite.</p>
</blockquote>
<p>Rendez-vous le <time datetime="2026-10-12">12 octobre</time>.</p>

Éléments de bloc et éléments en ligne

Les éléments de bloc (<p>, <h1>, <ul>, <div>, <section>) commencent sur une nouvelle ligne et occupent toute la largeur disponible. Les éléments en ligne (<a>, <strong>, <em>, <span>, <img>) s’insèrent dans le flux du texte. Deux balises neutres servent de conteneurs sans signification : <div> pour un bloc et <span> pour un fragment en ligne. On les utilise pour appliquer un style ou un script lorsqu’aucune balise sémantique ne convient.

Les listes HTML : ordonnées, non ordonnées et de définition

<!-- Liste non ordonnée (puces) -->
<ul>
  <li>Chaussures de marche</li>
  <li>Veste imperméable</li>
  <li>Gourde
    <ul>
      <li>1 litre minimum</li>
    </ul>
  </li>
</ul>

<!-- Liste ordonnée (numérotée) -->
<ol>
  <li>Consulter la météo</li>
  <li>Prévenir un proche de l'itinéraire</li>
  <li>Partir tôt</li>
</ol>

<!-- Liste de définitions -->
<dl>
  <dt>Dénivelé positif</dt>
  <dd>Somme des montées sur un parcours.</dd>
</dl>

<ul> convient quand l’ordre n’a pas d’importance, <ol> quand il en a (étapes, classement). L’attribut start fait commencer la numérotation à un autre chiffre, reversed l’inverse.
Une liste imbriquée se place à l’intérieur d’un <li>, jamais directement dans le <ul>.
<dl> associe des termes (<dt>) à leurs définitions (<dd>) : glossaire, fiche technique.

Les menus de navigation sont, eux aussi, des listes de liens : c’est la structure attendue par les lecteurs d’écran.

Les liens HTML : pages, ancres, e-mail et iframes

La balise <a> crée un lien ; l’attribut href indique la destination.

<!-- Lien absolu vers un autre site -->
<a href="https://www.exemple.fr">Visiter le site</a>

<!-- Lien relatif vers une page du même site -->
<a href="contact.html">Nous contacter</a>
<a href="../blog/article.html">Lire l'article</a>

<!-- Ouvrir dans un nouvel onglet -->
<a href="https://www.exemple.fr" target="_blank" rel="noopener">Documentation (nouvel onglet)</a>

<!-- Ancre vers une section de la même page -->
<a href="#tarifs">Voir les tarifs</a>
<h2 id="tarifs">Nos tarifs</h2>

<!-- E-mail et téléphone -->
<a href="mailto:contact@exemple.fr">Écrire un e-mail</a>
<a href="tel:+33100000000">Appeler</a>

Bonnes pratiques :

rédigez un texte de lien descriptif (« Voir les tarifs », et non « cliquez ici ») : c’est plus accessible et plus utile au référencement ;
préférez les chemins relatifs pour les pages de votre propre site, ce qui facilite les déplacements du site ;
n’ouvrez un nouvel onglet que lorsque c’est utile et signalez-le dans le texte du lien.

La balise <iframe> intègre une autre page dans la vôtre, par exemple une carte ou une vidéo hébergée :

<iframe src="https://www.exemple.fr/carte" title="Carte d'accès à l'atelier"
        width="600" height="400" loading="lazy"></iframe>

Images et médias : `img`, `figure`, `video` et `audio`

<img src="images/refuge.jpg" alt="Refuge en pierre au pied du glacier"
     width="800" height="533" loading="lazy">

<figure>
  <img src="images/carte.png" alt="Carte de l'itinéraire de 12 km">
  <figcaption>Itinéraire de la boucle des lacs.</figcaption>
</figure>

<video src="videos/presentation.mp4" controls width="640" poster="images/apercu.jpg">
  Votre navigateur ne peut pas lire cette vidéo.
</video>

<audio src="audio/interview.mp3" controls></audio>

alt est obligatoire : il décrit l’image pour les personnes qui ne la voient pas et s’affiche si elle ne se charge pas. Pour une image purement décorative, laissez-le vide (alt="").
width et height réservent la place de l’image pendant le chargement et évitent les décalages de mise en page.
loading="lazy" diffère le chargement des images situées plus bas dans la page.
<figure> et <figcaption> associent une image (ou un schéma, un extrait de code) à sa légende.
Côté formats, retenez JPEG pour les photos, PNG pour les images avec transparence ou aplats nets, SVG pour les logos et icônes vectoriels, WebP et AVIF pour des fichiers plus légers.

Les balises <map> et <area> permettent aussi de définir des zones cliquables sur une image, une technique plus rare aujourd’hui mais toujours valide.

Tableau HTML et formulaires : les balises des données

Tableaux et formulaires sont les deux familles de balises les plus riches : l’une présente des données, l’autre en collecte. Toutes deux demandent une attention particulière à l’accessibilité.

Le tableau HTML : structurer des données

Un tableau HTML sert à présenter des données tabulaires (horaires, tarifs, comparatifs), jamais à mettre en page un site.

<table>
  <caption>Horaires d'ouverture de l'atelier</caption>
  <thead>
    <tr>
      <th scope="col">Jour</th>
      <th scope="col">Matin</th>
      <th scope="col">Après-midi</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Lundi</th>
      <td colspan="2">Fermé</td>
    </tr>
    <tr>
      <th scope="row">Mardi</th>
      <td>9 h - 12 h</td>
      <td>14 h - 18 h</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Ouvert le samedi sur rendez-vous.</td>
    </tr>
  </tfoot>
</table>

Balise	Rôle
`<table>`	Conteneur du tableau
`<caption>`	Titre du tableau, lu par les lecteurs d’écran
`<thead>`, `<tbody>`, `<tfoot>`	En-tête, corps et pied du tableau
`<tr>`	Ligne
`<th>`	Cellule d’en-tête ; `scope` précise si elle concerne une colonne ou une ligne
`<td>`	Cellule de données
`colspan` / `rowspan`	Fusion de cellules sur plusieurs colonnes / lignes
`<colgroup>`, `<col>`	Regroupement de colonnes, utile pour les styler ensemble

Les formulaires HTML : champs, étiquettes et boutons

<form action="/inscription" method="post">
  <fieldset>
    <legend>Vos coordonnées</legend>

    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">E-mail</label>
    <input type="email" id="email" name="email" required placeholder="vous@exemple.fr">

    <label for="date">Date souhaitée</label>
    <input type="date" id="date" name="date">
  </fieldset>

  <p>Niveau :</p>
  <input type="radio" id="debutant" name="niveau" value="debutant" checked>
  <label for="debutant">Débutant</label>
  <input type="radio" id="confirme" name="niveau" value="confirme">
  <label for="confirme">Confirmé</label>

  <input type="checkbox" id="newsletter" name="newsletter">
  <label for="newsletter">Recevoir la lettre d'information</label>

  <label for="atelier">Atelier</label>
  <select id="atelier" name="atelier">
    <option value="tabouret">Tabouret</option>
    <option value="etagere">Étagère</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Envoyer ma demande</button>
</form>

Les points essentiels :

action indique l’adresse qui traitera les données, method la façon de les envoyer (get ou post). Le traitement lui-même se fait côté serveur, hors du HTML.
Chaque champ a un <label> relié par for à l’id du champ : cliquer sur l’étiquette active le champ, et les lecteurs d’écran l’annoncent.
L’attribut name est indispensable pour que la valeur soit envoyée.
Les types d’<input> adaptent le clavier mobile et la validation : email, tel, number, date, password, url, range, color, file.
required, min, max, maxlength et pattern activent la validation native du navigateur avant l’envoi.
Les boutons radio d’un même groupe partagent le même name.

Les balises sémantiques HTML5

HTML5 a introduit des balises qui décrivent les grandes zones d’une page :

<body>
  <header>
    <a href="/">Atelier Bois & Création</a>
    <nav>
      <ul>
        <li><a href="/">Accueil</a></li>
        <li><a href="/ateliers/">Ateliers</a></li>
        <li><a href="/contact/">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Fabriquer son premier tabouret</h1>
      <section>
        <h2>Le matériel</h2>
        <p>...</p>
      </section>
    </article>
    <aside>
      <h2>Prochains ateliers</h2>
    </aside>
  </main>

  <footer>
    <address>12 rue des Artisans, Lyon</address>
  </footer>
</body>

Balise	Rôle
`<header>`	En-tête de la page ou d’une section : logo, titre, navigation
`<nav>`	Bloc de liens de navigation principaux
`<main>`	Contenu principal, unique dans la page
`<article>`	Contenu autonome, qui aurait du sens seul : article, fiche produit, commentaire
`<section>`	Regroupement thématique, généralement introduit par un titre
`<aside>`	Contenu complémentaire : encadré, liens connexes
`<footer>`	Pied de page ou d’une section : mentions, contact

Une règle simple : si une balise sémantique décrit le rôle du bloc, utilisez-la ; sinon, rabattez-vous sur <div>.

Les erreurs fréquentes avec les balises HTML

Erreur	Problème	Bonne pratique
Choisir un titre pour sa taille	Hiérarchie incohérente pour les moteurs et les lecteurs d’écran	Choisir le niveau selon la structure, régler la taille en CSS
Image sans attribut `alt`	Contenu inaccessible, moins bon référencement	Décrire l’image, ou `alt=""` si elle est décorative
Enchaîner des `<br>` pour espacer	Code fragile et peu lisible	Paragraphes distincts et marges en CSS
Tableau utilisé pour la mise en page	Mauvaise accessibilité, rendu mobile difficile	Tableaux pour les données, CSS pour la mise en page
Champ de formulaire sans `<label>`	Formulaire difficile à utiliser et à comprendre	Un label relié à chaque champ
Balises mal imbriquées ou non fermées	Affichage imprévisible	Indenter le code et le valider
Des `<div>` partout	Structure sans signification	Balises sémantiques quand elles existent
Liens « cliquez ici »	Texte de lien sans information	Ancre descriptive

Pour vérifier votre code, passez-le au validateur du W3C : il signale les balises non fermées, les attributs manquants et les imbrications incorrectes. En formation, c’est l’outil qui fait le plus progresser les débutants, car chaque erreur est expliquée.

HTML, CSS et JavaScript : qui fait quoi ?

Langage	Rôle	Exemple
HTML	Structure et sens du contenu	Un titre, une liste, un formulaire
CSS	Présentation et mise en page	Couleurs, polices, colonnes, affichage mobile
JavaScript	Comportement et interactivité	Menu qui s’ouvre, validation avancée, contenu chargé à la demande

Les balises HTML forment la fondation. Une fois votre structure en place, la suite logique est d’apprendre CSS pour la mettre en forme, puis d’apprendre JavaScript pour la rendre interactive. Si vous voulez aller vite sur la mise en page responsive, un framework comme Bootstrap 5 s’appuie directement sur les balises vues ici.

Comment maîtriser les balises HTML rapidement ?

Plutôt que d’apprendre une liste par cœur, pratiquez par petits projets :

Jour 1 : structure de page, titres, paragraphes, mise en valeur du texte, commentaires.
Jour 2 : listes, liens (relatifs, ancres, e-mail), images et figures.
Jour 3 : tableaux avec en-têtes et fusions, puis médias (vidéo, audio, iframe).
Jour 4 : un formulaire complet avec tous les types de champs et la validation native.
Jour 5 : une page entière en balises sémantiques, validée par le W3C.

Pour suivre ce parcours avec des exercices corrigés, la formation HTML5 sur les bases du développement web d’EspritAcadémique dure 3 h 30, sans prérequis. Elle aborde en particulier :

l’installation de VS Code et le fonctionnement du HTML dans le navigateur ;
les balises de texte, les éléments de bloc et en ligne, les séparateurs ;
les listes simples, imbriquées et de définition, les liens, ancres et iframes ;
les tableaux avec leurs regroupements et fusions de cellules ;
les images, les zones cliquables et la vidéo ;
les formulaires complets, les balises sémantiques et une ouverture sur CSS et JavaScript.

En résumé

Les balises HTML donnent un sens à chaque contenu de la page : titres hiérarchisés, paragraphes, listes, liens descriptifs, images décrites par alt, tableaux de données, formulaires étiquetés et zones sémantiques. Une trentaine de balises bien utilisées suffisent pour construire des pages solides, accessibles et bien référencées. Maîtrisez-les par la pratique, validez votre code, puis confiez la présentation au CSS.

Questions fréquentes

Combien existe-t-il de balises HTML ?

La spécification HTML définit une bonne centaine d'éléments, mais une trentaine suffisent pour la grande majorité des pages : structure du document, titres, paragraphes, listes, liens, images, tableaux, formulaires et balises sémantiques. Les autres répondent à des besoins plus spécifiques, comme les formules, le texte bidirectionnel ou les éléments interactifs. Mieux vaut bien maîtriser les essentielles que survoler toute la liste.

Quelle est la différence entre une balise et un élément HTML ?

La balise est le marqueur écrit entre chevrons, par exemple la balise ouvrante p et la balise fermante correspondante. L'élément désigne l'ensemble formé par la balise ouvrante, le contenu et la balise fermante. Dans le langage courant, les deux termes sont souvent employés l'un pour l'autre, ce qui ne pose pas de problème pour débuter.

Quelle différence entre strong et b en HTML ?

La balise strong indique qu'un contenu est important, ce qui a un sens pour les lecteurs d'écran et les moteurs de recherche. La balise b met simplement du texte en gras, sans signification particulière. Le rendu visuel par défaut est le même, mais on privilégie strong pour une information importante et on laisse le style purement décoratif au CSS.

Faut-il fermer toutes les balises HTML ?

Les éléments qui ont un contenu doivent être fermés : un paragraphe, un titre, un lien, une liste. Les éléments vides, comme img, br, hr, input ou meta, n'ont pas de balise fermante. Certains navigateurs tolèrent des oublis, mais fermer systématiquement vos balises évite des affichages imprévisibles et facilite la validation de votre code.

Les balises HTML ont-elles un impact sur le référencement ?

Oui. Une hiérarchie de titres logique, des balises sémantiques, des liens avec un texte descriptif, des images avec un attribut alt pertinent et une balise title unique aident les moteurs de recherche à comprendre le contenu de la page. Le HTML ne suffit pas à bien se positionner, mais un HTML mal structuré pénalise un contenu de qualité.

Quel logiciel utiliser pour écrire des balises HTML ?

Un simple éditeur de texte suffit, mais Visual Studio Code est le plus pratique : gratuit, il colore le code, complète automatiquement les balises et propose des raccourcis comme Emmet, qui génère une structure complète à partir d'une abréviation. Enregistrez le fichier avec l'extension .html et ouvrez-le dans un navigateur pour voir le résultat.