Sommaire

Deux exemples de Structure sémantiquestructure Page:structure sémantiquesémantique de Pagepage

1. Une structure sémantique simple

Voici la structure sémantique très simple d’un premier exemple :

images/C06-001.png

Nous avons :

  • Un en-tête <header> dans la partie supérieure, avec un logo et un slogan par exemple.

  • Une barre de navigation <nav> sur la partie gauche de la page.

  • Toutes les actualités du site pourront être placées dans des éléments <article>

  • Enfin, le pied de page <footer> pourra contenir les mentions légales, les liens de contact, etc.

2. Une structure sémantique plus élaborée

Voici une deuxième structure plus élaborée :

images/C06-002.png

Nous avons :

  • Un en-tête <header> dans la partie supérieure.

  • En dessous, une barre de navigation <nav> pour la navigation générale dans le site, pour naviguer de page en page.

  • Sur la gauche, une deuxième boîte <nav> est faite pour la navigation secondaire, pour des liens liés directement au contenu de la page affichée.

  • Sur la droite, un élément <aside> affiche des informations liées au contenu de la page, comme des liens promotionnels, des contenus en relation...

  • Le contenu de la page est affiché dans deux éléments <section> permettant ainsi de bien différencier ces deux contenus. Chaque élément <section> contient un élément ...