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
✓ Séquence terminée !
Quiz — Séquence 2
Vérifie ta compréhension avant de passer à la suite. Réponds à toutes les questions, puis valide.