Structure HTML d'une Page
Le squelette d'une page HTML
Toute page HTML suit une structure precise. C'est comme un corps humain avec une tete (<head>) et un corps (<body>).
<head>Invisible (metadonnees)
<body>Visible (contenu)
Structure complete d'une page
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Metadonnees (non visibles) -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description...">
<title>Titre de l'onglet</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenu visible -->
<header>En-tete</header>
<main>Contenu principal</main>
<footer>Pied de page</footer>
<script src="app.js"></script>
</body>
</html>Le DOCTYPE : c'est quoi ?
<!DOCTYPE html> est la toute premiere ligne de chaque page HTML. Elle indique au navigateur qu'il s'agit d'un document HTML5.
HTML5 (moderne)
<!DOCTYPE html>Simple et court
HTML4 (ancien)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD...">Complexe et long
Le <head> : les metadonnees
Le <head> contient des informations invisibles mais essentielles pour le navigateur et Google.
<title>Titre de l'onglet navigateur
Mon Site - Accueil
<meta charset>Encodage des caracteres
UTF-8
<meta viewport>Affichage mobile responsive
width=device-width
<meta description>Description pour Google
Site educatif...
<link rel='stylesheet'>Lien vers fichier CSS
styles.css
<script>JavaScript (en fin de body)
app.js
<link rel='icon'>Favicon (icone onglet)
favicon.ico
Le meta viewport : indispensable pour mobile !
Sans cette balise, votre site s'affichera en version "desktop" sur mobile, tout petit et illisible !
<meta name="viewport" content="width=device-width, initial-scale=1.0">Meta tags pour le SEO
Ces balises aident Google a comprendre et afficher votre site dans les resultats de recherche.
name="description"(160 caracteres)Description du site pour les moteurs de recherche
name="keywords"(10-15 mots)Mots-cles separes par virgules (moins utilise)
name="author"(Nom ou organisation)Auteur du site
name="robots"(index, follow)Instructions pour les robots
Astuce SEO : La description apparait sous le titre dans Google. Ecrivez-la pour donner envie de cliquer !
Exemple complet de <head>
<head>
<!-- OBLIGATOIRE : Encodage -->
<meta charset="UTF-8">
<!-- OBLIGATOIRE : Responsive mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- OBLIGATOIRE : Titre de l'onglet -->
<title>Mon Site - Page d'accueil</title>
<!-- SEO : Description pour Google -->
<meta name="description" content="AlloSNT.fr - Cours SNT gratuits">
<!-- Styles CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" href="favicon.png">
</head>Quiz : Teste tes connaissances
5 questions pour verifier ce que tu as appris sur la structure HTML
A retenir
<!DOCTYPE html>declare un document HTML5<head>= metadonnees invisibles<body>= contenu visibleviewportest obligatoire pour le responsive mobile
