2: La structure fondamentale

Qu'allez-vous apprendre ?

Comprendre la structure de base d’un site web et l’importance du squelette HTML.

Suivez ce chapitre à la lettre

Dans ce chapitre, nous allons explorer en détail la structure fondamentale de toute page HTML. La compréhension de cette structure est cruciale pour créer des sites web cohérents, organisés et faciles à maintenir. Même si vous codez sur un smartphone avec SPCK Editor, les principes restent exactement les mêmes que sur un ordinateur.

Chapitre 2: La structure fondamentale d’une page HTML

Tous les sites web, sans exception, reposent sur une structure de base appelée le « squelette HTML ». Même si elle est invisible pour l’utilisateur final, cette structure est indispensable pour que le navigateur comprenne correctement le contenu de la page. Sans cette base, le code HTML peut devenir instable, mal interprété ou afficher des erreurs.

Dans ce chapitre, tu vas apprendre à construire la structure fondamentale d’une page HTML5. Tu comprendras le rôle du DOCTYPE, des balises principales <html>, <head> et <body>, ainsi que l’importance du titre de la page. Ces notions sont essentielles, car elles seront utilisées dans absolument tous les projets web.

  1. Le DOCTYPE :
    La ligne <!DOCTYPE html> indique au navigateur que le document utilise la version HTML5. Elle doit toujours être placée tout en haut du fichier.
  2. La balise <html> :
    Elle englobe tout le contenu de la page. Tout le code HTML doit se trouver à l’intérieur de cette balise.
  3. La balise <head> :
    Elle contient les informations invisibles comme le titre de la page, l’encodage des caractères et les liens vers les fichiers CSS.
  4. L’encodage UTF-8 :
    La balise <meta charset="UTF-8"> permet d’afficher correctement les accents et caractères spéciaux.
  5. La balise <title> :
    Elle définit le texte affiché dans l’onglet du navigateur.
  6. La balise <body> :
    Elle contient tout ce qui est visible par l’utilisateur (textes, images, liens, boutons…).
  7. Exemple minimal complet : 
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mon site</title>
  </head>
  <body>
    Contenu ici
  </body>
</html>
  8. Pourquoi cette structure est obligatoire :
    Elle garantit une compatibilité correcte avec tous les navigateurs.
  9. Lisibilité du code :
    Une bonne indentation permet de comprendre facilement la hiérarchie des balises.
  10. Erreur courante :
    Oublier de fermer une balise peut casser toute la page.

Exemples supplémentaires :

<title>Cours HTML5 pour débutant</title>
      
<meta charset="UTF-8">
      
<body>
  <p>Bienvenue sur mon site</p>
</body>

Exercices pratiques :

  1. Crée un fichier index.html vide.
  2. Ajoute la ligne <!DOCTYPE html>.
  3. Encadre le document avec <html>.
  4. Ajoute les balises <head> et <body>.
  5. Ajoute l’encodage UTF-8.
  6. Modifie le titre de l’onglet.
  7. Ajoute un texte visible dans le body.
  8. Teste l’affichage avec le bouton Play.
  9. Supprime volontairement une balise et observe l’erreur.
  10. Corrige l’erreur et sauvegarde.

La structure HTML est la fondation de tout site web. Si tu la maîtrises, tu éviteras 80 % des erreurs de débutant. Prends le temps de bien comprendre chaque balise avant de passer au chapitre suivant.

Passer au chaitre 03-->