HTML : HyperText Markup Language

HTML publié le 3 Juin 2017 mis à jour le 25 Nov 2025 Guillaume

Le langage HTML est un texte descriptif servant à insérer des éléments dans une page web : du texte, des titres, des images, des documents audio et vidéo, etc. Ce langage est le point de départ incontournable pour réaliser des sites.

Les balises : marquage du début et de la fin d'une zone

Lorsque qu'on va se baigner à l'océan, les drapeaux bleus indiquent la zone de baignade autorisée. Ces drapeaux bleus servent à « baliser » une zone.

Le langage HTML s'appuie sur un système de <balises>, mots entourés de symboles < et > servant à marquer le début et la fin d'une zone. Par exemple, pour indiquer une zone de texte, on écrit : <p>Du texte</p>.

Remarque : Certaines balises ne définissent pas de zones, comme la balise <br> qui permet un retour à la ligne. On les appelle balises vides.

Les outils du HTML

Pour créer vos pages HTML, vous avez besoin de 2 outils :

Un éditeur de texte, comme le Bloc-notes de Windows, mais je conseille l'usage d'un éditeur de texte plus élaboré comme Visual Studio Code qui colore et formate le code de manière à identifier plus facilement les erreurs de syntaxe.
Un bon navigateur comme Chrome ou Firefox.

Votre première page web

Avant toute chose, créez tout un dossier de travail nommé, par exemple, HTML.

Dans VS Code :

