Apprendre HTML : guide complet pour construire une page web propre et bien structurée
Un tutoriel complet pour comprendre HTML, construire une page web de zéro, utiliser les bonnes balises, organiser le contenu et écrire un document sémantique et accessible.
Apprendre HTML
Introduction
HTML est la base de presque toutes les pages web.
Si vous souhaitez créer un site propre, lisible et bien structuré, vous devez d'abord comprendre comment fonctionne HTML. C'est lui qui décrit le contenu de la page : titres, paragraphes, images, liens, formulaires, tableaux et bien plus encore.
Contrairement à ce que beaucoup imaginent, HTML n'est pas un langage de programmation. Il ne sert pas à écrire de la logique. Il sert à structurer l'information pour que le navigateur puisse l'afficher correctement.
Dans ce chapitre, nous allons construire une vision claire de HTML, puis avancer pas à pas jusqu'à une page complète et bien organisée.
Ce que vous allez apprendre
À la fin de ce tutoriel, vous saurez :
- comprendre le rôle exact de HTML ;
- écrire une structure de page correcte ;
- utiliser les balises principales ;
- organiser du contenu avec des titres, paragraphes, listes, liens, images et tableaux ;
- créer un formulaire simple ;
- distinguer les balises sémantiques importantes ;
- éviter les erreurs les plus fréquentes ;
- construire une page HTML propre et lisible.
1. HTML, c'est quoi exactement ?
HTML signifie HyperText Markup Language.
Ce nom peut sembler impressionnant, mais l'idée est simple : HTML permet de baliser le contenu d'un document.
HyperText
Le mot hypertexte fait référence au fait que les documents peuvent être reliés entre eux par des liens.
Markup
Le balisage consiste à entourer le contenu de balises pour lui donner du sens.
Language
HTML est un langage de description de contenu, pas un langage de calcul.
Ce qu'HTML fait vraiment
HTML dit par exemple :
- ceci est un titre ;
- ceci est un paragraphe ;
- ceci est une image ;
- ceci est un lien ;
- ceci est un formulaire.
Le navigateur lit cette structure et construit la page à afficher.
2. La structure de base d'un document HTML
Tout document HTML sérieux commence par une structure minimale.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon premier site</title>
</head>
<body>
<h1>Bienvenue</h1>
<p>Voici ma première page HTML.</p>
</body>
</html>
Le rôle de chaque partie
<!DOCTYPE html>
Cette ligne indique au navigateur que le document utilise le standard HTML5.
<html>
La balise html contient l'ensemble de la page.
L'attribut lang="fr" indique que la langue principale du document est le français.
<head>
La section head contient les informations techniques de la page :
- le jeu de caractères ;
- le titre de la page ;
- les métadonnées ;
- les liens vers des fichiers externes.
<body>
La section body contient tout ce que l'utilisateur voit réellement à l'écran.
3. Les balises, les attributs et le contenu
HTML repose sur trois notions simples :
- les balises ;
- les attributs ;
- le contenu.
Les balises
Une balise encadre un élément HTML.
Exemple :
<p>Un paragraphe</p>
Ici, <p> ouvre le paragraphe et </p> le ferme.
Les attributs
Les attributs ajoutent des informations à une balise.
Exemple :
<a href="https://example.com">Visiter le site</a>
Ici, href indique l'adresse de destination du lien.
Le contenu
Le contenu est le texte ou l'élément placé entre la balise ouvrante et la balise fermante.
4. Les titres et les paragraphes
Les titres structurent le contenu d'une page.
HTML propose six niveaux de titres : h1 à h6.
<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Section plus précise</h3>
Bonne pratique importante
Il est préférable d'avoir un seul h1 principal par page, puis d'organiser le reste avec h2, h3, etc.
Les paragraphes, eux, s'écrivent avec la balise p.
<p>HTML permet de structurer le contenu d'une page web.</p>
5. Les textes enrichis
HTML permet aussi de mettre en valeur certaines parties du texte.
Mettre en évidence
<p>Ce mot est <strong>important</strong>.</p>
Marquer une emphase
<p>Il faut <em>bien comprendre</em> la structure du document.</p>
Sauter une ligne
<p>Première ligne<br>Deuxième ligne</p>
Attention : br sert à faire une coupure de ligne ponctuelle, pas à construire la mise en page complète.
6. Les liens
Les liens permettent de naviguer d'une page à une autre.
<a href="https://developer.mozilla.org">Consulter la documentation</a>
Lien vers une autre page du site
<a href="about.html">À propos</a>
Lien interne sur la page
<a href="#contact">Aller au contact</a>
<section id="contact">
<h2>Contact</h2>
</section>
Bonnes pratiques pour les liens
- le texte du lien doit être clair ;
- évitez les liens vagues comme "cliquez ici" ;
- indiquez la destination quand c'est utile.
7. Les images
Une image s'insère avec la balise img.
<img src="photo.jpg" alt="Portrait de Corneille">
Les attributs les plus importants
src: le chemin vers le fichier image ;alt: le texte alternatif ;widthetheight: les dimensions ;loading="lazy": le chargement différé si nécessaire.
Comprendre le chemin dans src
Le mot src signifie source. Il indique au navigateur où trouver le fichier image.
Quand vous écrivez src="photo.jpg", vous dites au navigateur : "cherche le fichier photo.jpg à l'endroit indiqué par ce chemin".
Il existe plusieurs cas fréquents.
1. Le fichier est dans le même dossier
<img src="photo.jpg" alt="Portrait de Corneille">
Ici, l'image se trouve au même niveau que la page HTML.
2. Le fichier est dans un dossier
<img src="images/photo.jpg" alt="Portrait de Corneille">
Ici, le navigateur va chercher l'image dans le dossier images.
3. Le fichier est dans un dossier parent
<img src="../photo.jpg" alt="Portrait de Corneille">
Le .. signifie "remonter d'un dossier".
Cette syntaxe est utile quand votre fichier HTML se trouve dans un sous-dossier.
Chemin relatif ou chemin absolu
Le plus souvent, dans un projet web, on utilise des chemins relatifs.
- Un chemin relatif dépend de l'emplacement du fichier HTML.
- Un chemin absolu pointe vers une adresse complète ou vers une racine précise du site.
Exemple de chemin relatif :
<img src="images/photo.jpg" alt="Portrait de Corneille">
Exemple de chemin absolu sur un site :
<img src="/images/photo.jpg" alt="Portrait de Corneille">
Le / au début indique souvent la racine du site.
Erreurs fréquentes avec src
- oublier le bon dossier ;
- se tromper dans le nom du fichier ;
- utiliser une mauvaise extension, par exemple
.jpgau lieu de.png; - oublier que les majuscules et les minuscules peuvent compter selon l'environnement.
Bon réflexe
Si une image ne s'affiche pas, vérifiez dans cet ordre :
- le nom du fichier ;
- l'extension du fichier ;
- le dossier indiqué dans
src; - la casse du nom ;
- l'emplacement réel du fichier.
Pourquoi alt est essentiel
Le texte alternatif décrit l'image pour les lecteurs d'écran et pour les cas où l'image ne peut pas s'afficher.
Un bon alt améliore à la fois l'accessibilité et la compréhension du contenu.
8. Les listes
Les listes sont très utiles pour organiser des informations.
Liste non ordonnée
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Liste ordonnée
<ol>
<li>Créer le fichier HTML</li>
<li>Écrire la structure de base</li>
<li>Ajouter le contenu</li>
</ol>
Liste de définitions
<dl>
<dt>HTML</dt>
<dd>Langage de balisage pour structurer le contenu.</dd>
</dl>
9. Les sections sémantiques
La sémantique consiste à choisir les bonnes balises pour décrire correctement le contenu.
C'est très important pour :
- la lisibilité du code ;
- l'accessibilité ;
- le référencement ;
- la maintenance du projet.
Les balises sémantiques principales
header: en-tête de page ou de section ;nav: navigation ;main: contenu principal ;section: section thématique ;article: contenu autonome ;aside: contenu complémentaire ;footer: pied de page.
Exemple de structure sémantique
<body>
<header>
<h1>Mon site</h1>
<nav>
<a href="/">Accueil</a>
<a href="/blog">Blog</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Premier article</h2>
<p>Voici le contenu de l'article.</p>
</article>
</main>
<footer>
<p>© 2026 Mon site</p>
</footer>
</body>
Pourquoi cette structure est meilleure
Un navigateur, un moteur de recherche ou un lecteur d'écran comprend plus facilement la fonction de chaque bloc.
10. Les tableaux
Les tableaux servent à afficher des données organisées en lignes et en colonnes.
<table>
<thead>
<tr>
<th>Langage</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<td>CSS</td>
<td>Style</td>
</tr>
</tbody>
</table>
Règle importante
N'utilisez pas un tableau pour faire de la mise en page. Les tableaux servent aux données tabulaires, pas à la disposition visuelle.
11. Les formulaires
Les formulaires permettent de collecter des informations auprès de l'utilisateur.
<form>
<label for="name">Nom</label>
<input type="text" id="name" name="name">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<button type="submit">Envoyer</button>
</form>
Les éléments de base
form: le conteneur du formulaire ;label: le texte associé à un champ ;input: le champ de saisie ;button: le bouton d'action.
Pourquoi label est important
Un label améliore la lisibilité et l'accessibilité. Il permet d'indiquer clairement à quoi sert chaque champ.
Quelques types de champs utiles
text;email;password;number;checkbox;radio;date.
12. Les métadonnées utiles dans le head
La section head n'est pas visible directement, mais elle est très importante.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site</title>
<meta name="description" content="Une page d'exemple en HTML.">
</head>
meta charset="UTF-8"
Cette ligne définit l'encodage des caractères.
meta viewport
Elle aide à rendre la page adaptée aux écrans mobiles.
title
Le titre apparaît dans l'onglet du navigateur.
description
La description aide au référencement et peut être utilisée par les moteurs de recherche.
13. Accessibilité : écrire du HTML pour tous
Un bon HTML ne doit pas seulement être beau. Il doit être compréhensible pour tous les utilisateurs.
Quelques règles simples
- utiliser les titres dans le bon ordre ;
- écrire des textes de lien clairs ;
- remplir les attributs
alt; - associer chaque champ de formulaire à un
label; - utiliser des balises sémantiques ;
- éviter de tout construire avec des
divinutiles.
Pourquoi c'est important
L'accessibilité améliore l'expérience pour les lecteurs d'écran, mais aussi pour les moteurs de recherche et pour la maintenance globale du site.
14. Construire une page complète
Voici un exemple de page HTML plus réaliste.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon portfolio</title>
<meta name="description" content="Page de présentation personnelle.">
</head>
<body>
<header>
<h1>Corneille</h1>
<nav>
<a href="#apropos">À propos</a>
<a href="#projets">Projets</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="apropos">
<h2>À propos</h2>
<p>Je développe des sites web et des applications modernes.</p>
</section>
<section id="projets">
<h2>Projets</h2>
<ul>
<li>Portfolio personnel</li>
<li>Application de gestion</li>
<li>Blog technique</li>
</ul>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Envoyer</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Corneille</p>
</footer>
</body>
</html>
Cette structure montre bien comment organiser une page cohérente : en-tête, contenu principal et pied de page.
15. Les erreurs fréquentes
Oublier de fermer une balise
Incorrect :
<p>Un texte
Correct :
<p>Un texte</p>
Mauvais emboîtement
Incorrect :
<p><strong>Texte</p></strong>
Correct :
<p><strong>Texte</strong></p>
Utiliser une balise sans comprendre son rôle
Ne choisissez pas une balise seulement parce qu'elle "marche". Choisissez-la parce qu'elle décrit correctement le contenu.
Oublier alt sur les images
Une image sans alt est souvent une mauvaise pratique, surtout si elle transmet une information utile.
16. Bonnes pratiques à retenir
- garder une structure simple et logique ;
- utiliser les titres dans le bon ordre ;
- préférer les balises sémantiques aux
divpartout ; - écrire des attributs clairs ;
- éviter de mélanger contenu, style et comportement ;
- valider votre HTML quand c'est possible.
17. Résumé
Dans ce tutoriel, nous avons vu :
- ce qu'est HTML ;
- la structure de base d'un document ;
- les balises essentielles ;
- les liens, images, listes, tableaux et formulaires ;
- la sémantique ;
- l'accessibilité ;
- les bonnes pratiques pour créer une page propre.
HTML est la fondation d'un site web bien construit. Plus votre structure est claire, plus le reste du projet sera facile à maintenir.
Exercices
Exercice 1
Créez une page avec un titre principal, un paragraphe d'introduction et un sous-titre.
Exercice 2
Ajoutez une liste de trois éléments présentant vos technologies préférées.
Exercice 3
Créez un lien vers un autre site de votre choix.
Exercice 4
Ajoutez une image avec un attribut alt descriptif.
Exercice 5
Créez un petit formulaire avec un champ nom et un bouton d'envoi.
Corrigés
Correction exercice 1
<h1>Bienvenue sur mon site</h1>
<p>Voici ma première page HTML.</p>
<h2>Présentation</h2>
Correction exercice 2
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Correction exercice 3
<a href="https://developer.mozilla.org">Documentation MDN</a>
Correction exercice 4
<img src="photo.jpg" alt="Portrait de Corneille">
Correction exercice 5
<form>
<label for="name">Nom</label>
<input type="text" id="name" name="name">
<button type="submit">Envoyer</button>
</form>
Prochaine étape
Une fois HTML bien compris, la suite logique est d'apprendre CSS pour mettre en forme la page, puis JavaScript pour ajouter de l'interactivité.