Aller au contenu principal

Module HTML.2 – Structure de base

Objectif​

Maîtriser la structure fondamentale d'un document HTML : doctype, balises <html>, <head>, <body>, métadonnées et SEO de base pour créer des pages web professionnelles.

Théorie​

Doctype​

Le DOCTYPE déclare la version du HTML utilisée et indique au navigateur comment parser le document.

HTML5 :

<!DOCTYPE html>

Important :

  • Doit être la première ligne du fichier
  • Pas de balise fermante
  • En minuscules (HTML5)
  • Indique au navigateur d'utiliser le mode standard (pas quirks mode)

Historique :

<!-- HTML 4.01 Strict -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Structure HTML5​

Structure minimale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Mon titre</title>
</head>
<body>
    <!-- Contenu ici -->
</body>
</html>

<html>​

Balise racine qui contient tout le document.

Attributs importants :

<html lang="fr">

lang :

  • Indique la langue du document
  • Important pour l'accessibilité (screen readers)
  • Important pour le SEO
  • Valeurs : fr, en, es, de, etc.

Contient les métadonnées du document (non visibles dans la page).

Contenu typique :

<head>
    <!-- Encodage -->
    <meta charset="UTF-8">
    
    <!-- Viewport (responsive) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- Titre -->
    <title>Mon site web</title>
    
    <!-- Description (SEO) -->
    <meta name="description" content="Description de mon site">
    
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">
</head>

Métadonnées essentielles​

<meta charset="UTF-8">​

Obligatoire ! Définit l'encodage des caractères.

Pourquoi UTF-8 :

  • Supporte tous les caractères (français, chinois, emojis, etc.)
  • Standard moderne
  • Évite les problèmes d'affichage (é, è, à, etc.)

Sans charset :

<!-- Risque d'affichage : Caf au lieu de Café -->

<meta name="viewport">​

Essentiel pour le responsive !

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explication :

  • width=device-width : Largeur = largeur de l'écran
  • initial-scale=1.0 : Zoom initial = 100%

Sans viewport : La page sera zoomée sur mobile (mauvaise UX).

<title>​

Obligatoire ! Titre affiché dans l'onglet du navigateur.

<title>Mon site web - Accueil</title>

Bonnes pratiques :

  • 50-60 caractères maximum
  • Unique par page
  • Descriptif et pertinent
  • Inclut le nom du site

SEO : Apparaît dans les résultats de recherche.

<meta name="description">​

Description de la page (SEO et réseaux sociaux).

<meta name="description" content="Découvrez notre site web dédié à l'apprentissage du développement frontend.">

Bonnes pratiques :

  • 150-160 caractères
  • Unique par page
  • Accrocheur et descriptif
  • Inclut des mots-clés pertinents

SEO de base​

SEO (Search Engine Optimization) : Optimisation pour les moteurs de recherche.

Métadonnées SEO :

<head>
    <!-- Titre (déjà vu) -->
    <title>Mon site - Accueil</title>
    
    <!-- Description (déjà vu) -->
    <meta name="description" content="Description...">
    
    <!-- Mots-clés (déprécié, mais parfois utilisé) -->
    <meta name="keywords" content="html, css, web, développement">
    
    <!-- Auteur -->
    <meta name="author" content="Votre nom">
    
    <!-- Robots (indexation) -->
    <meta name="robots" content="index, follow">
    <!-- noindex : ne pas indexer -->
    <!-- nofollow : ne pas suivre les liens -->
</head>

Open Graph (réseaux sociaux) :

<!-- Facebook, LinkedIn -->
<meta property="og:title" content="Mon site web">
<meta property="og:description" content="Description...">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Mon site web">
<meta name="twitter:description" content="Description...">
<meta name="twitter:image" content="https://example.com/image.jpg">

<body>​

Contient tout le contenu visible de la page.

<body>
    <header>
        <h1>Mon site</h1>
    </header>
    <main>
        <p>Contenu principal</p>
    </main>
    <footer>
        <p>Pied de page</p>
    </footer>
</body>

Structure complète recommandée​

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- Encodage (OBLIGATOIRE) -->
    <meta charset="UTF-8">
    
    <!-- Viewport (OBLIGATOIRE pour responsive) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO -->
    <title>Mon site web - Accueil</title>
    <meta name="description" content="Description de mon site web">
    <meta name="author" content="Votre nom">
    
    <!-- CSS -->
    <link rel="stylesheet" href="css/style.css">
    
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <!-- Contenu de la page -->
</body>
</html>

