C’est un langage de balisage et non un langage de programmation comme le sont PHP ou JavaScript.
HTML signifie HyperText Markup Language. C’est le langage de base qui dit au navigateur quoi afficher et dans quel ordre. Les balises entre chevrons < > donnent les instructions : <h1> pour un gros titre, <p> pour un paragraphe, <img> pour une image.
Le navigateur lit le code de haut en bas et construit la page visible. HTML ne s’occupe pas des couleurs ou de la mise en page : il définit seulement la structure du contenu.
Table des matières
.
Rôle critique de la balise head et des meta
La balise <head> contient des informations invisibles mais essentielles. Sans elles, ta page risque des problèmes d’affichage, de référencement ou d’accessibilité.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Tutoriel code HTML pour créer ta première page web">
<title>Ma première page HTML</title>
</head>Chaque élément expliqué :
<!DOCTYPE html>: dit au navigateur « c’est du HTML5 moderne »lang="fr": déclare la langue française (lecteurs d’écran + Google)charset="UTF-8": gère les accents éèàùôçviewport: adapte la page aux écrans mobilesdescription: texte affiché sous le titre dans Google (160 caractères max)title: titre de l’onglet navigateur + premier résultat SEO
Sans charset : « Bonjour café » devient « Bonjour café ».
Mise en place de l’environnement de développement
Aucun logiciel complexe requis. Crée un dossier sur ton bureau nommé mes-pages-web.
Éditeurs simples :
- Windows : VS Code, Bloc-notes ou Notepad++
- Mac : TextEdit ou VS Code
- Linux : Gedit
Ouvre l’éditeur. Crée un nouveau fichier. Enregistre immédiatement sous index.html dans ton dossier. L’extension .html est obligatoire.
Comment exécuter du code HTML
- Écris ton code dans le fichier
.html - Sauvegarde avec Ctrl+S
- Double-clic sur le fichier → ouvre dans le navigateur
- Modifie → Ctrl+S → F5 pour rafraîchir
Important : Le HTML s’exécute instantanément sans serveur ni internet.
Comment commenter du code HTML ?
Les commentaires n’apparaissent jamais à l’écran. Ils expliquent ton code pour toi-même ou tes collaborateurs.
<!-- Ceci est un commentaire sur une ligne -->
<!--
Commentaire
sur plusieurs
lignes
pour expliquer
une section complexe
-->Raccourcis : Ctrl+/ dans la plupart des éditeurs pour commenter/décommenter un bloc.
Ta première page en 3 étapes
Étape 1 : Le code minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde !</h1>
<p>Ma première page HTML fonctionne !</p>
</body>
</html>Étape 2 : Sauvegarde
- Nom :
hello.html - Dossier :
mes-pages-web - Vérifie l’extension
.html
Étape 3 : Double-clic
Ton navigateur affiche un gros titre et un paragraphe. Succès !
Comment voir/copier le code HTML d’une page web
Afficher le code source de la page (Ctrl+U)
Clic droit sur n’importe quelle page → « Afficher/Ctrl+U le code source ». Tu vois tout le HTML de la page.
L’inspecteur d’élément (F12)
Clic droit sur un élément → « Inspecter ». Le navigateur montre l’arbre HTML + possibilité de modifier en direct.
Copier un bout de code :
- F12 → inspecte l’élément
- Clic droit dans le panneau HTML → « Copier » → « Copier l’élément »
Pourquoi mon code HTML ne fonctionne pas ?
Ton code HTML ne fonctionne pas généralement pour 5 raisons principales :
- balise non fermée (
<p>Textesans</p>), - extension
.htmloubliée, - caractère
&non encodé (&), <!DOCTYPE html>manquant en haut,- accents sans
charset="UTF-8"dans<head>.
Valide sur validator.w3.org pour identifier l’erreur exacte.
Validation HTML avec le validator W3C
Outil gratuit : validator.w3.org
3 façons de valider :
- URL : colle l’adresse d’une page web
- Fichier : glisse-dépose ton
hello.html - Code direct : copie-colle ton code
Résultats :
✅ 0 erreur = code parfait
⚠️ Avertissements = améliorations possibles
❌ Erreurs = corrige avant publicationErreur typique : balise <img> sans alt.
Encodage des caractères spéciaux
Certains caractères se confondent avec les balises. Utilise les entités HTML :
| Caractère | Entité | Résultat affiché |
|---|---|---|
| & | & | & |
| < | < | < |
| > | > | > |
| « | " | « |
| ‘ | ' | ‘ |
Exemple :
<p>5 > 3 et 2 < 4</p>
<p>Il a dit "Bonjour"</p>Les différents types de balises HTML
Balises par paire (toujours fermées)
Généralement, ces balises HTML vont avoir un « contenu » comme pour les balises <h1>, <h2>, et ainsi de suite. Ce contenu peut être du texte ou d’autres balises.
<h1>Titre</h1>
<p>Paragraphe</p>
<div>Conteneur</div>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
</ul>Balises auto-fermantes ou orphelines (jamais fermées)
Ces balises servent à ajouter des éléments HTML autonomes, elles n’ont donc pas besoin de balise ouvrante et fermante.
<img src="photo.jpg" alt="Ma photo">
<br> <!-- Saut de ligne -->
<hr> <!-- Ligne horizontale -->
<input type="text">
<meta charset="UTF-8">Balises sémantiques HTML5 (structurent le sens)
Pendant longtemps, les balises <div> et <table> ont été le seul moyen de structurer une page web. Mais le HTML a évolué de façon radical avec l’avénement du HTML5
Ces balises permettent à Google de mieux comprendre la structure ainsi que le contenu de la page HTML. Par exemple, la balise <main> indique que le contenu le plus important est situé à l’intérieur.
De la même manière, la balise <aside> va indiquer à Google que les informations contenues dans cette balise HTML sont moins importantes, mais qu’elle sont liées au contenu principal de façon indirectes.
<header>En-tête</header>
<nav>Navigation</nav>
<main>Contenu principal</main>
<article>Un article</article>
<section>Une section</section>
<aside>Barre latérale</aside>
<footer>Pied de page</footer>Les attributs HTML
Les attributs donnent des informations supplémentaires aux balises.
Syntaxe : nom="valeur"
Universels (toutes balises)
Ces attributs peuvent être utiliser avec tous les Tag HTML, cependant il est possible dans certains cas particuliers qu’il n’est aucun effet.
<div id="menu-principal" class="navigation" title="Menu principal">
Contenu
</div>Spécifiques aux balises
<!-- Liens -->
<a href="https://google.com" target="_blank" rel="noopener">Google</a>
<!-- Images -->
<img src="chat.jpg" alt="Photo d'un chat" width="400" height="300">
<!-- Inputs -->
<input type="email" name="userEmail" placeholder="email@exemple.com" required>Les événements HTML
Les événements capturent les interactions utilisateur.
<button onclick="alert('Tu as cliqué !')">Clique-moi</button>
<input type="text" onkeyup="console.log('Touche : ' + event.key)">
<img src="normal.jpg"
onmouseover="this.src='survol.jpg'"
onmouseout="this.src='normal.jpg'">Événements essentiels :
onclick : clic souris
onmouseover : survol
onchange : modification champ
Bonnes Pratiques
L’arbre DOM / Structure imbriquée
Le code HTML d’une page, aussi appelé Document Object Model, forme un arbre de balises emboîtées. Chaque balise contient ses enfants.
<!DOCTYPE html>
<html> ← Racine
├─ <head> ← Métadonnées
└─ <body> ← Visible
├─ <header>
├─ <main>
│ └─ <article>
└─ <footer>Règle absolue : Ne jamais croiser les balises.
❌ <p><h1>Mauvais</h1></p>
✅ <p>Paragraphe</p><h1>Titre</h1>
On peut visualiser l’arbre en cliquant sur la touche F12, puis en sélectionnant l’onglet « Éléments ».
Différence HTML vs CSS
HTML = quoi afficher et où
CSS = comment l'afficher (couleurs, tailles, espacements)Mauvais mélange :
<p style="color:red; font-size:20px;">Texte</p>Bonne séparation :
<p class="important">Texte</p>FAQ : Les questions les plus fréquentes sur le code HTML
Quelle balise HTML permet de créer des liens hypertexte entre pages ?
La balise <a> crée des liens hypertextes. Tu utilises l’attribut href pour indiquer l’adresse de destination. Exemple : <a href="page2.html">Cliquer ici</a> génère un lien cliquable vers page2.html.
<a href="page2.html">Cliquer ici</a>Quelle balise HTML permet d’écrire un texte en gras ?
La balise <strong> met du texte en gras et indique qu’il est important sémantiquement. Pour du gras purement visuel, tu peux utiliser <b>. Exemple : <strong>Texte important</strong> s’affiche en gras.
<strong>Texte important</strong>Quelle balise HTML est utilisée pour créer une liste numérotée/ordonnée ?
La balise <ol> crée une liste ordonnée (numérotée). Chaque élément se place dans <li>. Exemple : <ol><li>Première étape</li><li>Deuxième étape</li></ol> affiche une liste 1, 2.
<ol> <li>Première étape</li>
<li>Deuxième étape</li></ol>Quelle balise HTML permet de placer un caractère en indice ?
La balise <sub> place un caractère en indice (en bas). Exemple : H<sub>2</sub>O affiche H₂O avec le 2 en petit et bas. Pour l’exposant (haut), utilise <sup> comme dans x².
H<sub>2</sub>OQuelle balise HTML est utilisée pour afficher une image ?
La balise <img> affiche une image. Elle est auto-fermante avec les attributs src (chemin) et alt (description). Exemple : <img src="photo.jpg" alt="Mon chat"> charge l’image photo.jpg.
<img src="photo.jpg" alt="Mon chat">Quelle balise HTML est utilisée pour définir un paragraphe ?
<p>Ceci forme un paragraphe complet avec retour à la ligne.</p>Quelle balise HTML est utilisée pour créer un tableau ?
La balise <table> crée un tableau. Tu combines <tr> (lignes), <th> (en-têtes), et <td> (cellules). Exemple : <table><tr><th>Nom</th><td>Marie</td></tr></table> génère un tableau simple.
<table> <tr>
<th>Nom</th>
<td>Marie</td>
</tr></table>Comment souligner du code HTML ?
La balise <u> souligne du texte. Exemple : <u>Texte souligné</u> affiche un soulignement continu. Attention : le soulignement est souvent associé aux liens, donc utilise-le avec modération pour l’accessibilité.
<u>Texte souligné</u>