Un nuovo elemento semantico è approdato allo standard HTML : <search>. Rappresenta una sezione del documento utilizzata per cercare o filtrare . Dovrebbe contenere controlli del modulo (come input di testo, elenchi a discesa, pulsanti, ecc.) e l'ambito della ricerca/filtro può essere qualsiasi cosa: dallo stesso documento all'intera Internet.

Come funziona

Prima dell'elemento <search>, potremmo aggiungere a role="search"al <form>tag per indicare che il modulo era per la ricerca:

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

Nota: anche se non abbiamo bisogno di un <form>tag per creare un componente di ricerca, è interessante (e anche necessario) averne uno, quindi la ricerca funzionerebbe anche senza JavaScript, o seguendo una strategia di miglioramento progressivo.

Un'altra cosa fondamentale da notare è che una regione di ricerca non deve essere un input di testo con un pulsante per la ricerca sul sito Web o online. Possiamo usare <search>per filtrare i risultati o le righe della tabella. La sua utilità va oltre i semplici input di testo e le caselle di ricerca:

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

Avere un elemento per identificare le regioni di ricerca è utile. Come specifica Scott O'Hara in questo articolo , è stato l'unico ruolo fondamentale di ARIA che fino ad ora non aveva un equivalente semantico in HTML:

• bandiera →<header>
• complementare →<aside>
• info contenuto →<footer>
• forma →<form>
• principale →<main>
• navigazione →<nav>
• regione → <section>(con un nome accessibile)
• cerca → ???

…ma, dal punto di vista di un programmatore, sembra che non sia all'altezza o non aggiunga molto all'implementazione esistente. Altri elementi semantici potrebbero aumentare l'accessibilità e semplificare il modo in cui codifichiamo componenti specifici. Ad esempio, qualcosa come <tabpanel>e <tab>sarebbe stato considerevolmente più avvincente e prezioso, secondo la mia onesta opinione.

Ciò non toglie nulla alla sua importanza. Tutti i miglioramenti, anche i più piccoli, sono i benvenuti. E sarà così per <search>. Un'eccellente nuova aggiunta alla famiglia HTML.

Maggiori informazioni

• HTML Living Standard: L'elemento di ricerca .
• L'elemento di ricerca , di Scott O'Hara.

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Corso di colloquio di codifica gratuito ⇒ Visualizza il corso
• Seguici: Twitter | Linkedin | Notiziario