<search>

Description

L’élément <search> est un conteneur sémantique pour une interface de recherche ou de filtrage. Il crée automatiquement un landmark ARIA search, permettant aux utilisateurs de technologies d’assistance de naviguer directement vers la zone de recherche. Il peut contenir un <form>, un <input type="search"> et un bouton.

Syntaxe

<search>
  <form role="search">
    <label for="q">Rechercher :</label>
    <input type="search" id="q" name="q">
    <button type="submit">Chercher</button>
  </form>
</search>

Exemples

Barre de recherche dans la navigation :

<header>
  <nav>…</nav>
  <search aria-label="Recherche sur le site">
    <form action="/recherche" method="get">
      <input type="search" name="q" placeholder="Rechercher…" aria-label="Terme de recherche">
      <button type="submit">OK</button>
    </form>
  </search>
</header>

Filtrage de liste :

<search aria-label="Filtrer les produits">
  <input type="search" id="filtre" placeholder="Filtrer…" aria-controls="liste-produits">
</search>
<ul id="liste-produits">…</ul>

Notes

Élément récent : <search> a été ajouté à la spécification HTML en 2023. Support universel dans les navigateurs modernes dès mi-2023. Pour les anciens navigateurs, un polyfill ou role="search" sur un <div> est une alternative.

Landmark search : sans <search>, obtenir ce landmark nécessitait <form role="search"> ou <div role="search">. <search> simplifie cette pratique.