Elementul <search> este cel mai nou tag semantic adăugat în standardul oficial HTML (standardizat de WHATWG și W3C în 2023). El reprezintă o secțiune dedicată căutării sau filtrării conținutului dintr-un site web, o aplicație sau un document.
Înainte de introducerea acestui tag, dezvoltatorii erau nevoiți să utilizeze un div generic cu atributul ARIA <div role="search"> sau un formular <form role="search"> pentru ca tehnologiile asistive (cititoarele de ecran) să poată identifica zona de căutare. Tagul <search> înlocuiește complet această practică veche, oferind o valoare semantică nativă.
Exemplu de utilizare corectă a tagului <search>
<!-- Bară de căutare principală în antetul site-ului -->
<search>
<form action="/cauta" method="get">
<label for="site-search">Caută pe site:</label>
<input type="search" id="site-search" name="q" placeholder="Introdu cuvântul cheie..." required>
<button type="submit">Caută</button>
</form>
</search>
<!-- Filtrare dinamică a unei liste de produse (fără trimitere formular) -->
<search>
<label for="filtru-pret">Filtrează după preț maxim:</label>
<input type="range" id="filtru-pret" min="10" max="500" value="250" oninput="actualizeazaProduse(this.value)">
</search>Bune Practici și Reguli de Accesibilitate
- Nu adăuga
role="search": Elementul<search>are implicit rolul ARIA search în toate browserele moderne. Adăugarea manuală a atributului este redundantă. - Nu doar pentru formulare globale: Poate fi utilizat și local pentru căutări în interiorul unui tabel, filtrarea unei liste sau căutarea într-un catalog de produse.
- Compatibilitate: Este suportat nativ în toate browserele moderne (Chrome 118+, Safari 17+, Firefox 118+, Edge 118+).