La structure d'une page HTML
🎯 Objectif : écrire le squelette d'une page et comprendre les balises.
Les balises
Le HTML est fait de balises entre chevrons. La plupart vont par paire : une balise ouvrante et une balise fermante (avec /).
<p>Bonjour tout le monde</p>
- <p> ouvre un paragraphe, </p> le ferme.
- Certaines balises n'ont pas de fermeture : <br> (saut de ligne), <img> (image), <hr> (trait).
Le squelette minimal
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour le monde</h1>
<p>Voici ma première page web.</p>
</body>
</html>
| Élément | Rôle |
|---|---|
| <!DOCTYPE html> | Indique que c'est du HTML5. |
| <html lang="fr"> | Contient toute la page ; lang précise la langue. |
| <head> | Informations invisibles : titre, encodage, styles. |
| <meta charset="UTF-8"> | Permet d'afficher les accents correctement. |
| <meta name="viewport" …> | Rend la page adaptée aux téléphones. |
| <title> | Le titre affiché dans l'onglet du navigateur. |
| <body> | Le contenu visible de la page. |
Les attributs
Une balise peut avoir des attributs : des informations supplémentaires, sous la forme nom="valeur".
<a href="https://www.apprenum.com">Visiter Apprenum</a>
<img src="images/logo.png" alt="Logo de ma boutique">
Les commentaires
<!-- Ceci est un commentaire, invisible dans la page -->
⚠️ Attention : Pense à fermer chaque balise ouverte, à bien imbriquer (la dernière ouverte est la première fermée) et à mettre les valeurs d'attributs entre guillemets.
💡 À retenir : Garde le code indenté (décalé à droite à chaque niveau) : c'est beaucoup plus lisible.
Envie de voir la suite ?
Inscrivez-vous à « Créer son premier site web : HTML, CSS et JavaScript » pour accéder à toutes les leçons.
Voir le cours