Que vous soyez développeurs, autodidactes ou encore étudiants en informatique, vous voulez connaître toutes les balises HTML ? Vous voulez aussi savoir ce que représente chacune des balises ? Vous vous demandez comment créer votre site web en HTML avec les balises ? Ne cherchez plus, ici vous trouverez la solution à toutes vos questions. Vous allez rapidement comprendre qu’il n’y a rien de plus simple que les balises et qu’une bonne maîtrise de ces dernières est de toute façon impérative. En effet, c’est en connaissant toutes les balises en HTML, ou tout au moins une grande majorité d’entre elles, que vous saurez coder n’importe quelle page web sans difficultés. Ne tardez plus et découvrez vite la liste des balises en HTML. Mais avant d’en arriver là, commençons par un petit rappel de la signification du HTML.
Définition de HTML (HyperText Markup Language)
Qu’est-ce que le HTML ? Avant de voir plus en détail toutes les balises qui vont structurer chacune de vos pages web selon vos besoins, rappelons brièvement ce qu’est le HTML — ou HyperText Markup Language, dans sa version longue.
Le HTML est un langage informatique de balisage qui permet de structurer le contenu d’une page web. Il ne s’agit pas d’un langage de programmation à proprement parler (comme JavaScript ou Python), mais bien d’un langage de description : il indique aux navigateurs comment organiser et afficher les différents éléments d’une page — texte, images, liens, titres, tableaux, formulaires, etc.
Historiquement, HTML a été conçu au tout début des années 1990 par le chercheur britannique Tim Berners-Lee, alors ingénieur au CERN (Organisation européenne pour la recherche nucléaire). En 1989, il imagine le concept de « web » tel que nous le connaissons, et crée en 1991 la toute première version publique du HTML : elle contenait alors une vingtaine de balises seulement.
C’est en 1993 que le HTML devient officiellement une spécification reconnue, avec la publication de la version HTML 1.0. Il évoluera ensuite régulièrement : HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999) jusqu’à une refonte majeure opérée avec HTML5, officialisé par le W3C (World Wide Web Consortium) en 2014. Cette version introduit de nombreuses balises sémantiques modernes (<header>, <section>, <article>, etc.) ainsi qu’un meilleur support pour le multimédia.
HTML est un langage standardisé, ce qui signifie que peu importe le pays ou l’équipe de développement, tout le monde utilise les mêmes règles de syntaxe et les mêmes balises pour coder une page web. Cela garantit une compatibilité maximale entre les différents navigateurs (Chrome, Firefox, Safari, etc.) et plateformes.
Pour toutes celles et tous ceux qui ne feraient pas forcément le lien, il faut bien comprendre que les sites web sont, au fond, un ensemble de pages HTML interconnectées entre elles via des hyperliens (<a href="...">) et accessibles à une même adresse ou nom de domaine.
Les balises en HTML
Pour écrire en langage HTML, on a donc besoin de balises. Qu’est-ce que c’est ? Ce sont les éléments de base pour écrire du HTML. Il en existe plusieurs types que l’internaute ne voit pas forcément de la même manière qu’un développeur 🙂 :
Voici la liste de toutes les balises HTML
Balises de premier niveau
Ces balises sont indispensables pour pouvoir commencer à coder une page web en HTML. Elles vont permettre d’indiquer aux différents navigateurs Web qu’il s’agit de pages en HTML et de séparer l’en-tête du corps de la page.
Tableau des principales balises HTML
Commençons par les principales que l’on rencontre sur le Web :
| Balise | Description / Fonction |
|---|---|
<html> ... </html> |
Encadre l’ensemble du document HTML (contenu visible et invisible). |
<head> ... </head> |
Contient les informations techniques de la page (titre, encodage, liens, scripts, etc.). |
<body> ... </body> |
Contient tout le contenu affiché dans le navigateur (textes, images, vidéos…). |
<link /> |
Lie une feuille de style CSS externe à la page. |
<meta /> |
Ajoute des métadonnées (charset, auteur, description, viewport…). |
<script> ... </script> |
Intègre du code JavaScript à la page. |
<style> ... </style> |
Ajoute du code CSS interne à la page. |
<title> ... </title> |
Définit le titre de la page (visible dans l’onglet du navigateur). |
<abbr> |
Signale une abréviation, avec un attribut title (infobulle). |
<blockquote> |
Insère une citation longue mise en forme distinctement. |
<q> |
Insère une citation courte (entre guillemets automatiquement). |
<cite> |
Indique la source d’une œuvre, d’un événement ou d’une publication. |
<sub> |
Texte en indice (ex : formule chimique). |
<sup> |
Texte en exposant (ex : puissance mathématique). |
<h1> ... <h6> |
Hiérarchie des titres : <h1> étant le plus important. |
<img /> |
Insère une image avec les attributs src (source) et alt (texte alternatif). |
<mark> |
Surligne du texte (mise en évidence). |
<strong> |
Texte important (gras, signification sémantique forte). |
<em> |
Texte à souligner par l’italique (emphase, accentuation). |
<figure> |
Encapsule du contenu comme des images, du code, des graphiques. |
<figcaption> |
Ajoute une légende à une <figure>. |
<audio> ... </audio> |
Permet d’intégrer un lecteur audio. |
<video> ... </video> |
Permet d’intégrer un lecteur vidéo. |
<source> |
Définit les sources pour <audio> ou <video> (formats alternatifs). |
<a> ... </a> |
Crée un lien hypertexte à l’aide de l’attribut href. |
<br /> |
Effectue un simple saut de ligne (sans nouveau paragraphe). |
<p> ... </p> |
Définit un paragraphe de texte. |
<hr /> |
Ajoute une ligne horizontale (séparateur visuel). |
<address> |
Indique les coordonnées de contact d’un auteur ou d’un site. |
<del> |
Indique un contenu supprimé (souvent barré). |
<ins> |
Indique un contenu ajouté (souvent souligné). |
<dfn> |
Balise de définition pour un terme introduit. |
<kbd> |
Utilisé pour représenter une entrée clavier utilisateur. |
<progress> |
Affiche une barre de progression (ex. : chargement). |
<time> |
Indique une date ou une heure (machine-readable). |
<pre> ... </pre> |
Affiche du texte formaté (code, indentation préservée). |
Balises de structuration du texte
Ces balises permettent d’organiser, de mettre en forme et d’enrichir le contenu visible sur une page HTML. Elles servent à structurer des blocs de texte, à insérer des images, des éléments multimédias, ou encore à souligner des portions importantes du contenu.
| Balise | Description / Fonction |
|---|---|
<abbr> |
Indique une abréviation. L’attribut title peut afficher le terme complet au survol. |
<blockquote> |
Utilisée pour une citation longue, souvent indentée visuellement. |
<q> |
Pour les citations courtes. Les navigateurs ajoutent automatiquement des guillemets. |
<cite> |
Utilisée pour indiquer la source d’une œuvre ou d’un auteur (livre, film, article…). |
<sub> |
Texte affiché en indice (ex : H2O). |
<sup> |
Texte en exposant (ex : x2). |
<h1> ... <h6> |
Balises de titre hiérarchisées, du plus important (h1) au moins important (h6). |
<img /> |
Affiche une image. Nécessite l’attribut src (URL) et alt (texte alternatif). |
<mark> |
Met en évidence une portion de texte avec un surlignage. |
<strong> |
Texte à forte importance, souvent affiché en gras. |
<em> |
Texte mis en emphase, affiché en italique. Peut avoir un sens sémantique (voix, accent, etc.). |
<figure> |
Utilisé pour grouper un média (image, graphique, code) avec sa légende. |
<figcaption> |
Contient la légende associée à une balise <figure>. |
<audio> |
Intègre un lecteur audio HTML natif dans la page. |
<video> |
Permet d’intégrer une vidéo HTML5 avec contrôles. |
<source> |
Définit une source alternative pour une balise <audio> ou <video>. |
<a> |
Crée un lien hypertexte vers une URL grâce à l’attribut href. |
<br /> |
Insère un simple retour à la ligne sans créer de nouveau paragraphe. |
<p> |
Définit un paragraphe. Chaque bloc de texte distinct devrait être dans une balise <p>. |
<hr /> |
Insère une ligne de séparation horizontale. Utilisée comme rupture thématique. |
<address> |
Indique les coordonnées d’un auteur ou d’un site (adresse email, postale…). |
<del> |
Marque un texte supprimé. Visuellement barré dans la plupart des navigateurs. |
<ins> |
Marque un texte ajouté (souvent affiché souligné). |
<dfn> |
Signale une définition. Peut être stylisée différemment par le navigateur. |
<kbd> |
Utilisée pour du texte à taper au clavier (ex : raccourcis, commandes terminal). |
<progress> |
Affiche une barre de progression interactive avec une valeur. |
<time> |
Spécifie une date, une heure ou une durée lisible par une machine (utile pour les moteurs). |
<pre> |
Affiche du texte formaté avec espaces, tabulations et sauts de ligne respectés (souvent pour du code). |
Balises de listes
Ces balises permettent de créer des listes structurées dans vos pages HTML. Il en existe trois types : les listes non ordonnées (à puces), les listes ordonnées (numérotées), et les listes de définitions (terme + description).
| Balise | Description / Fonction |
|---|---|
<ul> ... </ul> |
Liste non ordonnée (à puces). Chaque élément est défini par une balise <li>. |
<ol> ... </ol> |
Liste ordonnée (numérotée automatiquement). |
<li> ... </li> |
Élément d’une liste, utilisé à l’intérieur des balises <ul> ou <ol>. |
<dl> ... </dl> |
Liste de définitions. Permet de structurer des paires « terme + définition ». |
<dt> ... </dt> |
Terme défini dans une <dl>. |
<dd> ... </dd> |
Description ou définition du terme introduit par <dt>. |
Balises de tableau
Ces balises permettent de créer des tableaux HTML avec une structure logique en lignes (<tr>) et cellules (<td> pour les données, <th> pour les en-têtes). Utilisées pour présenter des données tabulaires.
| Balise | Description / Fonction |
|---|---|
<table> ... </table> |
Balise principale qui encadre l’ensemble du tableau. |
<caption> ... </caption> |
Titre du tableau. S’affiche généralement au-dessus du tableau. |
<tr> ... </tr> |
Définit une ligne du tableau. |
<th> ... </th> |
Cellule d’en-tête (souvent en gras et centrée). |
<td> ... </td> |
Cellule de données standard. |
<thead> ... </thead> |
Encadre l’en-tête du tableau (lignes de titres). |
<tbody> ... </tbody> |
Encadre le corps principal du tableau (les données). |
<tfoot> ... </tfoot> |
Encadre le pied de tableau (utilisé pour les totaux, remarques, etc.). |
Balises de formulaire
Ces balises permettent de créer des formulaires HTML, par exemple pour un formulaire de contact, d’inscription ou de recherche. Elles sont essentielles pour recueillir des données utilisateurs via des champs de saisie, des listes déroulantes ou des boutons d’envoi.
| Balise | Description / Fonction |
|---|---|
<form> ... </form> |
Encadre tout le formulaire. Utilise les attributs :
|
<fieldset> ... </fieldset> |
Permet de regrouper plusieurs champs dans une même section logique. |
<legend> ... </legend> |
Titre ou légende associée à un <fieldset>. |
<label> ... </label> |
Texte descriptif lié à un champ de formulaire. Peut être associé à un champ via l’attribut for. |
<input /> |
Champ de formulaire à usage unique (texte, bouton radio, case à cocher, bouton, etc.). Nécessite l’attribut type pour définir la nature du champ :
|
<textarea> ... </textarea> |
Zone de saisie multiligne, configurable avec rows et cols. |
<select> ... </select> |
Liste déroulante permettant de choisir une ou plusieurs options. |
<option> ... </option> |
Élément d’une liste déroulante (valeur affichée ou envoyée). |
<optgroup> ... </optgroup> |
Permet de regrouper plusieurs options dans une liste déroulante avec une étiquette commune. |
Balises sectionnantes
Ces balises permettent de structurer les grandes zones d’un site web. Elles donnent un sens sémantique aux différentes parties de la page, ce qui aide aussi bien les développeurs que les moteurs de recherche à comprendre la hiérarchie du contenu.
| Balise | Description / Fonction |
|---|---|
<header> ... </header> |
Représente l’en-tête d’une page ou d’une section. Contient souvent le logo, le titre, le menu principal. |
<nav> ... </nav> |
Zone de navigation principale contenant des liens vers d’autres pages ou sections du site. |
<footer> ... </footer> |
Bas de page ou de section. Contient généralement les mentions légales, informations de contact, copyright, etc. |
<section> ... </section> |
Représente une section thématique du document, souvent avec un titre (<h2>, etc.). |
<article> ... </article> |
Bloc autonome et réutilisable de contenu (ex : un article de blog, une fiche produit, une actualité). |
<aside> ... </aside> |
Contenu complémentaire, souvent sous forme de sidebar (barre latérale), widgets ou encarts. |
Balises génériques
Ces balises n’ont pas de signification sémantique particulière. Elles sont utilisées pour organiser et styliser du contenu à l’aide du CSS.
L’une est de type inline (<span>) et l’autre de type block (<div>).
| Balise | Description / Fonction |
|---|---|
<span> ... </span> |
Balise inline sans signification sémantique. Utilisée pour styliser une portion de texte dans un paragraphe.
|
<div> ... </div> |
Balise block générique, souvent utilisée pour regrouper et structurer des blocs de contenu.
|
Attributs des balises génériques
Les balises génériques comme <div> ou <span> n’ont de réel intérêt que si vous leur associez des attributs. Ces attributs permettent d’identifier, de styliser ou de manipuler les balises avec du CSS ou du JavaScript.
| Attribut | Description / Fonction |
|---|---|
| class | Spécifie une ou plusieurs classes CSS associées à la balise.
|
| id | Attribut unique servant à identifier un élément précis dans la page.
|
| style | Permet d’appliquer directement du CSS en ligne, dans la balise HTML.
|
Testez chacune des balises pour voir le résultat concret. Les balises sont le squelette du HTML. Et bien entendu, sans squelette, rien ne tient et par conséquent la page web s’effondre. Vous ne pourrez jamais faire sans. Faites bien attention à fermer les balises ! En un rien de temps, vous deviendrez un vrai professionnel du développement web en HTML. Il ne vous restera alors plus qu’à maîtriser le CSS pour donner à vos fichiers HTML la forme que vous souhaitez.
Dernier petit conseil pour la route : veillez à bien indenter votre code pour y voir plus clair sinon vous serez vite perdu.
0 commentaires