Cours IT Bases HTML 016_Éléments sémantiques
Éléments sémantiques
HTML5 a introduit de nombreux éléments sémantiques dont le but est d’améliorer la sémantique de la structure du document, rendant le document plus lisible, maintenable et plus convivial pour les moteurs de recherche et les développeurs.
Une structure de page comprend généralement : en-tête, pied de page, titres, navigation, contenu, barre latérale, etc.
Utilisation de l’élément <div> pour concevoir la mise en page :
[!Résumé]
- Pas favorable pour les développeurs lors de l’écriture de code. Lorsque vous faites face à un écran rempli d’éléments
<div>, il est difficile de distinguer rapidement ce qu’ils signifient.- Pas favorable pour l’optimisation des moteurs de recherche (SEO). Le navigateur sait seulement que vous avez utilisé un élément
<div>, mais l’élément div lui-même n’a aucune signification, c’est juste un conteneur.
Utilisation d’éléments sémantiques pour concevoir la mise en page :
L’utilisation de <header> <nav> <main> <aside> <footer> pour représenter différentes zones sur la page donne à la page une bonne sémantique et structure, permettant aux développeurs et aux navigateurs de comprendre rapidement le contenu de la page web.
| Élément | Fonction |
|---|---|
<header> | Utilisé pour définir la zone d’en-tête de la page, comprenant généralement le logo du site web, la navigation principale, les liens globaux et un champ de recherche. |
<nav> | Utilisé pour définir la zone des liens de navigation de la page. |
<main> | Utilisé pour définir le contenu principal ou la fonction principale de la page. Ce contenu doit être unique sur la page. |
<aside> | Utilisé pour définir le contenu de la barre latérale de la page. Ce contenu est lié au contenu principal, mais est facultatif. |
<footer> | Utilisé pour définir la zone de pied de page de la page, comprenant généralement les informations de copyright, les informations de contact et d’autres informations pertinentes. |
<article> | Utilisé pour définir des articles, documents, pages, applications ou autres zones de contenu indépendantes. |
<section> | Utilisé pour définir une section indépendante générique sur une page web, contiendra généralement un titre ou des paragraphes, des blocs. |
<figure> | Utilisé pour définir des images, graphiques, photos, etc. indépendantes. |
<figcaption> | Utilisé pour fournir un titre ou une description pour l’élément <figure>. |
Exemple :
<!DOCTYPE html><html lang="en"><head> <title>Ma page web</title></head><body> <header> <h1>Ma page web</h1> </header>
<nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">À propos de moi</a></li> <li><a href="#">Contactez-moi</a></li> </ul> </nav>
<main> <article> <h2>Mon introduction</h2> <p>Mon nom est XXX, ceci est un exemple d'éléments sémantiques.</p> </article> </main>
<aside> <h2>Liens associés</h2> <ul> <li><a href="#">Mon blog</a></li> <li><a href="#">Ma page GitHub</a></li> </ul> </aside>
<footer> <p>Copyright 2023 XXX</p> </footer></body></html>Effet :
Cet exemple contient une page web qui utilise des éléments sémantiques HTML5 pour décrire la signification du contenu de la page web.
- L’élément
<header>définit la zone d’en-tête de la page, y compris le logo du site web et la navigation principale. - L’élément
<nav>définit la zone des liens de navigation de la page. - L’élément
<main>définit le contenu principal de la page, y compris mon article d’introduction. - L’élément
<aside>définit le contenu de la barre latérale de la page, y compris les liens associés. - L’élément
<footer>définit la zone de pied de page de la page, y compris les informations de copyright.
[!Résumé]
- Les moteurs de recherche peuvent mieux comprendre le contenu de la page web et améliorer le classement de la page web dans les résultats de recherche.
- Peut aider les personnes handicapées à comprendre plus facilement le contenu de la page web et améliorer l’accessibilité de la page web.
- Peut aider les développeurs à mieux organiser la structure de la page web et améliorer la maintenabilité de la page web.
Lien : 观鸟网 (roy-tian.github.io)