Baseline 2023
Newly available
Das <search> HTML-Element ist ein Container, der die Teile des Dokuments oder der Anwendung mit Formularsteuerelementen oder anderem Inhalt darstellt, die mit der Durchführung einer Such- oder Filteroperation verbunden sind. Das <search>-Element identifiziert semantisch den Zweck des Inhalts des Elements als mit Such- oder Filterfähigkeiten versehen. Die Such- oder Filterfunktionalität kann für die Website oder Anwendung, die aktuelle Webseite oder das Dokument, oder das gesamte Internet oder einen Unterabschnitt davon sein.
Dieses Element umfasst nur die globalen Attribute.
VerwendungshinweiseDas <search>-Element ist nicht dafür gedacht, Suchergebnisse darzustellen. Vielmehr sollten Such- oder gefilterte Ergebnisse als Teil des Hauptinhalts der Webseite präsentiert werden. Das heiÃt, Vorschläge und Links, die Teil der "Schnellsuche"-Funktionalität innerhalb der Such- oder Filterfunktion sind, sollten angemessen innerhalb des Inhalts des <search>-Elements geschachtelt sein, da sie Suchmerkmale sind.
Das <search>-Element definiert ein search-Landmark. Dies macht das Hinzufügen von role=search zu einem <form>-Element überflüssig.
Dieses Beispiel demonstriert 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.
Dieses Beispiel zeigt potenziellen DOM-Inhalt, wenn dynamisch JavaScript-Suchfunktionalität in eine Webanwendung integriert wird. Wenn die Suchfunktionalität vollständig mit JavaScript implementiert wird, ist weder ein <form>-Element noch ein Absende-<button> erforderlich, wenn kein Formular übermittelt wird. Aus semantischen Gründen wird das <search>-Element eingefügt, um die Such- und Filterfähigkeiten zu enthalten.
<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>
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 mit deaktiviertem JavaScript auf die Inhalte Ihrer Website zugreifen können.
Mehrfache SuchenDieses Beispiel zeigt eine Seite mit zwei Suchfunktionen. Die erste ist eine globale Seitensuche im Header. Die zweite ist eine Suche und ein Filter, die auf dem Seitenkontext basieren, 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>
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4