<search>: Das generische Suchelement

Baseline 2023

Newly available

Since October 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das <search> HTML-Element ist ein Container, der Teile des Dokuments oder der Anwendung mit Formelementen oder anderem Inhalt repräsentiert, die für eine Such- oder Filteroperation relevant sind. Das <search>-Element identifiziert semantisch den Zweck des Inhalts als mit Such- oder Filterfunktionen versehen. Die Such- oder Filterfunktionalität kann für die Webseite oder Anwendung, die aktuelle Webseite oder das Dokument oder für das gesamte Internet oder einen Teil davon sein.

Attribute

Dieses Element beinhaltet nur die globalen Attribute.

Nutzungshinweise

Das <search>-Element ist nicht dafür gedacht, Suchergebnisse darzustellen. Stattdessen sollten Such- oder gefilterte Ergebnisse als Teil des Hauptinhalts dieser Webseite präsentiert werden. Vorschläge und Links, die Teil der "Schnellsuche"-Funktionalität innerhalb der Such- oder Filterfunktionalität sind, sollten jedoch angemessen innerhalb des Inhalts des <search>-Elements verschachtelt sein, da sie Suchfunktionen darstellen.

Barrierefreiheit

Das <search>-Element definiert ein search Landmark. Dadurch entfällt die Notwendigkeit, role=search zu einem <form>-Element hinzuzufügen.

Beispiele

Suche im Kopfbereich

Dieses Beispiel demonstriert die Verwendung von <search> als Container für eine Suche innerhalb eines Website-Kopfbereichs, um eine einfache, seitenweite Suche durchzuführen. Das <search> ist ein semantischer Container für das <form>, das die vom Benutzer eingegebene Suchanfrage an einen Server sendet.

HTML

html
<header>
  <h1>Movie website</h1>
  <search>
    <form action="./search/">
      <label for="movie">Find a Movie</label>
      <input type="search" id="movie" name="q" />
      <button type="submit">Search</button>
    </form>
  </search>
</header>

Ergebnis

Web-App-Suche

Dieses Beispiel zeigt potenziellen DOM-Inhalt bei der dynamischen Einbindung von JavaScript-Suchfunktionen in einer Webanwendung. Wenn die Suchfunktion vollständig mit JavaScript implementiert wird und kein Formular gesendet wird, sind weder ein <form>-Element noch ein submit <button> erforderlich. Aus semantischen Gründen wird das <search>-Element hinzugefügt, um die Such- und Filterfunktionen einzuschließen.

HTML

html
<search>
  <label>
    Find and filter your query
    <input type="search" id="query" />
  </label>
  <label>
    <input type="checkbox" id="exact-only" />
    Exact matches only
  </label>

  <section>
    <h3>Results:</h3>
    <ul id="results">
      <!-- search result content -->
    </ul>
    <output id="no-results">
      <!-- no results content -->
    </output>
  </section>
</search>

Ergebnis

Hinweis: Denken Sie daran, dass einige Benutzer kein JavaScript haben und keiner Ihrer Benutzer JavaScript ausführt, bis das JavaScript erfolgreich heruntergeladen, geparst und ausgeführt wird. Stellen Sie sicher, dass Ihre Benutzer auf den Inhalt Ihrer Seite ohne JavaScript zugreifen können.

Mehrere Suchen

Dieses Beispiel zeigt eine Seite mit zwei Suchfunktionen. Die erste ist eine globale Site-Suche im Kopfbereich. Die zweite ist eine Suche und Filterung basierend auf dem Kontext der Seite, in unserem Beispiel eine Autosuche.

HTML

html
<body>
  <header>
    <h1>Car rental agency</h1>
    <search title="Website">...</search>
  </header>
  <main>
    <h2>Cars available for rent</h2>
    <search title="Cars">
      <h3>Filter results</h3>
      ...
    </search>
    <article>
      <!-- search result content -->
    </article>
  </main>
</body>

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Fließinhalt, greifbarer Inhalt.
Erlaubter Inhalt Fließinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch.
Implizite ARIA-Rolle search
Erlaubte ARIA-Rollen form, group, none, presentation, region, search
DOM-Schnittstelle [`HTMLElement`](/de/docs/Web/API/HTMLElement)

Spezifikationen

Specification
HTML Standard
# the-search-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch