Le HTML est un langage de balisage utilisé pour structurer le contenu des pages d'un site web. Cette structuration ne saurait être faite sans l'usage de balises. En effet, les balises sont l'élément de base du langage HTML. Cette article vous propose la liste de toutes les balises supportées dans la version la plus récente du langage HTML (HTML5).
Remarque : À chaque fois qu'il sera mentionné dans cet article, le terme HTML désignera la version la plus récente du langage, c'est-à-dire HTML5.
Définition et description des balises HTML
Voici à présent la liste des balises disponibles en HTML, suivie chacune d'une brève description.
<!--...--> : Cette balise est utilisée pour insérer un commentaire dans un document HTML. Tout ce qui est contenu dans cette balise ne sera pas affiché dans le navigateur, mais sera visible dans le code source de la page.
<!DOCTYPE> : Cette balise est utilisée pour définir la version du langage HTML utilisée. DOCTYPE est l'acronyme de Document Type. Dans un document utilisant le HTML5, le DOCTYPE à déclarer est : <!DOCTYPE html>
<a>...</a> : La balise <a> est utilisée pour définir des hyperliens (ou liens hypertextes) dans un document HTML.
<abbr>...</abbr> : La balise <abbr> est utilisée pour définir une abbréviation. Son attribut title n'est utilisé que pour spécifier l'extension de l'abbréviation. Dans le navigateur, lorsque le curseur parcourt le texte (ou n'importe quel autre élément) contenu entre <abbr> et </abbr>, une info bulle contenant le texte spécifié dans l'attribut title apparaît.
<address>...</address> : La balise <address> balise est généralement utilisée pour définir les informations nécéssaires pour contacter l'auteur d'un document ou d'un article. Ces informations peuvent être une adresse électronique, une URL, une adresse physique, un numéro de téléphone, un identifiant de réseaux sociaux, etc. Le texte contenu entre <address> et </address> s'affiche par défaut en italique dans le navigateur.
<area> : Toujours imbriquée dans une balise <map>, la balise <area> permet de définir une zone ou plusieurs zones cliquables à l'intérieur d'une carte-image. Une carte-image est une image avec des zones cliquables.
<article>...</article> : La balise <article> est utilisée pour définir un contenu (distribuable et réutilisable) ayant son propre sens indépendamment du reste des autres éléments de la page. La balise <article> peut être confondue avec la balise <section> qui regroupe des éléments ayant la même thématique.
<aside>...</aside> : La balise <aside> est utilisée pour regrouper des informations relatives, mais pas forcément essentielles au site web. La balise <aside> peut être utilisée pour définir la sidebar d'une page. Toutefois, il n'est pas obligatoire que le sidebar soit contenu dans cette balise.
<audio>...</audio> : La balise <audio> permet de lire un fichier audio.
<b>...</b> : La balise <b> permet de mettre un texte en gras. Toutefois, il est préférable d'utiliser la balise <strong> pour donner plus d'importance au texte, car sémantiquement plus forte que la balise <b>.
<base> : La balise <base> permet de définir l'URL de base (ou l'URL par défaut) pour tous les liens relatifs d'une page. La balise <base> doit avoir soit un attribut href, soit un attribut target, ou les deux. Elle ne peut être définie qu'une seule fois dans une page, et doit figurer à l'intérieur de la balise <head>.
<bdi>...</bdi> : La balise <bdi> balise est utilisée pour spécifier la direction d'un texte. BDI est l'abréviation de Bi-Directional Isolation. Elle peut être utile lorsque l'on veut intégrer du contenu généré par l'utilisateur dont le sens du texte est inconnu.
<bdo>...</bdo> : La balise <bdo> balise est utilisée pour changer la direction actuelle d'un texte. BDO est l'abréviation de Bi-Directional Override.
<blockquote>...</blockquote> : Avec cette balise, il est possible de citer un texte provenant d'une source externe. L'adresse de la source peut-être indiquée dans l'attribut cite. Par défaut, le navigateur indente le texte contenu dans la balise <blockquote>.
<body>...</body> : La balise <body> est utilisée pour définir le contenu principal d'un document HTML. C'est dans cette balise que sont contenus tous les éléments visibles et audibles d'un document HTML. Aucun contenu ne devrait figurer après la balise fermante </body>.
<br> : La balise <br> sert à créer un saut de ligne (ou retour à la ligne). Généralement, elle est utilisée dans un paragraphe, c'est-à-dire dans une balise <p>.
<button>...</button> : La balise <button> permet de créer un bouton. La plupart du temps, il est utilisé comme commande pour déclencher un évènement comme par exemple l'envoi d'un formulaire.
<canvas>...</canvas> : La balise <canvas> permet de créer des graphiques qui peuvent être animés avec du code JavaScript. Elle est transparente, et ne sert que de conteneur pour les graphiques. Donc, tout texte contenu dans la balise <canvas> ne sera affiché dans un navigateur que si JavaScript est désactivé. Ce texte sera également visible dans les navigateurs où la balise <canvas> n'est pas prise en charge.
<caption>....</caption> : La balise <caption> est utilisée pour définir le titre d'un tableau. Elle doit être insérée juste après la balise <table>.
<cite>...</cite> : La balise <cite> permet de définir le titre d'une oeuvre de création comme le titre d'un livre, d'une chanson, d'un film, etc. À noter que le nom d'une personne n'est pas le titre d'une oeuvre. Par défaut, le texte contenu dans la balise <cite> s'affiche en italique dans un navigateur.
<code>...</code> : La balise <code> est utilisée pour insérer un fragment de code informatique dans un document HTML.
<col> : La balise <col> est utilisée pour appliquer un style CSS à une ou plusieurs colonnes, plutôt que de repéter le même style pour chaque cellule de la colonne.
<colgroup>...</colgroup> : La balise <colgroup> est utilisée pour créer un groupe d'une ou plusieurs colonne dans un tableau. La balise <colgroup> est conjointement utilisée avec la balise <col>, et doit être un élément de la balise <table>.
<data>...</data> : La balise <data> est utilisée pour ajouter une valeur lisible par la machine pour les processeurs de données.
<datalist>...</datalist> : La balise <datalist> permet de définir une liste déroulante pour une balise <input>. L'attribut id de la balise <datalist> doit être identique à l'attribut list de la balise <input>.
<dd>...</dd> : La balise <dd> est utilisée pour décrire un terme dans une liste de description (<dl>). Elle est conjointement utilisée avec la balise <dt> dont elle décrit le terme.
<del>...</del> : La balise <del> est utilisée pour indiquer qu'une partie d'un texte est supprimée, mais conservée pour en garder la trace. Elle peut être utilisée conjointement avec la balise <ins> pour indiquer le nouveau texte qui est à prendre en compte.
<details>...</details> : La balise <details> est utilisée pour créer un widget interactif que l'utilisateur peut afficher et masquer à la demande. La balise <details> est conjointement utilisée avec la balise <summary> qui spécifie le titre visible des détails à afficher.
<dfn>...</dfn> : La balise <dfn> permet de spécifier le terme d'une définition. Elle est généralement utilisée dans un paragraphe (<p>), mais peut également être utilisée dans une liste de description (<dl>). Par défaut, le texte contenu dans la balise <dfn> s'affiche en italique dans le navigateur.
<dialog>...</dialog> : La balise <dialog> permet de créer des boîtes de dialogue contextuelles et des fenêtres modales sur une page web. Toutefois, son utilisation n'est pas obligatoire pour le faire.
<div>...</div> : La balise <div> permet de définir un conteneur dans un document HTML. Cette balise est généralement utilisée pour facilité la mise en forme d'un contenu à l'aide de l'attribut class ou id. Il est possible d'intégrer n'importe quel contenu dans une balise <div>.
<dl>...</dl> : La balise <dl> est utilisée pour définir une liste de description. Elle est conjointement utilisée avec la balise <dt> qui définit le(s) terme(s) et la balise <dd> qui décrit chaque terme.
<dt>...</dt> : La balise <dt> est utilisée pour spécifier un terme dans une liste de description. Elle est conjointement utilisée avec la balise <dl> qui définit la liste de description et la balise <dd> qui décrit chaque terme dans la liste de description.
<em>...</em> : La balise <em> est utilisée pour mettre une partie d'un texte en emphase. Le texte contenu dans la balise <em> s'affiche par défaut en italique dans le navigateur.
<embed>...</embed> : La balise <embed> permet de définir un conteneur pour une ressource externe, telle qu'une page web, une image, un lecteur multimédia ou un plug-in.
<fieldset>...</fieldset> : La balise <fieldset> est utilisée pour regrouper des éléments connexes dans un formulaire. Elle dessine un cadre autour des éléments connexes.
<figcaption>...</figcaption> : Utilisée à l'intérieur d'une balise <figure>, La balise <figcaption> permet de définir la légende d'une photo.
<figure>...</figure> : La balise <figure> est utilisée pour regrouper un ou plusieurs médias autonomes tels que des illustrations, des diagrammes, des exemples de code, des photos, etc.
<footer>...</footer> : La balise <footer> est utilisée pour définir le pied de page d'un document HTML. Elle contient généralement les informations sur l'auteur du site, les contacts, le droit d'auteur, le plan du site, etc.
<form>...</form> : La balise <form> permet de définir un formulaire HTML destiné à recevoir les informations d'un utilisateur.
<h1> à <h6> : Les balises <h1> à <h6> sont utilisées pour définir les titres dans un document HTML. La balise <h1> représente le titre le plus important et la balise <h6> représente le titre le moins important.
<head>...</head> : La balise <head> est utilisée pour définir les métadonnées d'un document HTML. Ces métadonnées sont généralement le titre de la page, les styles CSS, les scripts JavaScript et des informations sur le reférencement.
<header>...</header> : La balise <header> est utilisée pour définir l'en-tête d'une section et/ou d'une page web.
<hr> : La balise <hr> permet de créer une ligne de séparation horizontale dans un document HTML.
<html>...</html> : La balise <html> représente la racine d'un document HTML. Elle regroupe toutes les autres balises HTML à l'exception de la balise <!DOCTYPE>.
<i>...</i> : La balise <i> est utilisée pour indiquer qu'une partie du texte est différente du reste. Le contenu de la balise <i> s'affiche par défaut en italique dans le navigateur.
<iframe>...</iframe> : La balise <iframe> est utilisée pour créer un cadre ou une sous-fenêtre dans un document HTML.
<img> : La balise <img> est utilisée pour intégrer une image dans une page HTML.
<input> : La balise <input> spécifie un champ de saisie dans lequel l'utilisateur peut saisir des données. C'est l'élément le plus important d'un formulaire.
<ins>...</ins> : La balise <ins> est utilisée pour insérer un nouveau texte dans un document révisé. Elle peut être utilisée conjointement avec la balise <del> qui indique la portion de texte qui n'est plus valable.
<kbd>...</kbd> : La balise <kbd> est utilisée pour spécifier une combinaison de touches du clavier. Par défaut, le contenu de cette balise s'affiche en police monospace dans le navigateur.
<keygen>...</keygen> : La balise <keygen> permet de générer une paire de clés (publique et privée). Cette paire de clés est utilisée pour chiffrer et déchiffrer les données de formulaire et pour créer et vérifier une signature numérique.
<label>...</label> : La balise <label> est utilisée pour définir l'étiquette d'un élément de formulaire.
<legend>...</legend> : Le balise <legend> définit le titre des éléments de formulaire regroupés dans la balise <fieldset>.
<li>...</li> : La balise <li> permet de définir un élément de liste. Elle est utilisée dans les listes ordonnées (<ol>) et les listes à puces ou non ordonnées (<ul>).
<link> : La balise <link> permet de définir un lien entre un document HTML et une ressource externe. Généralement, elle est utilisée pour créer un lien vers des feuilles de style externes (CSS) ou pour ajouter un favicon à un site web.
<main>...</main> : La balise <main> permet de définir le conteneur principal d'un document HTML. Elle ne peut être utilisée qu'une seule fois dans un document HTML.
<map>...</map> : La balise <map> est utilisée pour créer une carte-image. Elle est utilisée avec la balise <area> qui délimite les zones cliquables de la carte-image.
<mark>...</mark> : La balise <mark> permet de mettre en évidence une partie d'un texte dans un document HTML. Dans le navigateur, le texte contenu dans la balise <mark> apparaît surligné.
<meta> : La balise <meta>, qui est toujours imbriquée dans la balise <head>, permet de spécifier les métadonnées, qui fournissent aux navigateurs et aux moteurs de recherche des informations sur le document HTML. Ces métadonnées peuvent être l'encodage du document, les données sur l’auteur, les mots-clés, la description de la page, etc. Les métadonnées ne s'affichent pas dans la page web.
<meter>...</meter> : La balise <meter> permet de définir une valeur scalaire dans une plage donnée ou une représentation graphique d'un nombre fractionnaire.
<nav>...</nav> : La balise <nav> est utilisée (mais pas obligatoirement) pour créer un ensemble de liens de navigation, communément appelé barre de navigation. Un seul document HTML peut contenir plusieurs balises <nav> pour naviguer soit sur le site, soit dans la page web actuelle.
<noscript>...</noscript> : La balise <noscript> permet de définir un contenu alternatif à afficher pour les utilisateurs qui ont désactivé l'usage de scripts dans leur navigateur ou dont le navigateur ne prend pas en charge les scripts. Elle peut être incluse aussi bien dans la balise <head> que dans la balise <body>. Si incluse dans la balise <head>, la balise <noscript> ne peut contenir que les balises <link>, <style> et <meta>.
<object>...</object> : La balise <object> permet de définir un conteneur pour une ressource externe. La ressource externe peut être une page web, une image, un lecteur multimédia ou un plug-in.
<ol>...</ol> : La balise <ol> permet de créer une liste ordonnée ou numérotée. La balise <li> est utilisée pour definir chaque élément de la liste.
<optgroup>...</optgroup> : La balise <optgroup> est utilisée pour regrouper des options associées dans une liste déroulante (<select>).
<option>...</option> : La balise <option> permet de spécifier les éléments d'une liste déroulante. Elle peut être imbriquée dans les balises <select>, <datalist> ou <optgroup>.
<output>...</output> : La balise <output> est utilisée pour représenter le résultat d'un calcul, comme celui effectué par un script.
<p>...</p> : La balise <p> est utilisée pour définir un paragraphe dans un document HTML.
<param>...</param> : La balise <param> est utilisée pour définir les paramètres d'un élément <object> ou <applet>. Elle peut également être utilisée pour définir les paramètres de fichiers audio (<audio>) et vidéo (<video>).
<picture>....</picture> : La balise <picture> est utilisée pour stocker un ou plusieurs éléments <source> et une balise <img>.
<pre>...</pre> : La balise <pre> est utilisée pour insérer du texte préformaté dans un document HTML. Tous les espaces et les sauts de ligne inclus dans le texte sont conservés.
<progress>...</progress> : La balise <progress> est utilisée pour créer une barre de progression.
<q>...</q> : La balise <q> est utilisée pour définir des citations courtes dont le texte tient sur un paragraphe. Par défaut, le texte contenu dans la balise <q> s'affiche entre guillemets dans le navigateur.
<rp>...</rp> : La balise <rp> est utilisée pour spécifier un texte alternatif, qui sera affiché dans un navigateur qui ne supporte pas la balise <ruby>.
<rt>...</rt> : La balise <rt> est utilisée pour ajouter des annotations au-dessus et/ou en dessous du texte contenu dans la balise <ruby>.
<ruby>...</ruby> : La balise <ruby> est utilisée pour définir des indices phonétiques en japonais et les langues d’Asie de l’Est. L'annotation, qui est affichée en petits caractères au-dessus du texte principal se trouve dans la balise <rt>.
<s>...</s> : La balise <s> est utilisée pour spécifier un texte qui n'est plus correct, précis ou pertinent. Le texte contenu dans la balise <s> sera affiché par le navigateur comme un texte barré.
<samp>...</samp> : La balise <samp> est utilisée pour afficher le résultat de sortie d'un programme informatique ou d'un script. Dans le navigateur, le contenu de la balise <samp> est affiché par défaut dans la police monospace.
<script>...</script> : La balise <script> est utilisée pour insérer du code JavaScript dans un document HTML. Elle peut être insérée aussi bien dans la balise <head> que dans la balise <body>.
<section>...</section> : La balise <section> est utilisée pour créer une section ou un bloc contenant des éléments logiquement liés.
<select>...</select> : La balise <select> est utilisée pour créer une liste déroulante. Les éléments de cette liste sont définis par la balise <option>.
<small>...</small> : La balise <small> est utilisée pour réduire la taille du texte qui y est inclus.
<source> : La balise <source> permet de spécifier plusieurs fichiers multimédias (vidéo, audio ou image) alternatifs dans différents formats, parmi lesquels le navigateur peut choisir, en fonction de la prise en charge du navigateur ou de la largeur de la fenêtre d'affichage.
<span>...</span> : La balise <span> est généralement utilisée pour sélectionner une partie d'un texte qui sera mis en forme (avec du CSS) ou manipulé avec du JavaScript à l'aide de l'attribut class ou id.
<strong>...</strong> : La balise <strong> est utilisée pour spécifier un fragment de texte important. Par défaut, le texte contenu dans la balise <strong> s'affiche en gras dans le navigateur.
<style>...</style> : La balise <style> est utilsée pour insérer du code CSS dans un document HTML. Ce code définit comment chaque élément sera affiché dans le navigateur.
<sub>...</sub> : La balise <sub> est utilisée pour définir un texte en indice. Le texte en indice apparaît légèrement en bas à droite d'un caractère.
<summary>...</summary> : La balise <summary> est utilisée pour définir le titre visible d'un élément <details>. En cliquant sur ce titre, l'utilisateur peut afficher ou masquer le contenu de la balise <details>.
<sup>...</sup> : La balise <sup> est utilisée pour définir un texte en exposant. Le texte en exposant apparaît légèrement en haut à droite d'un caractère.
<svg>...</svg> : La balise <svg> est utilisée pour définir un conteneur pour stocker des graphiques SVG. SVG est l'acronyme de Scalable Vector Graphics. Il s'agit d'un langage de balisage étendu à partir du XML pour décrire des graphiques vectoriels en deux dimensions.
<table>...</table> : La balise <table> est utilisée pour créer un tableau HTML.
<tbody>...</tbody> : La balise <tbody> est utilisée pour définir le contenu (corps) d'un tableau HTML. Elle est conjointement utilisée avec les balises <thead> et <tfoot>.
<td>...</td> : La balise <td> est utilisée pour définir une cellule de donnée d'un tableau HTML.
<template>...</template> : La balise <template> est utilisée pour créer un conteneur pour stocker du code HTML pouvant être réutilisé dans un document à l'aide de scripts JavaScript.
<textarea>...</textarea> : La balise <textarea> est utilisée pour définir un champ de saisie de texte multiligne.
<tfoot>...</tfoot> : La balise <tfoot> est utilisée pour définir le pied de page d'un tableau HTML. Elle est conjointement utilisée avec les balises <thead> et <tbody>.
<th>...</th> : La balise <th> est utilisée pour définir une cellule d'en-tête d'un tableau HTML.
<thead>...</thead> : La balise <thead> est utilisée pour définir l'en-tête d'un tableau HTML. Elle est conjointement utilisée avec les balises <tfoot> et <tbody>.
<time>...</time> : La balise <time> est utilisée pour définir une heure (au format 24 heures) et/ou une date.
<title>...</title> : La balise <title> est utilisée pour définir le titre d'un document HTML. Ce titre est généralement affiché dans la barre de titre et ou dans l'onglet du navigateur.
<tr>...</tr> : La balise <tr> est utilisée pour définir des lignes dans un tableau HTML.
<track> : La balise <track> est utilisée pour spécifier une piste de texte pour les éléments multimédias <audio> et <video>, qui contient généralement des sous-titres dans différentes langues, des commentaires, des rubriques, etc.
<u>...</u> : La balise <u> est utilisée pour représenter du texte qui n'est pas articulé et dont le style diffère du texte normal, comme des mots mal orthographiés, des mots qui doivent être soulignés par les règles de la langue (par exemple, en chinois, les noms propres sont soulignés), etc.
<ul>...</ul> : La balise <ul> permet de créer des listes à puces ou non ordonnées. La balise <li> est utilisée pour definir chaque élément de la liste.
<var>...</var> : La balise <var> est utilisée pour définir des valeurs mathématiques et/ou variables. Le contenu de la balise <var> est affiché en italique.
<video>...</video> : La balise <video> est utilisée pour insérer des fichiers vidéo dans un document HTML.
<wbr> : La balise <wbr> est utilisée pour indiquer au navigateur où couper un mot dans un texte, pour forcer un retour à la ligne lorsque cela s'avère nécessaire.
Conclusion
Le langage HTML dispose d'une multitude de balises. Les balises listées et décrites ci-dessus sont celles supportées dans la version atuelle du HTML (HTML5). Bien que cette liste ne soit pas exhaustive, il n'est pas nécessaire de mémoriser toutes ces balises pour être capable de créer des pages web, car seulement peu d'entre elles seront généralement utilisées.