Semantic HTML

HTML / CSS 🟢 Junior

Definition

Utilisation de balises HTML qui décrivent le sens du contenu plutôt que son apparence. Les éléments comme <article>, <nav>, <aside> communiquent la structure aux navigateurs, lecteurs d'écran et moteurs de recherche.

Analogie

Comme les panneaux de signalisation routière : un panneau 'hôpital' dit ce que c'est, pas juste 'bâtiment bleu'.

Exemple de code

<article>
  <header><h1>Titre</h1></header>
  <section><p>Contenu</p></section>
  <footer><time>2024</time></footer>
</article>

Cas d'usage

Sur chaque page web pour améliorer le SEO, l'accessibilité et la maintenabilité du code.

Anti-pattern

Utiliser uniquement des <div> et <span> pour structurer toute la page (divitis).
#core#interview#accessibility#seo