Layout
La mise en page d’une page web - communément appelée “layout” - est importante pour un site internet.
Tel qu’il a été expliqué dans les cours précédents, le HTML est un langage de balises, chaque balise permettant d’indiquer au navigateur à quoi correspond un élément. Ainsi, pour améliorer la sémantique du langage HTML - sémantique signifiant “qui concerne le sens, la signification” - et savoir à quoi correspond chaque section d’une page HTML lors du travail de mise en page, le langage met à disposition un certain nombre de balises.
Eléments de mise en page
Le langage HTML dispose de plusieurs balises permettant de “structurer” un site afin d’améliorer sa sémantique.
Remarque : Tous ces éléments de structure se trouvent entre les balises <body></body> du fichier HTML.
Ci-dessous, la liste des éléments sémantiques mis à disposition pour l’amélioration de la structure d’un document HTML :
<header>: Définit un en-tête pour un document ou une section. À ne pas confondre avec l’élément<head></head>. Dans une page HTML, le header contient généralement le logo.<nav>: Cet élément entoure une barre de navigation (menu).<section>: Définit une section dans un fichier HTML<article>: Définit un contenu indépendant et autonome, généralement le contenu de la page web ou de la section en cours.<aside>: Définit un contenu qui sera mis “sur le côté”. En d’autre termes, cet élément est utilisé afin de définir un contenu qui ne peut être mis dans un<article>(des informations supplémentaires, par exemple).<footer>: Définit un pied de page pour un document ou une section<details>: Définit des détails supplémentaires que l'utilisateur peut ouvrir et fermer à la demande
Exemple d’une structure HTML reprenant les éléments ci-dessus :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Titre de la page web</title>
</head>
<body>
<header>
Logo
</header>
<nav>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
<li><a href="#">Lien 3</a></li>
</ul>
</nav>
<section>
<article>
<p>Je suis un paragraphe contenu dans la balise article</p>
</article>
<aside>
<p>Je contiens des informations supplémentaires</p>
</aside>
</section>
<footer>
Ici se trouvent généralement un lien pour contacter le propriétaire du site et les droits d'auteur
</footer>
</body>
</html>
Éléments de mise en page
Element <section>
Besoin d'aide ?
Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !
