Structure d'un document HTML
Structure d'un document HTML
- 1Tout document HTML suit une structure hiérarchique avec DOCTYPE, html, head et body
- 2La section head contient les métadonnées invisibles tandis que body contient le contenu visible
- 3Chaque balise HTML a une ouverture <balise> et une fermeture </balise> qui forment un conteneur
Introduction
Imaginez que vous construisez une maison : vous avez besoin d'une structure solide avant d'ajouter la décoration. Le HTML fonctionne exactement de la même manière ! Chaque page web repose sur une architecture précise et logique que nous allons découvrir ensemble.
L'anatomie complète d'un document HTML
La structure hiérarchique
Le document HTML minimal
Voici la structure de base que tous les documents HTML doivent respecter :
1<!DOCTYPE html>
2<html lang="fr">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Ma première page web</title>
7</head>
8<body>
9 <h1>Bienvenue sur ma page !</h1>
10 <p>Ceci est mon premier contenu HTML.</p>
11</body>
12</html>💡 À retenir: Cette structure est comme l'ADN de toute page web - elle est universelle et obligatoire !
Décryptage élément par élément
1. La déclaration DOCTYPE
1<!DOCTYPE html>La déclaration DOCTYPE indique au navigateur qu'il s'agit d'un document HTML5. Elle doit toujours être la première ligne du fichier.
⚠️ Attention: Sans DOCTYPE, les navigateurs peuvent interpréter votre code de manière imprévisible !
2. La balise racine <html>
1<html lang="fr">Cette balise englobe tout le contenu de votre page. L'attribut lang="fr" précise la langue principale du document.
3. La section <head> - Les métadonnées
1<head>
2 <meta charset="UTF-8">
3 <meta name="viewport" content="width=device-width, initial-scale=1.0">
4 <title>Ma première page web</title>
5</head>La section head contient des informations invisibles pour l'utilisateur mais cruciales pour le navigateur :
| Balise | Rôle | Exemple |
|---|---|---|
<meta charset> | Définit l'encodage des caractères | <meta charset="UTF-8"> |
<title> | Titre affiché dans l'onglet du navigateur | <title>Mon site</title> |
<meta viewport> | Configuration de l'affichage mobile | <meta name="viewport" content="width=device-width"> |
<meta description> | Description pour les moteurs de recherche | <meta name="description" content="Mon site web"> |
🎯 En pratique: Le titre
<title>apparaît dans l'onglet de votre navigateur et dans les résultats Google !
4. La section <body> - Le contenu visible
1<body>
2 <header>
3 <h1>Mon site web</h1>
4 <nav>
5 <ul>
6 <li><a href="#accueil">Accueil</a></li>
7 <li><a href="#services">Services</a></li>
8 <li><a href="#contact">Contact</a></li>
9 </ul>
10 </nav>
11 </header>
12
13 <main>
14 <section>
15 <h2>Bienvenue !</h2>
16 <p>Découvrez nos services exceptionnels.</p>
17 </section>
18 </main>
19
20 <footer>
21 <p>© 2024 Mon Entreprise</p>
22 </footer>
23</body>Les règles fondamentales des balises HTML
Structure d'une balise
Exemple complet avec attributs
1<a href="https://example.com" target="_blank" title="Lien vers Example">
2 Cliquez ici
3</a>Décomposition :
<a>: balise ouvrantehref,target,title: attributs avec leurs valeursCliquez ici: contenu</a>: balise fermante
Le saviez-vous ?
Le premier site web de l'histoire, créé par Tim Berners-Lee en 1991, ne contenait que du texte brut et quelques liens. Il respectait déjà la structure HTML de base que nous utilisons aujourd'hui !
— Ce site historique est toujours accessible à l'adresse http://info.cern.ch/hypertext/WWW/TheProject.html
Les balises sémantiques modernes
HTML5 a introduit des balises qui donnent du sens à la structure :
1<article>
2 <header>
3 <h1>Titre de l'article</h1>
4 <time datetime="2024-01-15">15 janvier 2024</time>
5 </header>
6
7 <section>
8 <h2>Introduction</h2>
9 <p>Contenu de l'introduction...</p>
10 </section>
11
12 <section>
13 <h2>Développement</h2>
14 <p>Contenu principal...</p>
15 </section>
16
17 <footer>
18 <p>Auteur: Jean Dupont</p>
19 </footer>
20</article>💡 À retenir: Ces balises sémantiques améliorent l'accessibilité et le référencement de vos pages !
Validation de la structure
Votre document HTML est valide s'il respecte ces critères :
✅ Déclaration DOCTYPE en première ligne
✅ Balise <html> qui englobe tout
✅ Section <head> avec charset et title
✅ Section <body> avec le contenu visible
✅ Toutes les balises correctement fermées
✅ Imbrication logique des éléments
⚠️ Attention: Une balise mal fermée peut casser l'affichage de toute votre page !
Points clés à retenir
🎯 En pratique: Utilisez toujours un éditeur de code qui colore la syntaxe et indique les erreurs de structure !
💡 À retenir: La structure HTML est invisible pour l'utilisateur final, mais elle est la fondation de tout votre site web.
⚠️ Attention: L'ordre des éléments dans le
<head>peut affecter les performances - placez les éléments critiques en premier !