HTML Sémantique et Structure de Page

Jusqu'à présent, vous avez appris à construire des éléments sur une page web. Améliorons maintenant la structure et la compréhension de votre contenu.

Qu'est-ce que le HTML sémantique ?

Le HTML sémantique consiste à utiliser des éléments qui décrivent clairement la fonction de votre contenu. Au lieu d'utiliser des conteneurs génériques comme <div>, vous utilisez des balises significatives telles que :

• <header> ;
• <nav> ;
• <section> ;
• <article> ;
• <footer>.

Pourquoi est-ce important

• Aide les navigateurs et les développeurs à comprendre la structure de votre page ;
• Améliore l'accessibilité (les lecteurs d'écran en dépendent) ;
• Permet aux moteurs de recherche d'interpréter plus efficacement votre contenu.

Éléments sémantiques courants

<header>

Représente la partie supérieure d'une page ou d'une section (logo, titre, navigation).

<header>
  <h1>My Website</h1>
</header>

<nav>

Définit les liens de navigation.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
  </ul>
</nav>

<section>

Regroupe le contenu lié.

<section>
  <h2>Services</h2>
  <p>We offer web development...</p>
</section>

<article>

Représente un contenu autonome (par exemple, un article de blog).

<article>
  <h2>Blog Post</h2>
  <p>Content goes here...</p>
</article>

<footer>

Définit la partie inférieure d'une page.

<footer>
  <p>&copy; My Website</p>
</footer>

Aperçu de l'ensemble