<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
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
<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
<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
<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