L'html sémantique est l'art d'utiliser les bonnes balises HTML pour décrire le sens du contenu, et non uniquement son apparence. Cette approche améliore simultanément l'accessibilité, le référencement naturel et la maintenabilité du code.
Qu'est-ce que le HTML sémantique ?
La sémantique en html, c'est utiliser Un document html bien structuré est comme un livre avec une table des matières, des chapitres et des paragraphes clairement délimités. Google peut alors extraire les informations clés plus facilement. HTML5 a introduit un ensemble de balises sémantiques qui remplacent avantageusement les Les balises Google pondère fortement les mots-clés présents dans les titres, en particulier le Les données structurées (Schema.org) enrichissent les snippets dans les résultats Google avec des étoiles, dates, prix ou FAQ. Elles s'intègrent dans le html via les attributs Alternativement, le format JSON-LD (recommandé par Google) s'intègre dans un pour une navigation, pour un contenu autonome, Les balises structurelles HTML5 essentielles
<header> <!-- En-tête de page ou de section -->
<nav> <!-- Navigation principale -->
<main> <!-- Contenu principal (unique par page) -->
<article> <!-- Contenu autonome et republié -->
<section> <!-- Section thématique avec titre -->
<aside> <!-- Contenu annexe (sidebar, publicité) -->
<footer> <!-- Pied de page ou de section -->
<figure> <!-- Illustration avec légende -->
<figcaption> <!-- Légende d'une figure -->
<time> <!-- Date et heure machine-readable -->
<address> <!-- Informations de contact -->
Hiérarchie des titres : l'épine dorsale html
à définissent la hiérarchie du contenu. Un seul par page (le titre principal), des pour les sections majeures, des pour les sous-sections. Ne sautez jamais de niveau pour des raisons stylistiques : utilisez CSS pour le design, html pour la structure.. La cohérence entre le titre, l'URL et le contenu est un signal SEO positif.Microdata et données structurées
itemscope, itemtype et itemprop :<article itemscope itemtype="https://schema.org/Article">
<h1 itemprop="headline">Mon titre d'article</h1>
<time itemprop="datePublished" datetime="2025-04-01">1er avril 2025</time>
<span itemprop="author">Benjamin Schweitzer</span>
</article>