Comprendre le squelette d'une page et les balises sémantiques.
Toutes les pages web reposent sur le même squelette, du blog personnel au site d'un grand journal. Le connaître, c'est pouvoir ouvrir n'importe quel fichier HTML et savoir immédiatement où l'on se trouve — et où ajouter son propre contenu.
1. Le squelette obligatoire
Quatre éléments encadrent toute page. Ils ne s'inventent pas : on les écrit toujours dans cet ordre, et tout le reste vient se loger à l'intérieur.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Ma page</title> </head> <body> <!-- tout ce que le visiteur voit --> </body> </html>
<!DOCTYPE html> annonce au navigateur qu'il lit du HTML moderne.
<html lang="fr"> enveloppe la page entière et déclare sa langue — un
détail qui compte pour les moteurs de recherche et pour les lecteurs d'écran. Vient
ensuite la séparation la plus importante du fichier : le head contient des
informations sur la page (encodage des caractères, titre affiché dans
l'onglet, feuille de style à charger) et n'affiche rien ; le body contient la
page elle-même, tout ce qui apparaît à l'écran.
<head> : la page reste désespérément
blanche. Si rien ne s'affiche, la première chose à vérifier est toujours la même —
le contenu est-il bien dans le <body> ?
2. Le plan du <body> : les balises sémantiques
À l'intérieur du body, on pourrait tout empiler dans des <div>
anonymes. Les balises sémantiques font mieux : elles découpent la page
en zones qui portent un nom. Voici le plan type d'une page :
Ce schéma se lit comme un emboîtement de boîtes : chaque balise en contient d'autres, et l'indentation du code reproduit exactement cette imbrication. C'est aussi la structure des pages de cette formation — ouvrez le code source de celle-ci, vous y retrouverez header, nav, main et footer.
3. Le rôle de chaque balise
| Balise | Ce qu'elle contient | Le repère |
|---|---|---|
| <header> | L'en-tête : titre du site, logo, souvent le menu | Se répète sur toutes les pages |
| <nav> | Un groupe de liens de navigation | Réservé aux menus, pas à un lien isolé |
| <main> | Le contenu propre à cette page | Une seule fois par page |
| <section> | Un regroupement thématique, avec son titre | Porte presque toujours un <h2> |
| <article> | Un contenu autonome : fiche, billet, actualité | Garderait du sens sorti de la page |
| <footer> | Le pied de page : mentions, contact, copyright | Se répète sur toutes les pages |
Pourquoi s'embarrasser de ces noms alors qu'un <div> produirait le
même effet à l'écran ? Parce que trois publics lisent votre code sans le voir :
les moteurs de recherche, qui repèrent le contenu réel grâce au main ;
les lecteurs d'écran, qui permettent à un visiteur aveugle de sauter
directement au contenu ou au menu ; et vous-même, six mois plus tard,
quand il faudra retrouver quelque chose dans le fichier.
- Toute page suit le même ordre : doctype, html, head, body.
- Le head décrit la page, le body la contient : le texte visible va dans le body.
- Les balises sémantiques nomment les zones au lieu de les empiler en div.
- Un seul <main> par page ; header et footer se répètent d'une page à l'autre.
- Un <article> est autonome, une <section> regroupe autour d'un thème.
Le plan de la page est posé. La microressource suivante s'occupe de l'habillage : où ranger le CSS, et pourquoi jamais dans le HTML.
Microressource 2 — Séparer le CSS dans un fichier à part →