O Elemento <search> do HTML

Campo de busca no cabeçalho, filtro de produtos numa loja, busca dentro de uma seção de documentação — esse tipo de bloco sempre foi marcado com um <div> ou, na melhor das hipóteses, um <form role="search">. O elemento <search> chega para dar a essa região um significado semântico nativo, sem precisar de atributo ARIA nenhum.

O jeito antigo

<div role="search">
    <form action="/buscar">
        <label for="q">Buscar</label>
        <input type="search" id="q" name="q">
        <button type="submit">Buscar</button>
    </form>
</div>

O role="search" já resolvia o problema para tecnologia assistiva, marcando a região como um landmark de busca. Mas era preciso lembrar de adicionar esse atributo manualmente toda vez — nada no próprio HTML indicava a intenção.

Como funciona o elemento search

Basta trocar o <div role="search"> por <search>. O papel de landmark de busca (o mesmo que role="search" fornecia) já vem embutido no elemento, sem nenhum atributo extra:

<search>
    <form action="/buscar">
        <label for="q">Buscar</label>
        <input type="search" id="q" name="q">
        <button type="submit">Buscar</button>
    </form>
</search>

<search> é um elemento de conteúdo genérico, parecido com <div> ou <section>: não tem estilo próprio nem exige um <form> dentro dele. Ele só marca "esta região da página é uma funcionalidade de busca ou filtragem".

Busca sem formulário

Nem toda busca envolve um <form> tradicional com submit. Um filtro que atualiza a lista em tempo real conforme o usuário digita também se qualifica:

<search>
    <label for="filtro">Filtrar produtos</label>
    <input type="search" id="filtro" placeholder="Digite para filtrar...">
</search>

<ul id="lista-produtos">
    <li>Teclado mecânico</li>
    <li>Mouse sem fio</li>
    <li>Monitor 27 polegadas</li>
</ul>

const filtro = document.getElementById('filtro');
const itens = document.querySelectorAll('#lista-produtos li');

filtro.addEventListener('input', () => {
    const termo = filtro.value.toLowerCase();

    itens.forEach((item) => {
        const corresponde = item.textContent.toLowerCase().includes(termo);
        item.hidden = !corresponde;
    });
});

Múltiplas buscas na mesma página

Uma página pode ter mais de uma região de busca — por exemplo, uma busca geral no cabeçalho e um filtro específico dentro do conteúdo. Cada <search> vira um landmark independente, o que ajuda quem navega por leitor de tela a pular direto para a busca que interessa:

<header>
    <search>
        <form action="/buscar" role="search">
            <input type="search" name="q" aria-label="Buscar no site">
        </form>
    </search>
</header>

<main>
    <search>
        <label for="filtro-tabela">Filtrar tabela</label>
        <input type="search" id="filtro-tabela">
    </search>

    <table>...</table>
</main>

Quando usar

• Campo de busca do cabeçalho ou de uma barra de navegação.
• Filtros de listas, tabelas e catálogos de produtos.
• Qualquer região que hoje usa <div role="search"> — a troca é direta.
• Formulários de busca dentro de uma página de documentação ou blog.

Cuidados

<search> não substitui o <form> nem o <input type="search"> — ele é um agrupamento semântico ao redor deles, não um controle de formulário. Também não deve ser usado para qualquer coisa que pareça uma caixa de texto: o elemento é especificamente para funcionalidades de busca ou filtragem, não para campos de entrada em geral. Em navegadores sem suporte, <search> se comporta como um elemento desconhecido — equivalente a um <span> genérico — então o conteúdo continua funcionando normalmente, só sem o landmark semântico.

Compatibilidade

O suporte já é bom nos navegadores modernos baseados em Chromium, Firefox e Safari, mas como o fallback é inofensivo (o elemento simplesmente vira um contêiner genérico), dá para adotar o <search> desde já sem medo de quebrar nada em navegadores mais antigos.

caniuse

Conclusão

O <search> é uma daquelas mudanças pequenas que substituem um atributo ARIA manual por semântica nativa do HTML. A troca de <div role="search"> para <search> custa uma linha e melhora de graça a experiência de quem navega o site por tecnologia assistiva.