Introduction au HTML : Une structure de base

Chapitre 1 • Structure de base

Avant de décorer un sapin, il faut bien un sapin, n'est-ce pas ? 🌲 Eh bien en HTML, avant de mettre des images, des vidéos, des boutons qui brillent... il faut une structure de base.

À quoi sert cette structure ?

  • Permet au navigateur (Chrome, Firefox, etc.) de comprendre comment lire votre page
  • Assure un affichage cohérent sur différents navigateurs
  • Fournit une base solide pour ajouter du contenu
  • Facilite la maintenance et les modifications futures

Bon à savoir

Une page HTML bien structurée est comme une maison avec des fondations solides. Plus la base est solide, plus vous pourrez construire des choses impressionnantes par-dessus !

La déclaration DOCTYPE

Chapitre 1 • Structure de base

Tout document HTML commence par une déclaration DOCTYPE :

<!DOCTYPE html>

Que signifie cette ligne ?

Elle indique au navigateur qu'il s'agit d'un document HTML5, la version la plus récente du HTML.

Pourquoi est-ce important ?

  • Assure le bon mode de rendu dans les navigateurs
  • Évite que les vieux navigateurs passent en "mode de compatibilité"
  • Nécessaire pour valider votre code HTML

Attention

Bien que certains navigateurs modernes puissent afficher votre page sans DOCTYPE, son omission est une mauvaise pratique et peut causer des problèmes d'affichage.

Les balises <html>, <head>, <body>

Chapitre 1 • Structure de base

Ces trois balises forment l'ossature fondamentale de toute page HTML :

Balise Rôle
<html> Balise racine qui englobe tout le document
<head> Contient les métadonnées et liens vers les ressources externes
<body> Contient tout le contenu visible de la page

Mémo rigolo

"Le head pense, le body danse !" 😄

Le <head> contient toutes les informations "intelligentes" sur la page (titre, encodage, liens), tandis que le <body> contient tout ce qui "bouge" et s'affiche à l'écran.

Le squelette d'une page HTML

Chapitre 1 • Structure de base

Voici la structure minimale que toute page HTML devrait avoir :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <title>Ma super page HTML</title>
</head>
<body>
    <h1>Bienvenue sur mon site !</h1>
    <p>Ceci est ma première page. Hourra 🎉 !</p>
</body>
</html>

Analyse du squelette :

  • <!DOCTYPE html> : Déclaration du type de document
  • <html lang="fr"> : Balise racine avec attribut de langue
  • <meta charset="UTF-8"> : Définit l'encodage des caractères
  • <title> : Titre de la page (affiché dans l'onglet du navigateur)
  • <body> : Contenu visible de la page

Bonnes pratiques

Même si certains éléments peuvent sembler optionnels (comme lang ou charset), il est fortement recommandé de toujours les inclure pour assurer un bon fonctionnement et une bonne accessibilité.

Un exemple concret

Chapitre 1 • Structure de base

Mettons en pratique avec un exemple étape par étape :

Étape 1 : Créer un fichier

  1. Ouvrez votre éditeur de texte (VS Code, Sublime Text, etc.)
  2. Créez un nouveau fichier nommé index.html

Étape 2 : Écrire le code

Copiez-collez le squelette HTML de base vu précédemment.

Étape 3 : Enregistrer

Sauvegardez le fichier avec l'extension .html

Étape 4 : Ouvrir dans un navigateur

Double-cliquez sur le fichier pour le visualiser dans votre navigateur par défaut.

Résultat attendu

Vous devriez voir apparaître dans votre navigateur :

  • Le titre "Bienvenue sur mon site !" en grand
  • Le paragraphe "Ceci est ma première page. Hourra 🎉 !"
  • Le titre de l'onglet sera "Ma super page HTML"

Erreurs fréquentes

Chapitre 1 • Structure de base

Balises non fermées

<p>Oups, j'ai oublié de fermer

Mauvais : la balise <p> n'est pas fermée

Contenu dans le mauvais endroit

<head>
  <h1>Titre visible</h1>
</head>

Le contenu visible doit être dans <body>

Oublier DOCTYPE

<html>
  <!-- Pas de DOCTYPE -->
</html>

Le DOCTYPE doit toujours être la première ligne

Conseils pour éviter les erreurs

  • Utilisez un éditeur de code avec coloration syntaxique
  • Vérifiez toujours que vos balises sont correctement fermées
  • Respectez la hiérarchie des balises
  • Validez votre code avec le validateur W3C

En résumé

Chapitre 1 • Structure de base

DOCTYPE

Première ligne obligatoire

Balise <html>

Racine du document

Balise <head>

Métadonnées et informations techniques

Balise <body>

Contenu visible de la page

Une page HTML bien structurée commence toujours par ce squelette de base. En respectant cette structure fondamentale, vous assurez un bon affichage dans les navigateurs et une base solide pour ajouter du contenu. Dans le prochain chapitre, nous verrons comment ajouter du texte et des titres à votre page.