Apprendre les balises essentielles, la sémantique, et construire sa première vraie page.
Objectif : Créer une page HTML complète et bien structurée de A à Z.
C
Cours
La structure d'une page HTML
Toute page HTML respecte cette structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de ma page</title>
</head>
<body>
<!-- Ton contenu ici -->
</body>
</html>
<!DOCTYPE html> — indique au navigateur que c'est du HTML5.
<head> — informations sur la page (titre, charset, liens CSS). Rien de visible ici.
<body> — tout ce que l'utilisateur voit.
C
Cours
Les balises essentielles
Le HTML est constitué de balises. La plupart s'ouvrent et se ferment :
<p>Ceci est un paragraphe.</p>
Les balises incontournables
Balise
Rôle
Exemple
h1 à h6
Titres (h1 = plus important)
<h1>Titre principal</h1>
p
Paragraphe de texte
<p>Mon texte</p>
a
Lien hypertexte
<a href="page.html">Cliquez</a>
img
Image (balise auto-fermante)
<img src="photo.jpg" alt="Ma photo">
ul / li
Liste non ordonnée
<ul><li>Item</li></ul>
div
Conteneur générique
<div class="carte">...</div>
span
Conteneur en ligne
<span class="rouge">mot</span>
strong
Texte en gras (important)
<strong>Attention !</strong>
em
Texte en italique (emphase)
<em>nuance</em>
C
Cours
HTML sémantique — bien nommer les zones
HTML5 a introduit des balises qui donnent du sens à la structure de la page. Utilise-les à la place des div génériques :
<header> ← en-tête du site
<nav> ← menu de navigation
</nav>
</header>
<main> ← contenu principal (unique par page)
<section> ← une section thématique
</section>
<article> ← contenu autonome (article, card)
</article>
<aside> ← contenu secondaire (sidebar)
</aside>
</main>
<footer> ← pied de page
</footer>
La sémantique aide les moteurs de recherche (SEO) et les technologies d'accessibilité (lecteurs d'écran).
T
Astuce
Les attributs les plus utilisés
Les attributs ajoutent des informations sur les balises.
<!-- href : destination du lien -->
<a href="https://google.com" target="_blank">Ouvrir dans un nouvel onglet</a>
<!-- src + alt : image avec description -->
<img src="images/profil.jpg" alt="Photo de profil de Martin">
<!-- class : pour cibler en CSS -->
<div class="carte-projet">...</div>
<!-- id : identifiant unique -->
<section id="contact">...</section>
Règle d'or : class peut être utilisée sur plusieurs éléments. id doit être unique sur la page entière.
P
Projet
Projet — Page "À propos de moi"
Tu vas créer une page HTML complète qui te présente (ou présente un personnage fictif).
Ta page doit contenir
Un <header> avec ton nom en <h1> et un menu <nav> avec 3 liens (Accueil, À propos, Contact)
Un <main> avec :
Une <section> "Présentation" : photo, texte de présentation
Une <section> "Compétences" : liste de 5 compétences
Une <section> "Projets" : 2 projets avec titre et description
Un <footer> avec ton nom et l'année
Ce qu'on évalue
Utilisation correcte des balises sémantiques
Pas d'erreurs de fermeture
Attributs alt sur les images
Indentation propre
Tu as terminé les leçons de cette séquence ?
Quiz — Séquence 2
Vérifie ta compréhension avant de passer à la suite. Réponds à toutes les questions, puis valide.