Was ist die beste semantische Möglichkeit, einen Suchbereich zu umbrechen?

Question

Ich möchte die verbesserte Semantik von HTML5 nutzen. Ich erstelle einen Suchbereich und der Suchbereich sollte einen Hintergrund haben und suchbezogene Dinge wie Autocomplete und Suchhinweise enthalten.

Gibt es einen Konsens darüber, um welche Art von Element es sich bei einem Suchgebiet handelt?

• Sollte es ein NAV sein, weil Suchen eine Methode der Navigation ist?
• Sollte es ein SEKTION sein, weil es ein diskreter Abschnitt der Seite ist?
• Sollte es ein DIV sein, weil das Wrapping von suchbezogenen Elementen keine klare Semantik hat?

Das Markup ist so etwas wie dieses:

<?whatElement?> 
    <input type="search" placeholder="Search for a name or ID..." required /> 
    <a href="#" class="search button">Search</a> 
</?whatElement?> 

Vielen Dank für Ihre Gedanken.

Answer 1

Ich bin mir bewusst, diese Frage bereits eine gewählte Antwort, aber es rangiert so hoch, in meinem Google-Suche nach „semantischen Suchformular“, dass ich das Bedürfnis zu tragen, was ich glaube, eine etwas bessere Antwort zu sein , semantisch und vom Standpunkt der Standards.

<section role="search"> 
 
    <form action="#" method="get"> 
 
     <fieldset> 
 
      <legend>Search this website:</legend> 
 
      <label for="s"> 
 
       <input type="search" name="s" id="s" placeholder="Search..." maxlength="200" /> 
 
      </label> 
 
      <button type="submit" title="Search this website now">Submit</button> 
 
     </fieldset> 
 
    </form> 
 
</section>

Natürlich habe ich eine Reihe von Annahmen und den HTML-Code mit einigen Standardwerten gefüllt (Action, erhalten, die ID und den Namen des Eingangs, usw.) und ohne Klassennamen für die Elemente (die ich immer zu Gattungsnamen oder, Himmel verboten, IDs) benutze, aber du solltest dich an deine eigenen Bedürfnisse anpassen.

Zum Beispiel, einige Ergänzungen auf den ausgezeichneten Beiträge oben: das erste Kind von jeder Form sollten immer einen <fieldset> Tag sein und haben ein <legend> angebracht (sichtbar oder nicht - https://www.w3.org/TR/WCAG20-TECHS/H71.html) und alle <input> Tags a angeschlossen haben sollten <label> Tag durch die for und id Eigenschaften (https://www.w3.org/TR/WCAG20-TECHS/H44.html - Ich finde es einfacher, nur die Eingabe in das Etikett wickeln, um nicht zu vergessen, sie zu verbinden). Alle Call-to-Action-Elemente sollten einen Titel haben (für SEO und Usability, um die Aktion zu verstärken, bevor der Benutzer sie macht), etc.

Answer 2

Wie wäre:

<form> 
    <input type="search" name="" value="" /> 
    <input type="submit" value="Search" /> 
</form> 

Answer 3

Die HTML5-Spezifikation sagt über das section Element:

Rolle muss entweder Region, Dokument, Anwendung, Content, Haupt, Suche, alarm, dialog, alertdialog, status oder log

so würde ich das verwenden.

Answer 4

<section role="search"> 

Das role Attribut ist ein ARIA landmark:

Ein Meilenstein Region, die eine Sammlung von Gegenständen und Objekten, die als Ganzes, kombinieren, um eine Suchfunktion zu erstellen.