Une page web bien construite ne se résume pas à un empilement de balises quelconques. HTML5 propose des balises sémantiques : chacune indique clairement le rôle du bloc qu'elle contient (en-tête, navigation, contenu principal, pied de page...). Ce découpage rend le code plus lisible, plus facile à styliser en CSS, et plus accessible aux lecteurs d'écran et aux moteurs de recherche.
| Balise | Rôle |
|---|---|
<header> | En-tête de page (ou d'une section) : logo, titre, navigation |
<nav> | Bloc regroupant les liens de navigation du site |
<main> | Contenu principal et unique de la page (un seul par page) |
<section> | Section thématique regroupant un ensemble de contenus liés |
<article> | Contenu autonome, qui aurait un sens seul (article, actualité, fiche) |
<aside> | Contenu complémentaire, en marge du sujet principal (barre latérale) |
<footer> | Pied de page : contacts, copyright, mentions légales |
Au-delà de la structure générale, HTML fournit des balises spécialisées pour organiser des contenus précis : énumérer des éléments, présenter des données en grille, ou collecter des informations saisies par l'utilisateur.
Une liste non ordonnée (à puces) utilise <ul> ; une liste ordonnée (numérotée) utilise <ol>. Dans les deux cas, chaque élément est un <li>.
Un tableau s'écrit avec <table>, ses lignes avec <tr>, ses cellules d'en-tête avec <th> et ses cellules ordinaires avec <td>.
Un formulaire <form> contient des champs de saisie <input> (texte, email, nombre...) et des listes déroulantes <select>. Chaque champ doit être associé à un <label> pour rester accessible.
Un menu se construit tout simplement avec un <nav> contenant une liste <ul>/<li> de liens : c'est la combinaison la plus utilisée sur le web.
Une fois le contenu structuré en HTML, CSS permet de l'agencer visuellement : espacements, bordures, couleurs de fond. Tout repose sur un principe simple à retenir : le modèle de boîte.
<div> devient une carte visuelle avec bordure arrondie, fond coloré et espacement propre autour du texte :
.carte définie ci-dessus, ce bloc apparaît encadré, arrondi, sur fond bleu clair, avec de l'air tout autour du texte et entre les cartes voisines.
Un script JavaScript s'écrit entre des balises <script></script>, le plus souvent juste avant la fermeture de </body>. Voici trois actions de base à maîtriser.
La méthode addEventListener("click", ...) permet d'attacher une fonction à un élément : cette fonction s'exécute à chaque clic sur cet élément.
document.getElementById(...) permet de récupérer un élément par son identifiant ; sa propriété textContent (ou innerHTML pour insérer du HTML) permet ensuite de changer son contenu.
Écris le code HTML d'un formulaire simple demandant à l'utilisateur son nom et son adresse email, avec un bouton permettant de valider le formulaire. Chaque champ doit être associé à une étiquette (<label>).
L'attribut required rend chaque champ obligatoire : le formulaire ne peut pas être envoyé s'ils sont vides.
On dispose du bloc HTML suivant :
Écris la règle CSS .carte qui donne à ce bloc : une bordure arrondie, un fond coloré, et une marge extérieure pour l'espacer des autres éléments de la page.
border-radius arrondit les coins, background-color colore le fond, et margin crée l'espace extérieur qui sépare la carte du reste de la page. padding évite que le texte ne touche les bords.
On dispose du bouton HTML suivant :
Écris le script JavaScript qui affiche une boîte de dialogue (alert()) contenant le message « Ce chapitre porte sur HTML, CSS et JavaScript ! » lorsque l'utilisateur clique sur ce bouton.
On récupère d'abord le bouton avec document.getElementById("btn-info"), puis on lui attache un écouteur d'événement de type "click". La fonction fournie en second argument s'exécute à chaque clic.
Construis une petite page contenant un titre <h1 id="titre"> affichant « Chapitre 6 » et un bouton <button id="basculer"> affichant « Changer le titre ».
Écris ensuite le script JavaScript qui, à chaque clic sur le bouton, fait basculer le texte du titre entre « Chapitre 6 » et « Maîtrise experte de la programmation web » (le titre doit revenir au premier texte si on clique une deuxième fois, et ainsi de suite).
À chaque clic, on teste le texte actuel du titre avec une condition if : s'il vaut « Chapitre 6 », on le remplace par le second texte, sinon on revient au premier. C'est ainsi qu'on obtient un basculement (« toggle ») entre deux états.
10 questions · Correction immédiate
Quelle balise HTML5 sert à regrouper les liens de navigation d'un site ?
Quelle balise doit contenir le contenu principal et unique d'une page (un seul par page) ?
Quelle est la différence entre <ul> et <ol> ?
Dans un tableau HTML, quelle balise représente une ligne ?
Dans <input type="email" name="email" required>, à quoi sert l'attribut required ?
Quelle affirmation décrit correctement la différence entre margin et padding ?
Que produit la règle CSS suivante : border-radius: 12px; ?
Quel est le rôle principal de JavaScript sur une page web ?
Que se passe-t-il au clic sur ce bouton ? document.getElementById("btn").addEventListener("click", function() { alert("Bonjour !"); });
Que fait cette instruction ? document.getElementById("titre").textContent = "Nouveau titre";