Ein neues semantisches Element ist auf dem HTML-Standard gelandet : <search>. Es stellt einen Abschnitt des Dokuments dar, der zum Suchen oder Filtern verwendet wird . Es sollte Formularsteuerelemente (wie Texteingaben, Dropdowns, Schaltflächen usw.) enthalten, und der Umfang der Suche/Filterung kann beliebig sein: vom selben Dokument bis zum gesamten Internet.

Wie es funktioniert

Vor dem <search>Element könnten wir role="search"dem <form>Tag ein hinzufügen, um anzuzeigen, dass das Formular für die Suche bestimmt ist:

<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

<search>
  <form method="get" action="/search">
    <input type="search" name="search-text" />
    <button>Search</button>
  </form>
</search>

<search role="search">
   ...
</search>

Hinweis: Obwohl wir kein <form>Tag benötigen, um eine Suchkomponente zu erstellen, ist es interessant (und sogar notwendig), eines zu haben, damit die Suche auch ohne JavaScript oder nach einer progressiven Erweiterungsstrategie funktionieren würde.

Ein weiterer wichtiger Punkt ist, dass ein Suchbereich keine Texteingabe mit einer Schaltfläche zum Suchen auf der Website oder im Internet sein muss. Wir können <search>zum Filtern von Ergebnissen oder Tabellenzeilen verwenden. Seine Nützlichkeit geht über reine Texteingaben und Suchfelder hinaus:

<search>
  <h2>Filter results</h2>

  <form>
    <label for="cartype">Car type</label>
    <select id="cartype">
      <option value="coupe">Coupe</option>
      <option value="sedan">Sedan</option>
    </select>

    <label for="electric">Electric?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

Es ist schön, ein Element zu haben, um Suchregionen zu identifizieren. Wie Scott O'Hara in diesem Artikel angibt , war es die einzige ARIA-Markenzeichenrolle, die bis jetzt kein semantisches Äquivalent in HTML hatte:

• Banner →<header>
• komplementär →<aside>
• Inhaltsinfo →<footer>
• Formular →<form>
• Haupt →<main>
• Navigation →<nav>
• Region → <section>(mit zugänglichem Namen)
• suchen → ???

…aber aus der Perspektive eines Programmierers fühlt es sich so an, als ob es zu kurz greift oder der bestehenden Implementierung nicht viel hinzufügt. Andere semantische Elemente könnten die Zugänglichkeit verbessern und die Art und Weise, wie wir bestimmte Komponenten codieren, vereinfachen. Zum Beispiel wäre so etwas wie <tabpanel>und <tab>wesentlich überzeugender und wertvoller gewesen, meiner ehrlichen Meinung nach.

Das nimmt nichts von seiner Bedeutung. Alle Verbesserungen – auch die Kleinsten – sind willkommen. Und das wird für <search>. Ein ausgezeichneter Neuzugang in der HTML-Familie.

Mehr Informationen

• HTML Living Standard: Das Suchelement .
• Das Suchelement , von Scott O'Hara.

Danke, dass Sie ein Teil unserer Community sind! Bevor du gehst:

• Klatsche für die Geschichte und folge dem Autor
• Sehen Sie sich weitere Inhalte in der Level Up Coding-Publikation an
• Kostenloser Kurs für Programmierinterviews ⇒ Kurs anzeigen
• Folge uns: Twitter | LinkedIn | Newsletter