📚 Qu'est-ce que le HTML ?
HTML (HyperText Markup Language) est le langage de balisage utilisé pour créer la
structure d'une page web. Il utilise des balises pour organiser et décrire le
contenu.
Chaque page HTML suit une structure de base composée de plusieurs éléments essentiels que nous
allons découvrir ensemble.
1. <!DOCTYPE html>
Déclaration qui indique au navigateur qu'il s'agit d'un document HTML5. Elle doit toujours être
la première ligne du fichier.
<!DOCTYPE html>
📝 Note : Obligatoire pour que le navigateur interprète correctement la page.
2. <html>
Balise racine qui englobe tout le contenu de la page. L'attribut lang="fr" indique
la langue du contenu.
<html lang="fr">
...
</html>
✅ Bonne pratique : Toujours spécifier la langue pour l'accessibilité.
3. <head>
Section contenant les métadonnées (informations sur la page) qui ne sont pas affichées
directement à l'écran.
<head>
<meta charset="UTF-8">
<title>Mon site</title>
</head>
📦 Contient : titre, liens CSS, scripts, métadonnées...
4. <body>
Section contenant tout le contenu visible de la page : textes, images, vidéos, formulaires,
etc.
<body>
<h1>Bienvenue</h1>
<p>Mon premier site</p>
</body>
👁️ Important : Tout ce qui est dans le body est affiché dans le navigateur.
📋 Structure HTML complète
<!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>Ceci est ma première page HTML.</p>
</body>
</html>
🔍 Balises importantes du <head>
<meta charset="UTF-8">
Définit l'encodage des caractères. UTF-8 permet d'afficher tous les caractères (accents,
symboles...).
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Configure l'affichage pour les appareils mobiles. Essentiel pour un site responsive (qui
s'adapte aux différentes tailles d'écran).
<title>Titre de la page</title>
Définit le titre affiché dans l'onglet du navigateur et dans les résultats de recherche Google.
<link rel="stylesheet" href="style.css">
Permet de lier une feuille de style CSS externe pour styliser la page.
