Apprendre le HTML de A à Z : Le Guide Complet pour Débutants

Auteur : ZMB Stack

Introduction
Bienvenue dans ce guide complet conçu pour vous apprendre le HTML (HyperText Markup Language) depuis
les bases absolues jusqu’aux concepts avancés. Que vous n’ayez jamais écrit une ligne de code ou que vous
cherchiez à consolider vos connaissances, ce document est fait pour vous. Nous allons commencer par préparer
notre environnement de travail avec Visual Studio Code, puis nous plongerons dans la création de pages web
structurées et sémantiques.
Imaginez le HTML comme le squelette ou la charpente d’une maison. Il définit la structure de base : où
se trouvent les murs, les portes, les fenêtres. Sans lui, il n’y a pas de maison ! De la même manière, sans
HTML, il n’y a pas de page web.

Chapitre 1 : Préparation de l’environnement de travail

Avant de commencer à coder, nous avons besoin d’un outil adapté. Nous allons utiliser Visual Studio Code
(VS Code), l’un des éditeurs de code les plus populaires et puissants au monde, développé par Microsoft.

1.1 Téléchargement et Installation de VS Code

1. Téléchargement : Rendez-vous sur le site officiel de Visual Studio Code ([Link]
2. Choix de la version : Cliquez sur le bouton de téléchargement correspondant à votre système
d’exploitation (Windows, macOS ou Linux).
3. Installation (Windows) :
• Double-cliquez sur le fichier .exe téléchargé.
• Acceptez les termes du contrat de licence.
• Important : Laissez les options par défaut, mais assurez-vous de cocher “Ajouter à PATH” si
ce n’est pas déjà fait. Cela permet d’ouvrir VS Code depuis n’importe quel dossier via la ligne de
commande, ce qui est très pratique.
• Cochez également les options “Créer un raccourci sur le bureau” et “Ouvrir avec Code” pour les
fichiers et dossiers. Ces options faciliteront grandement votre travail.
• Cliquez sur “Installer” puis sur “Terminer”.
• Astuce : Si vous rencontrez des messages d’alerte de sécurité, confirmez toujours l’installation, car
VS Code est un logiciel sûr et largement utilisé.
4. Installation (macOS) :
• Ouvrez le fichier .zip téléchargé.
• Glissez l’application “Visual Studio Code” dans votre dossier “Applications”.
• Astuce : Vous pouvez ensuite l’épingler à votre Dock pour un accès rapide.
5. Installation (Linux) :
• Téléchargez le package .deb (pour Debian/Ubuntu) ou .rpm (pour Fedora/Red Hat) et installez-le
via votre gestionnaire de paquets (par exemple, sudo dpkg -i code_*.deb pour Debian/Ubuntu).
• Astuce : Après l’installation, vous devriez pouvoir lancer VS Code depuis votre menu d’applications.

1.2 Mettre VS Code en Français

Par défaut, VS Code est en anglais. Voici comment le passer en français :
1. Ouvrez Visual Studio Code.
2. Sur le côté gauche, cliquez sur l’icône des Extensions (ressemble à quatre carrés, ou utilisez le raccourci
Ctrl+Shift+X sur Windows/Linux, Cmd+Shift+X sur Mac).
3. Dans la barre de recherche des extensions, tapez “French Language Pack”.

1
Figure 1: Installation de VS Code

2
 4. Trouvez l’extension officielle de Microsoft nommée “French Language Pack for Visual Studio Code” et
cliquez sur le bouton Install.
5. Une fois l’installation terminée, une notification apparaîtra en bas à droite vous demandant de redémarrer
VS Code pour appliquer la langue. Cliquez sur Change Language and Restart.
• Si la notification n’apparaît pas, vous pouvez ouvrir la Palette de Commandes (Ctrl+Shift+P
ou Cmd+Shift+P), taper Configure Display Language et sélectionner fr.

Figure 2: Mettre VS Code en français

1.3 Créer son premier dossier de projet et fichier HTML

Pour bien s’organiser, il faut créer un dossier qui contiendra tous nos fichiers HTML. C’est une bonne pratique
de toujours travailler dans un dossier de projet.
1. Créez un nouveau dossier sur votre bureau ou dans vos documents (par exemple, nommez-le
“Mon_Premier_Site_HTML”).
2. Dans VS Code, allez dans Fichier > Ouvrir le dossier. . . (ou File > Open Folder...).
3. Sélectionnez le dossier que vous venez de créer et cliquez sur “Sélectionner un dossier”.
4. Le dossier apparaît maintenant dans la barre latérale gauche de VS Code.
5. Créer votre premier fichier HTML :
• Cliquez sur l’icône “Nouveau fichier” (une feuille avec un petit plus) à côté du nom de votre dossier
dans la barre latérale.
• Nommez le fichier [Link] et appuyez sur Entrée. Le nom “[Link]” est une convention
universelle pour la page d’accueil d’un site web.
• Vous êtes maintenant prêt à écrire votre premier code HTML !

3
1.4 Installer l’extension Live Server
Pour voir vos pages HTML prendre vie dans votre navigateur et se mettre à jour automatiquement à chaque
modification, nous allons installer une extension très pratique :
1. Dans VS Code, retournez sur l’icône des Extensions (Ctrl+Shift+X ou Cmd+Shift+X).
2. Dans la barre de recherche, tapez “Live Server”.
3. Trouvez l’extension de Ritwick Dey et cliquez sur Install.
4. Une fois installée, ouvrez votre fichier [Link].
5. Faites un clic droit n’importe où dans le code de votre fichier [Link] et sélectionnez “Open with
Live Server”.
6. Votre page s’ouvrira dans votre navigateur par défaut. Chaque fois que vous enregistrerez votre fichier
HTML (ou CSS/JavaScript plus tard), la page se rafraîchira automatiquement !

Figure 3: Live Server en action

Exercice Pratique - Chapitre 1 : Préparation de l’environnement

Objectif : Vérifier que votre environnement de développement est correctement configuré.
1. Installez VS Code sur votre machine si ce n’est pas déjà fait.
2. Configurez VS Code en français.
3. Créez un dossier nommé mon-projet-html sur votre bureau.
4. Ouvrez ce dossier dans VS Code.
5. Créez un fichier [Link] à l’intérieur de ce dossier.
6. Installez l’extension Live Server.
7. Ouvrez [Link] avec Live Server. Que se passe-t-il ? (Normalement, une page blanche s’affiche
dans votre navigateur).

4
Chapitre 2 : Les Bases du HTML
Le HTML n’est pas un langage de programmation, mais un langage de balisage. Il sert à structurer le
contenu d’une page web (titres, paragraphes, images, liens, etc.).
Pour mieux comprendre, imaginez le HTML comme le squelette de votre page web. Il définit où se trouvent
la tête (le <head>), le corps (le <body>), les titres (<h1>), les paragraphes (<p>), les images (<img>), etc.
C’est la structure fondamentale, sans laquelle rien ne peut être affiché.

2.1 Qu’est-ce qu’une balise HTML ?

Une balise HTML est un mot-clé entouré de chevrons < >. La plupart des balises fonctionnent par paires :
une balise d’ouverture et une balise de fermeture (qui contient un slash /).
Exemple :
<p>Ceci est un paragraphe.</p>
• <p> : Balise d’ouverture. Elle indique le début d’un paragraphe.
• Ceci est un paragraphe. : Le contenu de votre paragraphe.
• </p> : Balise de fermeture. Elle indique la fin du paragraphe.
Certaines balises sont dites “orphelines” ou “auto-fermantes”, elles n’ont pas de balise de fermeture car
elles n’encadrent pas de contenu. Elles servent souvent à insérer un élément unique. Exemple : <img
src="[Link]" alt="Description de l'image"> (pour insérer une image) ou <br> (pour un saut de
ligne).

2.2 La structure de base d’un document HTML

Tout document HTML doit respecter une structure minimale pour être compris par les navigateurs web.
C’est un peu comme la carte d’identité de votre page.
1. Dans VS Code, assurez-vous d’avoir votre fichier [Link] ouvert.
2. Tapez simplement ! (point d’exclamation) puis appuyez sur la touche Tab (ou Entrée). VS Code va
générer automatiquement la structure de base pour vous (c’est une fonctionnalité appelée Emmet).
3. Le code généré ressemblera à ceci :
<!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 Web</title>
</head>
<body>
<h1>Bienvenue sur mon site !</h1>
<p>Ceci est ma toute première page web créée avec ZMB Stack.</p>
</body>
</html>
Explication détaillée de la structure : - <!DOCTYPE html> : C’est la toute première ligne de votre
document. Elle indique au navigateur que vous utilisez la dernière version du HTML, le HTML5. C’est une
déclaration, pas une balise. - <html lang="fr"> : C’est la balise racine, le conteneur principal de toute
votre page HTML. Tout le reste du code HTML se trouve à l’intérieur de cette balise. L’attribut lang="fr"
est important pour l’accessibilité et le référencement, il indique que le contenu de la page est en français.
- <head> : L’en-tête de la page. C’est une section qui contient des informations sur la page elle-même,
mais qui ne sont pas directement visibles par l’utilisateur dans le navigateur. C’est ici que l’on trouve les

5
métadonnées, le titre de l’onglet, les liens vers les fichiers CSS, etc. - <meta charset="UTF-8"> : Cette
balise est cruciale ! Elle définit l’encodage des caractères de votre page. UTF-8 est l’encodage standard qui
permet d’afficher correctement tous les caractères spéciaux, y compris les accents (é, à, ç, ü), les symboles, etc.
Sans elle, vous pourriez voir des caractères étranges à la place de vos accents. - <meta name="viewport"
content="width=device-width, initial-scale=1.0"> : Cette balise est essentielle pour le responsive
design. Elle indique au navigateur comment gérer l’affichage de la page sur différents appareils (ordinateurs,
tablettes, smartphones). width=device-width adapte la largeur de la page à la largeur de l’appareil, et
initial-scale=1.0 définit le niveau de zoom initial. - <title>Mon Premier Site Web</title> : Le texte
à l’intérieur de cette balise est celui qui apparaît dans l’onglet de votre navigateur ou dans les résultats des
moteurs de recherche. C’est très important pour le SEO et l’expérience utilisateur. - <body> : Le corps de
la page. C’est la partie la plus importante pour l’utilisateur, car c’est ici que l’on place tout le contenu
visible de votre page web : les titres, les paragraphes, les images, les liens, les vidéos, etc.

Figure 4: Structure HTML de base

Exercice Pratique - Chapitre 2 : Les Bases du HTML

Objectif : Créer une page HTML simple avec la structure de base et quelques éléments de texte.
1. Dans votre fichier [Link] (créé au chapitre 1), générez la structure de base HTML5 en tapant !
puis Tab.
2. Modifiez le <title> pour qu’il affiche “Ma Première Page HTML - ZMB Stack” dans l’onglet du
navigateur.
3. Dans la balise <body>, ajoutez un titre principal <h1> qui dit “Bienvenue sur ma page personnelle !”.
4. En dessous du titre, ajoutez un paragraphe <p> qui contient une phrase de votre choix, par exemple :
“Je suis en train d’apprendre le HTML et c’est passionnant.”
5. Enregistrez votre fichier et vérifiez le résultat dans votre navigateur via Live Server.

6
Chapitre 3 : Structurer le texte
Maintenant que nous avons notre structure de base, ajoutons du contenu dans la balise <body>. C’est comme
meubler votre maison après avoir construit la charpente.

3.1 Les Titres (Headings)

Le HTML propose 6 niveaux de titres, de <h1> (le plus important) à <h6> (le moins important). Ils sont
utilisés pour organiser le contenu de manière hiérarchique. Imaginez-les comme les titres et sous-titres d’un
livre.
• Il ne doit y avoir qu’un seul <h1> par page, car il représente le titre principal de votre contenu.
• Utilisez les titres de manière logique : <h2> pour les sections principales, <h3> pour les sous-sections, et
ainsi de suite.
<h1>Titre principal de la page (le plus important)</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-sous-titre</h3>
<h4>Encore un niveau de titre</h4>
<h5>Un titre de faible importance</h5>
<h6>Le titre le moins important</h6>

3.2 Les Paragraphes et le formatage

La balise <p> est utilisée pour créer des paragraphes de texte. C’est l’élément de base pour tout bloc de texte.
<p>Voici un premier paragraphe de texte. C'est ici que vous écrirez la majeure partie de votre contenu.<
<p>Voici un second paragraphe, séparé du premier par un espace vertical automatique. Chaque balise p cré
Pour mettre en valeur certains mots à l’intérieur d’un paragraphe, vous pouvez utiliser les balises suivantes :
- <strong> : Met le texte en gras. Cette balise indique une forte importance sémantique au texte qu’elle
contient. Les moteurs de recherche et les lecteurs d’écran y prêtent attention. - <em> : Met le texte en
italique. Cette balise indique une emphase sémantique. Le texte est mis en évidence pour attirer l’attention.
- <br> : Insère un saut de ligne simple. C’est une balise orpheline. Utilisez-la pour passer à la ligne sans
créer un nouveau paragraphe.
<p>Ce texte contient un mot <strong>très important</strong> et un autre en <em>italique</em>. <br>Ceci e

3.3 Les Listes

Les listes sont parfaites pour organiser des informations de manière claire et concise. Il existe deux types
principaux de listes en HTML :
Les listes à puces (non ordonnées) : <ul> (Unordered List) Utilisez-les lorsque l’ordre des éléments
n’a pas d’importance.
<ul>
<li>Pommes</li>
<li>Bananes</li>
<li>Cerises</li>
</ul>
Les listes numérotées (ordonnées) : <ol> (Ordered List) Utilisez-les lorsque l’ordre des éléments est
important (par exemple, des étapes à suivre).
<ol>
<li>Se lever</li>

7
 <li>Prendre un café</li>
<li>Coder en HTML</li>
</ol>
Dans les deux cas, chaque élément de la liste est défini par la balise <li> (List Item).

Figure 5: Exemples de textes et listes

Exercice Pratique - Chapitre 3 : Structurer le texte

Objectif : Utiliser les balises de titres, paragraphes et listes pour organiser du contenu.
1. Dans votre [Link], créez une nouvelle section sous le contenu existant.
2. Ajoutez un titre <h2> “Mes Hobbies”.
3. En dessous, écrivez un paragraphe <p> qui commence par “J’aime beaucoup. . . ” et mettez un mot en
gras et un autre en italique.
4. Créez une liste non ordonnée <ul> de 3 de vos hobbies préférés.
5. Créez une liste ordonnée <ol> de 3 étapes pour réaliser une tâche simple (par exemple, “Préparer un
café”).
6. Enregistrez et vérifiez le rendu dans votre navigateur.

Chapitre 4 : Les Liens et les Images

Un site web sans liens ni images serait bien triste et peu interactif. Voyons comment les intégrer pour rendre
vos pages plus dynamiques.

8
4.1 Les Liens Hypertextes
La balise <a> (Anchor, qui signifie ancre) permet de créer des liens vers d’autres pages de votre site, vers
d’autres sites web, ou même vers des sections spécifiques de la même page. Elle nécessite l’attribut href
(Hypertext Reference) pour indiquer la destination du lien.
<!-- Lien vers un autre site web -->
<a href="[Link] sur Google</a>

<!-- Lien vers une autre page de votre site (assurez-vous que le fichier [Link] existe dans le mêm
<a href="[Link]">Contactez-nous</a>

<!-- Lien vers une section spécifique de la même page (nécessite un id sur l'élément cible, ex: <h2 id="
<a href="#section-titre">Aller à la section Titre</a>
Astuce : Pour ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre du navigateur, ajoutez l’attribut
target="_blank".
<a href="[Link] target="_blank">Aller sur Google (s'ouvre dans un nouvel onglet)</a>

4.2 Les Images

La balise <img> permet d’afficher une image sur votre page web. C’est une balise orpheline (elle n’a pas de
balise de fermeture) car elle n’encadre pas de contenu, elle insère simplement l’image. Elle nécessite deux
attributs obligatoires : - src (source) : Le chemin vers le fichier de l’image. Il peut s’agir d’un chemin
relatif (par exemple, images/[Link] si l’image est dans un dossier images à côté de votre fichier
HTML) ou d’une URL absolue (par exemple, [Link] - alt
(texte alternatif) : Une description textuelle de l’image. Cet attribut est extrêmement important pour
plusieurs raisons : - Accessibilité : Les lecteurs d’écran pour les personnes malvoyantes liront ce texte. -
SEO (référencement) : Les moteurs de recherche utilisent ce texte pour comprendre le contenu de l’image.
- Affichage : Si l’image ne peut pas être chargée (problème de chemin, de connexion), ce texte sera affiché à
la place de l’image.
<img src="[Link]" alt="Une belle photo de paysage de montagnes et un lac reflétant le ciel au lev

Exercice Pratique - Chapitre 4 : Les Liens et les Images

Objectif : Intégrer des liens vers d’autres sites et des images dans votre page.
1. Créez un dossier images à la racine de votre mon-projet-html.
2. Téléchargez une petite image de votre choix (par exemple, une image de chat ou de paysage) et placez-la
dans le dossier images. Renommez-la [Link].
3. Dans votre [Link], sous la section “Mes Hobbies”, ajoutez un titre <h2> “Mes Liens et Images”.
4. Insérez l’image [Link] en utilisant la balise <img>. N’oubliez pas l’attribut alt avec une description
pertinente.
5. Créez un lien <a> vers un site web de votre choix (par exemple, Wikipedia) qui s’ouvre dans un nouvel
onglet.
6. Créez un autre lien <a> vers une page [Link] (que vous créerez vide pour l’instant) dans le
même dossier.
7. Enregistrez et vérifiez le rendu.

Chapitre 5 : Les Tableaux

Les tableaux permettent de présenter des données de manière structurée en lignes et en colonnes. Ils sont
idéaux pour afficher des informations tabulaires (prix, statistiques, horaires).

9
Figure 6: Exemple de lien et image

10
Voici les balises principales pour construire un tableau : - <table> : C’est le conteneur principal qui englobe
tout le tableau. - <thead> : (Table Head) Contient les lignes d’en-tête du tableau. - <tbody> : (Table Body)
Contient les lignes de données du tableau. - <tr> (Table Row) : Définit une ligne complète dans le tableau. -
<th> (Table Header) : Définit une cellule d’en-tête. Le texte à l’intérieur est généralement affiché en gras et
centré par défaut par le navigateur. - <td> (Table Data) : Définit une cellule de données classique. C’est là
que se trouve le contenu réel de votre tableau.
Exemple :
<table border="1">
<thead>
<tr>
<th>Nom</th>
<th>Âge</th>
<th>Ville</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>Paris</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Lyon</td>
</tr>
<tr>
<td>Charlie</td>
<td>28</td>
<td>Marseille</td>
</tr>
</tbody>
</table>
(Note : L’attribut border="1" est utilisé ici directement dans le HTML pour visualiser les bordures du tableau.
Cependant, dans la pratique moderne du développement web, la mise en forme (comme les bordures, les
couleurs, l’espacement) est presque toujours gérée par le CSS pour séparer la structure du style. Nous verrons
le CSS dans un autre guide !)

Exercice Pratique - Chapitre 5 : Les Tableaux

Objectif : Créer un tableau simple pour afficher des données.
1. Dans votre [Link], ajoutez un titre <h2> “Mon Tableau de Contacts”.
2. Créez un tableau <table> avec les en-têtes de colonne suivants : “Prénom”, “Nom”, “Email”.
3. Ajoutez 3 lignes de données avec des informations fictives.
4. Ajoutez l’attribut border="1" à la balise <table> pour visualiser les bordures (juste pour cet exercice).
5. Enregistrez et vérifiez le rendu.

Chapitre 6 : Les Formulaires

Les formulaires sont des éléments interactifs qui permettent aux utilisateurs d’envoyer des données à un
serveur web. C’est ainsi que vous vous connectez, vous inscrivez, laissez un commentaire ou envoyez un

11
Figure 7: Exemple de tableau HTML

12
message sur un site web.
La balise principale est <form>. À l’intérieur, on utilise diverses balises pour créer les champs de saisie, les
boutons, etc.
• <form> : Le conteneur du formulaire. Il possède des attributs importants :
– action : L’URL vers laquelle les données du formulaire seront envoyées (souvent un script côté
serveur, comme [Link]).
– method : La méthode HTTP utilisée pour envoyer les données (GET ou POST). POST est généralement
préféré pour les données sensibles ou volumineuses.
• <label> : Une étiquette descriptive pour un champ de formulaire. Il est crucial de lier une label à son
input correspondant via l’attribut for (dans la label) et l’attribut id (dans l’élément de formulaire).
Cela améliore grandement l’accessibilité.
• <input> : La balise la plus polyvalente pour les champs de saisie. Son comportement change radicalement
en fonction de son attribut type :
– type="text" : Champ de texte simple (pour nom, prénom, etc.).
– type="email" : Champ pour une adresse e-mail (le navigateur peut valider le format).
– type="password" : Champ pour un mot de passe (les caractères sont masqués).
– type="submit" : Crée un bouton pour envoyer le formulaire.
– type="checkbox" : Case à cocher.
– type="radio" : Bouton radio (pour choisir une option parmi plusieurs).
– type="date" : Sélecteur de date.
• <textarea> : Une zone de texte multiligne, idéale pour les messages longs.
• <select> et <option> : Pour créer des listes déroulantes.
• <button> : Un bouton cliquable (peut être de type submit, reset ou button).
Exemple de formulaire de contact basique :
<form action="/[Link]" method="POST">
<!-- Champ texte pour le nom -->
<label for="nom">Votre nom :</label>
<input type="text" id="nom" name="nom" required placeholder="Ex: Jean Dupont">
<br><br>

<!-- Champ email -->

<label for="email">Votre email :</label>
<input type="email" id="email" name="email" required placeholder="Ex: [Link]@[Link]">
<br><br>

<!-- Zone de texte pour le message -->

<label for="message">Votre message :</label>
<textarea id="message" name="message" rows="6" required placeholder="Écrivez votre message ici..."><
<br><br>

<!-- Bouton de soumission -->

<button type="submit">Envoyer mon message</button>
</form>
• placeholder : Texte indicatif qui apparaît dans le champ tant qu’il n’est pas rempli.
• required : Attribut booléen qui rend le champ obligatoire. Le formulaire ne pourra pas être envoyé si
ce champ est vide.

Exercice Pratique - Chapitre 6 : Les Formulaires

Objectif : Créer un formulaire de contact simple.
1. Dans votre [Link], ajoutez un titre <h2> “Contactez-moi”.

13
Figure 8: Exemple de formulaire HTML

14
 2. Créez un formulaire <form> avec les champs suivants :
• Un champ de texte pour le “Nom Complet” (obligatoire).
• Un champ d’email pour l’“Adresse Email” (obligatoire).
• Une zone de texte multiligne pour le “Message” (obligatoire, 5 lignes de hauteur).
• Un bouton “Envoyer”.
3. Assurez-vous d’utiliser les balises <label> correctement liées à leurs champs respectifs.
4. Enregistrez et vérifiez le rendu. Essayez de soumettre le formulaire sans remplir tous les champs pour
voir la validation du navigateur.

Chapitre 7 : La Sémantique HTML5

Le HTML5 a introduit de nouvelles balises dites “sémantiques”. Elles ne changent pas l’apparence visuelle de
votre page (c’est le rôle du CSS), mais elles donnent du sens et une structure logique au contenu. C’est
comme si vous étiquetiez clairement chaque pièce de votre maison (cuisine, salon, chambre) plutôt que de
tout appeler “pièce”.
Pourquoi la sémantique est-elle importante ? - Accessibilité : Les lecteurs d’écran peuvent mieux interpréter
la structure de la page pour les personnes malvoyantes. - SEO (référencement) : Les moteurs de recherche
comprennent mieux le contenu de votre page, ce qui peut améliorer votre classement. - Maintenance :
Votre code est plus facile à lire et à maintenir pour vous et pour d’autres développeurs.
Au lieu d’utiliser des balises génériques <div> (qui signifie “division” et n’a pas de sens sémantique particulier)
partout, on utilise des balises plus spécifiques : - <header> : Représente l’en-tête d’un document ou d’une
section. Il contient généralement le logo, le titre principal du site, et parfois la navigation. - <nav> : Contient
les liens de navigation principaux (le menu) de votre site. - <main> : Représente le contenu principal et
unique du document. Il ne doit y avoir qu’une seule balise <main> par page. - <section> : Représente une
section générique de contenu thématiquement regroupé. Par exemple, une section “À propos de nous” ou
“Nos services”. - <article> : Représente un contenu indépendant et autonome, qui pourrait être distribué ou
réutilisé indépendamment du reste de la page. Parfait pour un article de blog, une actualité, un commentaire
d’utilisateur. - <aside> : Représente un contenu qui est indirectement lié au contenu principal du document,
souvent présenté comme une barre latérale (publicités, liens connexes, biographie de l’auteur). - <footer> :
Représente le pied de page d’un document ou d’une section. Il contient généralement des informations sur
l’auteur, les droits d’auteur, les liens vers les conditions d’utilisation, etc.
Exemple de structure sémantique :
<body>
<header>
<h1>Mon Super Blog</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>

<main>
<section>
<h2>Derniers Articles</h2>
<article>
<h3>Apprendre le HTML</h3>
<p>Le HTML est la base du web. C'est le langage qui permet de structurer le contenu de t
</article>

15
 <article>
<h3>Découvrir le CSS</h3>
<p>Le CSS (Cascading Style Sheets) est le langage qui permet de donner du style à vos pa
</article>
</section>

<aside>
<h3>À propos de l'auteur</h3>
<p>Je suis ZMB Stack, un passionné de développement web qui aime partager ses connaissances.
</aside>
</main>

<footer>
<p>&copy; 2026 ZMB Stack - Tous droits réservés. | <a href="#">Mentions Légales</a></p>
</footer>
</body>

Figure 9: Structure sémantique HTML5

Exercice Pratique - Chapitre 7 : La Sémantique HTML5

Objectif : Restructurer une page simple en utilisant les balises sémantiques de HTML5.
1. Créez un nouveau fichier [Link].
2. Générez la structure de base HTML5.
3. À l’intérieur du <body>, créez la structure suivante en utilisant les balises sémantiques :
• Un <header> avec un <h1> “Mon Site Sémantique” et une <nav> contenant une liste non ordonnée

16
 de 3 liens (Accueil, Services, Contact).
• Une balise <main>.
• À l’intérieur de <main>, une <section> avec un <h2> “Nos Services” et 2 <article> (chacun avec
un <h3> et un <p> décrivant un service).
• Une <aside> avec un <h3> “Publicité” et un <p> “Découvrez nos offres spéciales !”.
• Un <footer> avec un paragraphe de copyright.
4. Enregistrez et ouvrez [Link] avec Live Server. Bien que l’apparence ne change pas
sans CSS, la structure est maintenant sémantiquement correcte.

Chapitre 8 : Erreurs Courantes et Comment les Éviter

En tant que débutant, il est normal de faire des erreurs. L’important est de savoir les identifier et les corriger.
Voici quelques erreurs fréquentes et comment les éviter :
1. Oublier de fermer une balise : C’est l’erreur la plus courante ! Si vous ouvrez un <p>, n’oubliez
jamais son </p>. VS Code vous aide beaucoup avec l’auto-complétion, mais restez vigilant.
• Conséquence : Votre page peut s’afficher de manière inattendue, ou une partie de votre contenu
peut ne pas être formatée correctement.
• Solution : Utilisez l’indentation (les espaces au début des lignes) pour rendre votre code plus
lisible. VS Code a des outils pour formater automatiquement votre code (Shift+Alt+F sur
Windows/Linux, Shift+Option+F sur Mac).
2. Fautes de frappe dans les noms de balises ou d’attributs : Une petite erreur comme <p> au
lieu de <p> peut rendre votre balise inopérante.
• Conséquence : La balise ne sera pas reconnue par le navigateur.
• Solution : L’auto-complétion de VS Code est votre meilleure amie ! Laissez-le vous suggérer les
balises et attributs.
3. Chemins d’images ou de liens incorrects (src, href) : Si votre image ne s’affiche pas ou votre
lien ne fonctionne pas, vérifiez le chemin !
• Conséquence : Une icône d’image cassée s’affiche, ou le lien mène à une page d’erreur 404.
• Solution : Assurez-vous que le chemin est correct par rapport à l’emplacement de votre fichier
HTML. Utilisez des chemins relatifs (images/[Link]) plutôt que des chemins absolus
(C:/Users/MonNom/Desktop/images/[Link]) pour la portabilité de votre projet.
4. Oublier l’attribut alt pour les images : Bien que votre image s’affiche, c’est une erreur d’accessibilité
et de SEO.
• Conséquence : Les personnes malvoyantes ne sauront pas ce que représente l’image, et les moteurs
de recherche auront du mal à l’indexer.
• Solution : Prenez toujours le temps d’écrire une description pertinente pour chaque image.
5. Utiliser le HTML pour la mise en forme (au lieu du CSS) : Par exemple, utiliser l’attribut
border="1" dans <table>.
• Conséquence : Votre code devient difficile à maintenir et à faire évoluer. Le HTML doit se
concentrer sur la structure, le CSS sur le style.
• Solution : Dès que vous apprendrez le CSS, utilisez-le pour tout ce qui concerne l’apparence
visuelle.

Glossaire des Termes Clés

Voici une liste de termes importants que vous avez rencontrés dans ce guide :
• HTML (HyperText Markup Language) : Le langage de balisage standard pour créer des pages
web. Il définit la structure du contenu.
• Balise : Un mot-clé entouré de chevrons (<p>, <img>). Elles sont utilisées pour marquer le début et la
fin d’un élément HTML.

17
 • Attribut : Des informations supplémentaires ajoutées à une balise pour modifier son comportement
ou ses propriétés (ex: href dans <a href="...">, src et alt dans <img src="..." alt="...">).
• Élément HTML : Une balise d’ouverture, son contenu, et sa balise de fermeture (ex: <p>Mon
texte</p>). Une balise orpheline est aussi un élément.
• Navigateur Web : Un logiciel (Chrome, Firefox, Edge, Safari) qui interprète le code HTML (et
CSS/JavaScript) pour afficher les pages web.
• VS Code (Visual Studio Code) : Un éditeur de code gratuit et puissant, très populaire chez les
développeurs web.
• Extension : Un module complémentaire pour VS Code qui ajoute des fonctionnalités (comme le
“French Language Pack” ou “Live Server”).
• Sémantique HTML5 : L’utilisation de balises HTML qui donnent du sens au contenu (<header>,
<nav>, <main>, <article>, <footer>) plutôt que de simples <div>.
• Responsive Design : Une approche de conception web qui vise à rendre les pages web utilisables et
esthétiques sur une grande variété d’appareils (ordinateurs, tablettes, smartphones) en adaptant leur
mise en page.
• SEO (Search Engine Optimization) : L’optimisation pour les moteurs de recherche. L’ensemble
des techniques visant à améliorer la visibilité d’un site web dans les résultats de recherche.

Conclusion
Félicitations ! Vous venez de parcourir les bases essentielles du HTML avec un niveau de détail très élevé. Vous
savez maintenant comment installer et configurer votre environnement de travail avec VS Code, structurer
une page web, ajouter du texte, des images, des liens, des tableaux et des formulaires, tout en respectant la
sémantique moderne du HTML5. Vous êtes également armé pour éviter les erreurs courantes et comprendre
le jargon du développement web.
La prochaine étape logique dans votre apprentissage sera de découvrir le CSS (Cascading Style Sheets),
qui vous permettra de mettre en forme toutes ces balises HTML (couleurs, polices, mise en page, animations)
et de transformer votre “squelette” HTML en une page web magnifique et attrayante.
Continuez à pratiquer, créez vos propres pages, et n’hésitez pas à expérimenter. Le développement web est
une aventure passionnante et votre parcours ne fait que commencer !
ZMB Stack

18