← Retour au blog
HTML, Sémantique, Veille

Adieu <div role='search'>, bonjour <search>

Une nouvelle balise sémantique

Depuis des années, pour définir une zone de recherche selon les bonnes pratiques ARIA, nous devions écrire :

<form role="search">
  <!-- inputs -->
</form>

Désormais, le standard HTML a introduit la balise <search>. Elle a le même poids sémantique que <main>, <nav> ou <header>.

Utilisation moderne

<header>
  <h1>Mon Site</h1>

  <!-- La nouvelle méthode -->
  <search>
    <form action="/recherche">
      <label for="q">Rechercher</label>
      <input type="search" id="q" name="q" />
      <button type="submit">Go</button>
    </form>
  </search>
</header>

C'est une petite évolution, mais elle rend le HTML plus propre et évite l'utilisation d'attributs ARIA quand une balise native existe. C'est la règle d'or de l'accessibilité : Native HTML > ARIA.