Structure d'une page HTML
Objectifs
- Comprendre la structure hiérarchique d'un document HTML
- Identifier et utiliser les balises essentielles d'une page web
- Créer une page HTML valide avec une structure de base
Introduction
Chaque fois que vous naviguez sur un site web, vous interagissez avec un langage secret que votre navigateur comprend parfaitement : le HTML. Aujourd'hui, nous allons décortiquer ce langage pour comprendre comment une simple page web est construite. Imaginez que vous puissiez créer votre propre page personnelle en comprenant sa structure de base !
Comment est structurée une page web écrite en HTML pour qu'un navigateur puisse l'afficher correctement ?
Les fondations : la structure minimale d'un document HTML
Un document HTML est structuré comme un squelette, avec des éléments obligatoires qui encadrent le contenu. Tout commence par la déclaration de type de document `<!DOCTYPE html>` qui indique au navigateur qu'il s'agit d'un document HTML5. Ensuite, l'élément racine `<html>` englobe toute la page. À l'intérieur, on trouve deux sections principales : l'en-tête (`<head>`) et le corps (`<body>`). L'en-tête contient des informations techniques invisibles pour l'utilisateur mais essentielles pour le navigateur, comme le titre de la page (affiché dans l'onglet), l'encodage des caractères (UTF-8 pour le français), et les liens vers les feuilles de style CSS. Le corps (`<body>`), quant à lui, contient tout ce qui est visible à l'écran : textes, images, liens, etc. Par exemple, la structure minimale d'une page se résume à : `<!DOCTYPE html><html><head><title>Ma page</title></head><body>Bonjour !</body></html>`. Cette hiérarchie est fondamentale car elle garantit que tous les navigateurs interprètent le code de la même manière.
Points clés
- La déclaration `<!DOCTYPE html>` est obligatoire en première ligne
- La balise `<html>` est l'élément racine qui contient tout
- La page se divise en deux parties : `<head>` (métadonnées) et `<body>` (contenu visible)
Le contenu visible : organiser les éléments dans le `<body>`
Le corps de la page (`<body>`) est organisé à l'aide de balises sémantiques qui donnent du sens à la structure. Ces balises, introduites avec HTML5, aident les navigateurs et les moteurs de recherche à comprendre l'organisation du contenu. Les principales sont : `<header>` pour l'en-tête de la page (logo, titre principal), `<nav>` pour le menu de navigation, `<main>` pour le contenu principal unique à la page, `<article>` pour un contenu autonome (comme un post de blog), `<section>` pour regrouper un contenu thématique, `<aside>` pour des informations complémentaires (comme une barre latérale), et `<footer>` pour le pied de page (mentions légales, contacts). Par exemple, pour créer un article de blog simple, on pourrait utiliser : `<article><h1>Titre de l'article</h1><p>Premier paragraphe...</p><p>Deuxième paragraphe...</p></article>`. Il est crucial de respecter une hiérarchie logique, notamment avec les titres (`<h1>` à `<h6>`), où `<h1>` est le titre le plus important (généralement un par page) et `<h6>` le moins important. Cette organisation sémantique améliore l'accessibilité pour les personnes utilisant des lecteurs d'écran.
Points clés
- Les balises sémantiques (header, nav, main, footer...) structurent le contenu de manière logique
- La hiérarchie des titres (`<h1>` à `<h6>`) doit être respectée pour une bonne organisation
- Le contenu textuel principal est placé dans des paragraphes avec la balise `<p>`
Applications pratiques
Passons à la pratique ! Ouvrez un éditeur de texte simple (comme Notepad ou TextEdit) et créez un fichier nommé `ma_page.html`. Recopiez la structure minimale vue en section 1. Dans le `<head>`, ajoutez un titre pertinent comme 'Mon CV en ligne'. Dans le `<body>`, structurez une page de présentation simple : utilisez `<header>` avec votre nom dans un `<h1>`, une `<nav>` avec deux liens fictifs ('Accueil', 'Contact'), un `<main>` contenant une `<section>` avec un sous-titre `<h2>` 'Mes centres d'intérêt' et quelques paragraphes `<p>` les listant. Terminez par un `<footer>` avec '© 2023 - Mon Nom'. Enregistrez le fichier et ouvrez-le directement dans votre navigateur web (par un double-clic). Vous verrez votre première page web s'afficher ! Pour aller plus loin, vous pouvez ajouter une image avec `<img src='mon_image.jpg' alt='Description'>` et un lien vers un site avec `<a href='https://example.com'>Visitez Example</a>`. Observez comment le navigateur interprète votre code.
Points clés
- Création d'un fichier .html avec la structure de base DOCTYPE, html, head, body
- Insertion de contenu structuré avec des balises sémantiques (header, section, footer...)
- Test de la page en l'ouvrant directement dans un navigateur pour visualiser le résultat
À retenir
Une page HTML est un document structuré hiérarchiquement, commençant par la déclaration DOCTYPE et l'élément racine `<html>`. Elle se compose d'une partie `<head>` (invisible, contenant les métadonnées) et d'une partie `<body>` (visible, contenant le contenu organisé avec des balises sémantiques). Respecter cette structure et la hiérarchie des éléments (comme les titres h1 à h6) est essentiel pour créer des pages web valides, accessibles et bien interprétées par les navigateurs.
- Tout document HTML valide commence par `<!DOCTYPE html>` et a une balise `<html>` racine.
- La partie `<head>` contient les informations pour le navigateur, la partie `<body>` contient ce que voit l'utilisateur.
- Les balises sémantiques (header, main, footer, etc.) permettent d'organiser le contenu de manière logique et accessible.
