3.1 Balise <main>
HTML5 a introduit de nombreux nouveaux éléments sémantiques qui aident les développeurs à créer des pages web mieux structurées et plus compréhensibles. Parmi eux, les balises <main> et <aside> occupent une place particulière, utilisées respectivement pour créer des conteneurs pour le contenu principal et supplémentaire.
La balise <main> désigne le contenu principal du document. Elle est utilisée pour placer le contenu unique et clé pour cette page. Le contenu à l'intérieur de la balise <main> doit être unique pour chaque page et ne pas contenir d'éléments qui se répètent sur toutes les pages, comme les logos, les panneaux latéraux, les liens de navigation ou les pieds de page.
Syntaxe :
<main>
<!-- Contenu principal de la page -->
</main>
Exemple d'utilisation :
<body>
<header>
<h1>Website Header</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
Caractéristiques principales :
- Contenu : la balise
<main>doit contenir le contenu principal de la page, qui est unique pour cette page - Emplacement : il ne doit y avoir qu'une seule balise
<main>par page - Accessibilité : la balise
<main>améliore l'accessibilité de la page, aidant les technologies d'assistance (comme les lecteurs d'écran) à trouver plus rapidement le contenu principal
Application :
- Contenu principal de la page
- Contenu unique lié à la page actuelle
Avantages :
- Balise sémantique : aide les moteurs de recherche et les technologies d'assistance à comprendre ce qui constitue le contenu principal de la page
- Amélioration de la structure de la page : sépare clairement le contenu principal des autres parties de la page, telles que les en-têtes, les panneaux latéraux et les pieds de page
Particularités :
- Doit contenir un contenu unique pour la page
- Ne doit pas inclure d'éléments qui se répètent sur d'autres pages (par exemple, les barres de navigation, les panneaux latéraux, les pieds de page)
3.2 Balise <aside>
La balise <aside> est utilisée pour désigner le contenu supplémentaire qui est lié au contenu principal, mais qui ne fait pas partie du flux principal du document. Elle est généralement utilisée pour les panneaux latéraux contenant des publicités, des liens vers des articles connexes, des biographies d'auteurs et d'autres éléments auxiliaires.
Syntaxe :
<aside>
<!-- Contenu supplémentaire -->
</aside>
Exemple d'utilisation :
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
Caractéristiques principales :
- Contenu : la balise
<aside>contient des informations supplémentaires liées au contenu principal, mais ne fait pas partie du flux principal du document. - Emplacement : peut être placé à l'intérieur ou à l'extérieur de la balise
<main>, selon le contexte. - Application : utilisé pour les panneaux latéraux, les blocs publicitaires, les liens vers des articles connexes et d'autres informations auxiliaires.
Application :
- Panneaux latéraux avec des informations supplémentaires
- Blocs publicitaires
- Liens vers des ressources connexes
- Matériel supplémentaire lié au contenu principal
Avantages :
- Balise sémantique : aide les moteurs de recherche et les technologies d'assistance à comprendre qu'il s'agit de contenu auxiliaire par rapport au contenu principal
- Amélioration de la structure de la page : sépare clairement le contenu supplémentaire du contenu principal, rendant la page plus organisée et facile à comprendre
Particularités :
- Contient du contenu qui est lié au principal mais n'en fait pas partie
- Peut être utilisé pour des panneaux latéraux, des blocs publicitaires, des abonnements et d'autres matériels supplémentaires
GO TO FULL VERSION