La Etiqueta SEARCH

Es un elemento semántico introducido en HTML5 que se utiliza para definir una sección de una página web dedicada a funcionalidades de búsqueda. Su propósito es agrupar elementos relacionados con búsquedas.

La etiqueta <search> es un elemento semántico introducido en HTML5 que se utiliza para definir una sección de una página web dedicada a funcionalidades de búsqueda. Su propósito es agrupar elementos relacionados con búsquedas (como formularios, campos de entrada o botones) y mejorar la accesibilidad y el SEO al proporcionar contexto claro a navegadores y herramientas de asistencia. Aquí te explicamos cómo implementarla correctamente.

¿Qué es la etiqueta `<search>`?

Propósito: Identificar un bloque de contenido relacionado con búsquedas (por ejemplo, un formulario de búsqueda en un sitio web).
Semántica: Ayuda a los motores de búsqueda y lectores de pantalla a entender que el contenido dentro de esta etiqueta está vinculado a acciones de búsqueda.
Relacionado: A menudo se combina con elementos como <form>, <input>, <button>, o <label>.

Sintaxis básica

<search>
  <!-- Elementos de búsqueda aquí -->
</search>

Ejemplo mínimo:

<search>
  <form action="/buscar" method="get">
    <input type="search" name="q" placeholder="Buscar...">
    <button type="submit">Buscar</button>
  </form>
</search>

Atributos relevantes

La etiqueta <search> no tiene atributos exclusivos, pero puede usar atributos globales como:

role: Define el rol ARIA (por ejemplo, role="search").
aria-label: Proporciona una etiqueta descriptiva para accesibilidad.

Ejemplo con ARIA:

<search role="search" aria-label="Buscar en el sitio">
  <form>...</form>
</search>

Casos de uso comunes

a) Búsqueda en un sitio web

<search>
  <form action="/resultados" method="get">
    <label for="busqueda">Buscar productos:</label>
    <input type="search" id="busqueda" name="q">
    <button type="submit">????</button>
  </form>
</search>

b) Búsqueda con filtros avanzados

<search>
  <form>
    <input type="search" placeholder="Buscar artículos...">
    <select>
      <option value="recientes">Más recientes</option>
      <option value="populares">Más populares</option>
    </select>
    <button type="submit">Filtrar</button>
  </form>
</search>

Personalización con CSS

Puedes estilizar el contenedor <search> y sus elementos internos:

search {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
}

search form {
  display: flex;
  gap: 10px;
}

search input[type="search"] {
  flex-grow: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

search button {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Accesibilidad y buenas prácticas

Etiquetas claras: Usa <label> o aria-label para describir el campo de búsqueda.
Roles ARIA: Agrega role="search" para reforzar la semántica.
SEO: Aunque no afecta directamente al posicionamiento, mejora la estructura semántica del documento.
Móvil primero: Asegúrate de que el diseño sea responsive para dispositivos pequeños.

Diferencias clave entre `<search>` y `<div>`

`<search>`	`<div>`
Indica semánticamente una sección de búsqueda.	Es un contenedor genérico sin significado semántico.
Mejora la accesibilidad y el SEO.	Requiere atributos ARIA para contexto.

Ejemplo con <div> (no recomendado):

<div class="busqueda"> <!-- Menos semántico -->
  <form>...</form>
</div>

Ejemplo completo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Búsqueda semántica</title>
  <style>
    search {
      background: #fff;
      padding: 20px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    search input[type="search"] {
      width: 70%;
      padding: 12px;
      border: 2px solid #007bff;
      border-radius: 25px;
    }
    search button {
      padding: 12px 25px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 25px;
      transition: 0.3s;
    }
    search button:hover {
      background: #0056b3;
    }
  </style>
</head>
<body>
  <header>
    <search role="search" aria-label="Buscar en el blog">
      <form action="/buscar" method="get">
        <input type="search" name="q" placeholder="Buscar artículos...">
        <button type="submit">Buscar</button>
      </form>
    </search>
  </header>
</body>
</html>

Errores comunes a evitar

Usar <search> para contenido no relacionado: Solo debe envolver funcionalidades de búsqueda.
Olvidar la accesibilidad: No omitas etiquetas o roles ARIA.
Anidar múltiples formularios: Un único <form> por <search> es suficiente.

Conclusión

La etiqueta <search> es una adición valiosa a HTML5 para estructurar y semantizar áreas de búsqueda en una página web. Al usarla, mejoras la accesibilidad, el SEO y la mantenibilidad del código. ¡Incorpórala en tus proyectos para crear interfaces más claras y profesionales!

Recuerda:

Agrupa todos los elementos de búsqueda dentro de <search>.
Combínala con <form> y atributos ARIA.
Estiliza con CSS para adaptarla al diseño de tu sitio.

¿Qué es la etiqueta <search>?