<search>: Das generische Such-Element

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 die Teile des Dokuments oder der Anwendung mit Formularsteuerelementen oder anderem Inhalt zum Durchführen einer Such- oder Filteroperation repräsentiert. Das <search>-Element identifiziert semantisch den Zweck des Inhalts als Such- oder Filtermöglichkeiten. Die Such- oder Filterfunktionalität kann für die Website oder Anwendung, die aktuelle Webseite oder das Dokument oder das gesamte Internet oder einen Teil davon sein.

Attribute

Dieses Element umfasst nur die globalen Attribute.

Nutzungshinweise

Das <search>-Element ist nicht dazu gedacht, Suchergebnisse darzustellen. Stattdessen sollten Such- oder gefilterte Ergebnisse als Teil des Hauptinhalts auf dieser Webseite präsentiert werden. Dennoch gehören Vorschläge und Links, die Teil der "Schnellsuche" innerhalb der Such- oder Filterfunktionalität sind, angemessen in den Inhalt des <search>-Elements, da es sich um Suchfunktionen handelt.

Barrierefreiheit

Das <search>-Element definiert ein search Landmark. Dies macht die Hinzufügung von role=search zu einem <form>-Element überflüssig.

Beispiele

Header-Suchformular

Dieses Beispiel zeigt die Verwendung von <search> als Container für eine Suche innerhalb eines Website-Headers, um eine Website-weite 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 möglichen DOM-Inhalt bei der dynamischen Einbindung von JavaScript-Suchfunktionen in eine Webanwendung. Wenn die Suchfunktionalität vollständig mit JavaScript implementiert ist, ist weder ein <form>-Element noch ein Absende-<button> erforderlich. Aus semantischen Gründen wird das <search>-Element enthalten, um die Such- und Filtermöglichkeiten aufzunehmen.

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 hat JavaScript laufen, bis das JavaScript erfolgreich heruntergeladen, geparst und ausgeführt wurde. Stellen Sie sicher, dass Ihre Benutzer auf den Inhalt Ihrer Seite ohne JavaScript zugreifen können.

Mehrere Suchfunktionen

Dieses Beispiel zeigt eine Seite mit zwei Suchfunktionen. Die erste ist eine globale Website-Suche im Header. Die zweite ist eine Suche und Filterung basierend auf dem Seitenkontext, 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ßender Inhalt, spürbarer Inhalt.
Erlaubter Inhalt Fließender 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
# the-search-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch