Un nuevo elemento semántico ha aterrizado en el estándar HTML : <search>. Representa una sección del documento que se utiliza para buscar o filtrar . Debe contener controles de formulario (como entradas de texto, menús desplegables, botones, etc.), y el alcance de la búsqueda/filtrado puede ser cualquier cosa: desde el mismo documento hasta todo Internet.

Cómo funciona

Antes del <search>elemento, podríamos agregar role="search"a la <form>etiqueta para indicar que el formulario era para buscar:

<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: si bien no necesitamos una <form>etiqueta para crear un componente de búsqueda, es interesante (e incluso necesario) tener una, para que la búsqueda funcione incluso sin JavaScript o siguiendo una estrategia de mejora progresiva.

Otra cosa importante a tener en cuenta es que una región de búsqueda no tiene que ser una entrada de texto con un botón para buscar en el sitio web o en línea. Podemos usar <search>para filtrar resultados o filas de tablas. Su utilidad va más allá de las entradas de texto y los cuadros de búsqueda:

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

Tener un elemento para identificar regiones de búsqueda es bueno. Como especifica Scott O'Hara en este artículo , hasta ahora era el único rol emblemático de ARIA que no tenía un equivalente semántico en HTML:

• pancarta →<header>
• complementario →<aside>
• información de contenido →<footer>
• formulario →<form>
• principal →<main>
• navegación →<nav>
• región → <section>(con un nombre accesible)
• buscar → ???

…pero, desde la perspectiva de un programador, parece que se queda corto o no agrega mucho a la implementación existente. Otros elementos semánticos podrían impulsar la accesibilidad y simplificar la forma en que codificamos componentes específicos. Por ejemplo, algo como <tabpanel>y <tab>hubiera sido considerablemente más convincente y valioso, en mi honesta opinión.

Eso no le quita nada de su importancia. Todas las mejoras, incluso las más pequeñas, son bienvenidas. Y ese será el caso de <search>. Una excelente nueva adición a la familia HTML.

Más información

• HTML Living Standard: El elemento de búsqueda .
• El elemento de búsqueda , de Scott O'Hara.

¡Gracias por ser parte de nuestra comunidad! Antes de que te vayas:

• Aplaude la historia y sigue al autor
• Ver más contenido en la publicación Level Up Coding
• Curso gratuito de entrevista de codificación ⇒ Ver curso
• Síguenos: Twitter | LinkedIn | Boletin informativo