Les langages HTML HTML sémantique et accessibilité

Les zones de la page

Une page a presque toujours les mêmes zones, et HTML a une balise pour chacune :

<header>
    <nav>
        <a href="/">Accueil</a>
        <a href="/regles">Règles</a>
    </nav>
</header>

<main>
    <article>
        <h2>Fête des récoltes</h2>
        <p>...</p>
    </article>
    <aside>Prochain atelier : samedi 10 h</aside>
</main>

<footer>
    <p>© Jardin partagé</p>
</footer>

Balise	Rôle
`<header>`	l'en-tête : logo, titre, navigation principale
`<nav>`	un groupe de liens de navigation
`<main>`	le contenu principal -- un seul par page
`<article>`	un contenu qui aurait du sens seul : une actualité, un message
`<section>`	une partie thématique, avec son propre titre
`<aside>`	un complément, en marge du sujet
`<footer>`	le pied de page

Pourquoi pas des div ?

<div> ne veut rien dire : c'est une boîte neutre, utile pour la mise en page. Les balises ci-dessus, elles, annoncent leur rôle. Un lecteur d'écran propose de sauter directement au contenu principal ou à la navigation ; les moteurs de recherche savent où se trouve l'essentiel. Une page faite de <div> a la même apparence, mais n'offre aucun de ces raccourcis.

1 exercice pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

Une page bien structurée moyen lecon a valider