Exercices guidés​

Exercice 1 : Structure minimale​

Créez un fichier structure.html avec la structure HTML5 minimale :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Ma structure</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

Ouvrez-le dans le navigateur et vérifiez qu'il fonctionne.

Exercice 2 : Métadonnées complètes​

Ajoutez toutes les métadonnées essentielles :

  1. Charset UTF-8
  2. Viewport
  3. Title descriptif
  4. Description
  5. Auteur

Exercice 3 : Tester le viewport​

Créez deux versions :

  • Version 1 : Sans <meta name="viewport">
  • Version 2 : Avec <meta name="viewport">

Testez sur mobile (ou DevTools mode mobile) et observez la différence.

Exercice 4 : SEO de base​

Créez une page avec :

  • Title optimisé (50-60 caractères)
  • Description optimisée (150-160 caractères)
  • Open Graph pour les réseaux sociaux

Exercice 5 : Validation HTML​

Utilisez le validateur W3C : https://validator.w3.org/

  1. Créez une page HTML
  2. Validez-la
  3. Corrigez les erreurs
  4. Re-validez jusqu'à ce qu'il n'y ait plus d'erreurs

❌ Erreurs fréquentes​

Erreur 1 : Oublier le charset UTF-8​

❌ Mauvais :

<head>
    <title>Mon site</title>
</head>

✅ Bon :

<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
</head>

Pourquoi : Sans charset, les caractères spéciaux (é, è, à) peuvent s'afficher incorrectement.

Erreur 2 : Oublier le viewport​

❌ Mauvais :

<head>
    <meta charset="UTF-8">
    <title>Mon site</title>
</head>

✅ Bon :

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon site</title>
</head>

Pourquoi : Sans viewport, la page sera zoomée sur mobile (mauvaise UX).

Erreur 3 : Title trop long ou vide​

❌ Mauvais :

<title>Mon super site web incroyable avec plein de fonctionnalités géniales</title>
<!-- ou -->
<title></title>

✅ Bon :

<title>Mon site - Accueil</title>

Pourquoi : Le title est tronqué dans les résultats de recherche (50-60 caractères).

Erreur 4 : Description absente ou trop longue​

❌ Mauvais :

<!-- Pas de description -->
<!-- ou -->
<meta name="description" content="Une description vraiment très très très longue qui dépasse les 160 caractères recommandés et qui sera tronquée dans les résultats de recherche">

✅ Bon :

<meta name="description" content="Découvrez notre site web dédié à l'apprentissage du développement frontend.">

Pourquoi : La description est tronquée à ~160 caractères dans les résultats de recherche.

Erreur 5 : Langue incorrecte​

❌ Mauvais :

<html>
<!-- ou -->
<html lang="en">
<!-- Mais le contenu est en français -->

✅ Bon :

<html lang="fr">

Pourquoi : Important pour l'accessibilité (screen readers) et le SEO.

🚀 Mini-projet​

Mission : Créer la structure HTML5 complète d'une page d'accueil

Créez un fichier index.html avec :

Structure :

  1. Doctype HTML5
  2. Balise <html> avec lang="fr"
  3. <head> complet avec :
    • Charset UTF-8
    • Viewport
    • Title optimisé (votre nom + "Développeur web")
    • Description optimisée (150-160 caractères)
    • Auteur
  4. <body> avec un contenu minimal :
    • Un titre <h1>
    • Un paragraphe de présentation

Validation :

  1. Ouvrez dans le navigateur
  2. Vérifiez le title dans l'onglet
  3. Validez avec https://validator.w3.org/
  4. Testez sur mobile (DevTools)
  5. Vérifiez qu'il n'y a pas d'erreurs dans la Console

Critères :

  • ✅ Structure HTML5 valide
  • ✅ Toutes les métadonnées essentielles présentes
  • ✅ Validation W3C sans erreurs
  • ✅ Responsive (viewport correct)
  • ✅ SEO de base optimisé

Objectif : Créer une structure HTML professionnelle et optimisée.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez la structure HTML5 de base et avez créé une page avec toutes les métadonnées essentielles.