Ouvrez le dossier de travail HTML.
Créez un nouveau fichier nommé page.html (l'extension .html est primordiale).
Pour générer le modèle de base HTML, tapez ! suivi de la touche Entrée.

Modifiez ensuite le code :

Dans la balise <html>, remplacez en par fr pour indiquer que la page web contiendra du texte français.
Dans la balise <title>, remplacez le mot document par Ma première page.
Dans la balise <body>, écrivez <p>Ma première page</p>.
Enregistrez votre page. Le point blanc sur l'onglet page.html disparait.
Double-cliquez sur l’icône page.html puis admirez votre première page HTML sur votre navigateur.

À la manière d'une partition musicale, le navigateur va déchiffrer et interpréter le code HTML de haut en bas et de gauche à droite. Il est très important d'intégrer cette notion du sens de lecture, car cela nous amène à réfléchir sur l'ordre des balises, et ultérieurement, sur le placement de certains programmes PHP ou JavaScript.

Signification du code HTML

Examinons le code suivant :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma première page</title>
</head>
<body>
    <p>Ma première page</p>
</body>
</html>

<!DOCTYPE html>

Cette balise indique aux navigateurs que la page est au format HTML.

<html lang="fr">

Cette balise unique indique le début du code HTML avec la langue des textes de votre site. Par exemple, mettez "en" pour l'anglais et "fr" pour la langue française.

<head>

Cette balise unique marque le début de la zone d’en-tête, prologue de la page web contenant des informations destinées au navigateur : titre, balises <meta>, liaison CSS et fonctions JavaScript.

<meta charset="UTF-8">

L'encodage UTF-8 permet d'afficher correctement tous les caractères spéciaux comme les accents et les symboles (euro €, copyright ©, etc.). Il permet d'afficher correctement la plupart des langues : latines, arabes, chinoises, etc.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Cette balise rend les pages web adaptatives (responsives) sur les différents écrans (ordinateur, tablette et smartphone). Plus précisément, elle indique de ne pas dézoomer sur les téléphones afin que les textes ne soient pas affichés trop petits.

<title>

Début du titre de la page affiché dans l'onglet du navigateur. Cette balise unique est intégrée à la zone d’en-tête.

<body>

Ceci est le corps de la page. Cette balise unique concerne l’affichage de la page. En général l’essentiel du code se trouve entre <body> et </body>.

<p>

Début d'une zone de texte standard écrit sous forme de paragraphe.

</head>, </body>, </title>, </p>, </html>

Fin des zones précitées.

Majuscules ou minuscules ?

Bien que les codes sources HTML rencontrés sur le web soient traditionnellement écrits en minuscules, le W3C indique que les balises peuvent être écrites aussi bien en majuscules qu'en minuscules.

Modification de la page et actualisation

Revenez à l'éditeur de texte contenant le code source. Modifiez le code en remplaçant <p>Ma première page</p> par <h1>Ma première page</h1>

Enregistrez, puis cliquez sur le bouton Actualiser du navigateur ou touche F5 pour voir les modifications.

Ordre logique de fermeture

Il faut veiller à ce que les balises soient fermées dans l'ordre logique.

<b><i>...</i></b> → correct
<b><i>...</b></i> → incorrect

Vocabulaire

Dans cet exemple :

<a href="fichier.html">Cliquez ici</a>

<a href='fichier.html'> est la balise de début
</a> est la balise de fin
Cliquez ici est le contenu de la balise <a>
href est l’attribut de la balise <a>
fichier.html est la valeur de l’attribut href

Liste des principales balises HTML

Mise en forme du texte

<h1>Titre</h1>
<h2>Sous-titre</h2>
<h6>...</h6>

Titres ou « headings ». Ces balises permettent d’écrire les titres de chapitres dans vos pages web. <h1> écrit très gros, jusqu’à <h6> qui écrit tout petit mais toujours en caractères gras. Ces numéros correspondent à la hiérarchie des titres. <h1> affiche le titre le plus haut dans la hiérarchie.

<p>...</p>

Paragraphe standard, texte normal, en général suite à un titre.

<br>

Retour à la ligne. A mettre de préférence au sein d'un paragraphe.

<b>...</b> ou <strong>…</strong>

Texte affiché en caractère gras ou texte renforcé.

<i>...</i> ou <em>…</em>

Texte affiché en italique ou texte mis en évidence.

<hr>

Trait horizontal dont la largeur par défaut occupe celle de son conteneur. Balise vide.

Balise structurelles et divisions

<div>...</div>

Marque une zone de division. Cette balise ne fait rien de spécial, à part un saut de ligne. Elle est en revanche très utile pour les mises en forme avec les CSS.

<span>...</span>

Marque une sous division, sans saut de ligne. Cette balise ne fait strictement rien, à part marquer une zone, pour permettre une mise en forme spécifique avec les CSS.

<nav>...</nav>

Marque la zone de navigation en HTML5, c’est-à-dire le menu d’un site contenant les liens vers les autres pages.

<header>...</header>

Marque la zone d’entête d’une page ou d’un article dans une page.

<main>...</main>

Marque le contenu principal d'une page qui se situe entre le header et le footer.

<article>...</article>

Marque une zone d’article dans une page de type blog.

<footer>...</footer>

Marque la zone de pied de page d’une page ou d’un article dans une page.

Exemple de structure d'une page en HTML5 :

Listes non numérotées à puces et éléments de liste

<ul>
 <li>Des tomates</li>
 <li>Des carottes</li>
</ul>

Listes numérotées et éléments de liste

<ol>
 <li>Des tomates</li>
 <li>Des carottes</li>
</ol>

Liens

<a href="fichier.html">Cliquez ici</a>

Lien vers la page locale fichier.html située dans le même dossier.

<a href="https://www.lemonde.fr">Journal Le Monde</a>

Lien vers une page web.

<a href="mailto:jean.dupont@free.fr">Contactez-moi</a>

Lien vers une adresse mail. Ce type de lien communément appelé mailto chargera le client mail par défaut de votre système d'exploitation : Outlook, Thunderbird, etc.

<a href="fichier.html" target="_blank">Cliquez ici</a>

target='_self' (valeur par défaut) Affichage de la cible du lien dans la même fenêtre.
target='_blank' Affichage de la cible du lien dans un nouvel onglet du navigateur.

Remarque : La tradition veut qu'un lien externe à votre site s'ouvre dans un nouvel onglet.

<h1 id="chapitre5">Chapitre 5</h1>

Définition d'une ancre avec l'attribut id. Une ancre permet de faire un lien interne dans une longue page de texte par exemple.

<a href="#chapitre5">Chapitre 5</a>

Lien vers une ancre à l’intérieur de la page.

<a href="fichier.html#chapitre5">Chapitre 5</a>

Lien vers une ancre dans une autre page HTML.

Images

<img src="chateau.webp" alt="Château de Duras">
<img src="chateau.jpg" alt="Château de Duras">
<img src="chateau.png" alt="Château de Duras">

Insertion d'une image au format webp, jpg ou png. Le texte alternatif précisé dans l'attribut alt permet de rendre l'image accessible aux malvoyants. L'attribut alt des images est également utilisé par les moteurs de recherche pour le référencement de votre site.

Voici un tableau concernant les principaux formats d'images gérés par les navigateurs :

Format / extension	Caractéristiques	Licence	Compression
gif	Limité à 256 couleurs, permet des animations, une couleur transparente. Utilisé pour logo et dessins.	Licence commerciale. Développé par Compuserve	Compression sans perte excellente pour les images qui ont peu de couleurs.
jpg	16 millions de couleurs. Utilisé pour les photos.	Licence commerciale. Développé par le Joint Photographic Experts Group et IBM	Compression avec perte, meilleur gain que le gif avec beaucoup de couleurs.
png	16 millions de couleurs. 256 nuances de transparence. Existe en 256 couleurs indexées.	Format ouvert. Développé par W3C	Compression sans perte. Fichier volumineux mais qualité maximum.
webp	16 millions de couleurs. 256 nuances de transparence. Permet les couleurs indexées et les animations.	Format ouvert. Développé par Google Corp.	Compression avec ou sans perte. Gain de 30% à 40% par rapport au PNG et JPG.

Audio

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

Permet de lire un fichier audio avec les boutons de contrôle.

<audio src="bagdadcafe.mp3" autoplay> </audio>

Lire un fichier audio automatiquement au chargement de la page.

Format / extension	Navigateurs	Licence	Compression
mp3	tous	Licence commerciale à Philips, France Telecom, Fraunhofer	Compressé. Musique de 3 minutes qualité CD : 6 Mo
ogg	Firefox, Opera, Safari, Chrome	Développé par Xiph, format ouvert dégagé de tout brevet	Compressé. Musique de 3 minutes qualité CD : 5 Mo
wav	Tous	Format ouvert développé par Microsoft	Non compressé. Musique de 3 minutes qualité CD : 40 Mo

Vidéo

<video src="bagdadcafe.mp4" controls> </video>

Permet de lire un fichier video avec les boutons de contrôle.

<video src="bagdadcafe.mp4" controls poster="apercu.jpg"> </video>

L’attribut poster permet de choisir une image représentative de la vidéo.

A l’instar des fichiers audio, certains formats ne sont lisibles que par certains navigateurs :

Format / extension	Navigateurs	Licence
H.264 / .mp4	Tous	Développé par les groupes Video Coding Experts Group (VCEG) et Moving Picture Experts Group (MPEG), utilisation soumise à licence
Ogg Theora et Vorbis / .ogv	Firefox, Opera, Chrome	Développé par l'organisation Xiph, format ouvert
WebM VP8 / .webm	Tous	Développé par Google Corp., format ouvert

Les tableaux

<table> ... </table>

Début et fin d'un tableau contenant des lignes et des colonnes.

<tr> ... </tr>

Création d'une ligne d'un tableau (table row).

<td> ... </td>

Création d'une cellule d'un tableau (table data). Les cellules s'inscrivent obligatoirement dans une ligne.

<th> ... </th>

Création d'un entête de ligne ou de colonne dans un tableau (table header). Les textes s'écrivent en gras.

    <table>
        <tr>
            <th>Nom</th>
            <th>Prénom</th>
            <th>Téléphone</th>
        </tr>
        <tr>
            <td>Durand</td>
            <td>Marcel</td>
            <td>05 56 56 56 56</td>
        </tr>
        <tr>
            <td>Johansson</td>
            <td>Sylvie</td>
            <td>05 57 57 57 57</td>
        </tr>
        <tr>
            <td>Redford</td>
            <td>Guillaume</td>
            <td>01 01 01 01 01</td>
        </tr>
    </table>

Si la manipulation des balises de tableau vous fait des nœuds au cerveau vous pouvez vous aider d'un générateur : https://divtable.com/generator/