1. A propos des balises sémantiques

Les balises sémantiques en HTML sont conçues pour apporter de la signification et de la structure au contenu d'une page web. Elles aident à définir clairement la hiérarchie et la relation entre différentes parties du contenu. Ces balises ne sont pas seulement utilisées pour la présentation visuelle, mais aussi pour améliorer l'accessibilité et l'interprétation du contenu par les moteurs de recherche et les technologies d'assistance. Chaque balise sémantique a un objectif spécifique, comme délimiter un en-tête, un contenu principal, des sections thématiques, du contenu autonome ou complémentaire, des pieds de page et plus encore. Utiliser ces balises correctement aide à créer des pages web mieux structurées et plus compréhensibles pour tous les utilisateurs. Ces balises sémantiques sont conçues pour améliorer la structure et la signification du contenu sur une page web. En utilisant ces balises, vous pouvez créer une hiérarchie claire et donner un sens sémantique à votre contenu, ce qui facilite la compréhension pour les navigateurs, les moteurs de recherche et les développeurs.

2. Liste des balises sémantiques

Comme mentionné ci-dessus, les balises sémantiques font référence aux balises HTML utilisées pour donner du sens et de la structure au contenu web. Elles aident non seulement à définir la mise en forme, mais aussi à indiquer la signification et la hiérarchie du contenu pour les moteurs de recherche, les lecteurs d'écran et d'autres technologies.

Voici quelques-unes des balises sémantiques les plus couramment utilisées en HTML5 :

1. <header> : Définit l'en-tête ou la section d'en-tête d'une page ou d'une section.
2. <nav> : Représente une section de navigation.
3. <main> : Indique le contenu principal d'une page. Il ne devrait y avoir qu'un élément <main> par page.
4. <article> : Encapsule un contenu autonome et distribuable, tel qu'un article de blog, une publication, etc.
5. <section> : Définit une section thématique ou un groupe de contenu lié.
6. <aside> : Utilisé pour contenir des informations complémentaires ou non essentielles. Souvent utilisé pour des éléments comme des barres latérales.
7. <footer> : Définit le pied de page ou la section de pied de page d'une page ou d'une section.
8. <figure> : Utilisé pour encapsuler du contenu multimédia, généralement accompagné d'une légende à l'intérieur d'un élément <figcaption>.
9. <figcaption> : Utilisé à l'intérieur d'un élément <figure> pour fournir une légende descriptive du contenu multimédia.
10. <time> : Utilisé pour représenter une date ou une heure, souvent utilisé en conjonction avec l'attribut datetime.
11. <mark> : Utilisé pour mettre en évidence ou surligner du texte.
12. <cite> : Utilisé pour indiquer la source d'une citation.
13. <blockquote> : Utilisé pour citer un contenu plus long provenant d'une autre source.
14. <q> : Utilisé pour citer une courte section de texte à l'intérieur d'une phrase.
15. <abbr> : Utilisé pour représenter une abréviation ou un acronyme, avec une description complète généralement fournie via l'attribut title.
16. <address> : Utilisé pour fournir des informations de contact pour l'auteur d'une page ou d'une section.
17. <dfn> : Utilisé pour définir un terme technique ou une notion.
18. <code> : Utilisé pour afficher du code informatique.
19. <kbd> : Utilisé pour représenter une entrée clavier, comme une combinaison de touches.
20. <samp> : Utilisé pour afficher la sortie d'un programme ou un exemple de contenu.

3. Exemples d'usages des balises sémantiques

Voici un exemple simple d'utilisation pour chaque balise sémantique HTML sous forme d'un code HTML complet qui présente l'utilisation de chaque balise sémantique dans différents contextes. Veuillez noter que la mise en forme et le style sont volontairement simplifiés dans cet exemple pour se concentrer sur les balises sémantiques:

Younes Derfoufi
CRMEF OUJDA