Le HTML s\u00e9mantique fait r\u00e9f\u00e9rence \u00e0 l’utilisation d’\u00e9l\u00e9ments HTML de mani\u00e8re significative afin de mieux communiquer la structure et la hi\u00e9rarchie d’une page web aux yeux du robot des moteurs de recherche.<\/p>\n
Ce sc\u00e9nario am\u00e9liore l’accessibilit\u00e9 et donc l’indexation par les moteurs de recherche gr\u00e2ce \u00e0 l’utilisation d’un code structur\u00e9 qui pr\u00e9pare le positionnement organique gr\u00e2ce \u00e0 des marqueurs qui d\u00e9finissent sans ambigu\u00eft\u00e9 l’objectif des diff\u00e9rents \u00e9l\u00e9ments qui composent les pages.<\/p>\n<\/div>
<\/div><\/div>
<\/span>\u00c9l\u00e9ments HTML s\u00e9mantiques<\/h3><\/span><\/div><\/div><\/div>
Voyons ensemble quels sont les \u00e9l\u00e9ments cl\u00e9s qui distinguent le Html s\u00e9mantique du Html traditionnel et quelles sont les meilleures pratiques pour am\u00e9liorer la structure au niveau du r\u00e9f\u00e9rencement :<\/p>\n
\n- Utilisation de balises s\u00e9mantiques<\/b>: utilisez des balises telles que <en-t\u00eate>, <pied de page>, <nav>, <article>, <section>, <\u00e0 part>, <principal>etc., afin de d\u00e9limiter clairement les sections de la page et leur objectif.<\/li>\n
- Structure logique<\/b>: organiser le contenu de mani\u00e8re logique et hi\u00e9rarchique. <> <> Par exemple, utilisez h1 pour les titres principaux, h2 pour les sous-titres et ainsi de suite, afin de refl\u00e9ter la structure du contenu.<\/li>\n
- Description du contenu<\/b>: utilisez les balises appropri\u00e9es pour d\u00e9crire le type de contenu. Par exemple, utilisez <p> pour les paragraphes de texte, <ul> e <ol> pour les listes ordonn\u00e9es et non ordonn\u00e9es, <chiffres> e <figcaption> pour les images avec l\u00e9gende, etc.<\/li>\n
- Attributs s\u00e9mantiques<\/b>: utilisez des attributs tels que alt pour les images afin de fournir un texte alternatif, title pour fournir des informations suppl\u00e9mentaires sur les liens, etc. afin d’am\u00e9liorer l’accessibilit\u00e9 et l’exp\u00e9rience des utilisateurs.<\/li>\n
- <> <> \u00c9vitez l’utilisation excessive de balises<\/b> g\u00e9n\u00e9riques : \u00c9vitez l’utilisation excessive de balises g\u00e9n\u00e9riques telles que div et span lorsque des balises s\u00e9mantiques plus sp\u00e9cifiques sont appropri\u00e9es et disponibles.<\/li>\n<\/ul>\n<\/div>
<\/div><\/div>
<\/span>Exemple de HTML s\u00e9mantique<\/h3><\/span>