206 – La structure des pages HTML

Une structure simple

Si nous reprenons notre exemple de structure de page indiquée au début de ce chapitre, nous pouvons le modifier pour le mettre en HTML5.

images/chap04-003.png

Dans l’élément <header>, vous retrouverez les éléments d’en-tête de la page, avec le logo, le slogan par exemple.

Dans l’élément <nav> placé à gauche, vous trouverez les liens pour naviguer au sein de ce site.

Tous les articles de ce blog seront placés dans des éléments <article>, bien sûr !

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

Une structure plus élaborée

Voici une structure d’un site un peu plus élaborée :

images/chap04-004.png

Nous retrouvons un élément <header>, maintenant classique.

En dessous, nous avons un premier élément <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 différents. Chaque <section> contient un élément <article> pour le contenu rédactionnel et un élément <aside> pour afficher des éléments d’information supplémentaire liés à l’article (iconographie, liens…).

Enfin, la page se termine par un pied de page <footer> pour afficher les informations légales, les conditions de vente, un lien de contact, un plan d’accès…

Bien sûr, chaque élément de structure devra utiliser un identifiant unique ou une classe commune à plusieurs éléments.

La structure d’un article

Voilà la structure de ce que pourrait être un article d’un site en HTML5.

images/chap04-005.png

Nous avons un élément <article> comme conteneur général.

Nos articles contiennent des en-têtes, des introductions, nous utilisons donc l’élément <header>. L’élément <header> contient le titre, <h1>, de l’article et son sous-titre, <h2>.

Le contenu rédactionnel de l’article est placé dans des éléments <p>. L’article contient des liens vers des compléments d’articles, listés dans une liste <ul>.

Enfin, l’article se termine par un pied de page <footer>, ou plutôt un pied d’article, avec la date de publication, la rubrique de l’article et le nom de l’auteur par exemple.