Тег <search> обозначает блок поиска или фильтрации - строку поиска в шапке, набор фильтров в каталоге, поле с подсказками. Он появился в стандарте в 2023 году и оказался последним из заметных ориентиров, у которого до этого не было своего тега. Тег парный, собственных атрибутов у него нет.
В этой статье
Что такое тег search в HTML
До 2023 года блок поиска размечали обычной формой и вручную сообщали о его назначении атрибутом: <form role="search">. Работало это нормально, но выглядело странно - у шапки, подвала, навигации и основного содержимого свои теги уже были, а у поиска нет. Тег <search> закрыл этот пробел.
Оформления он, как и остальные теги группы, не добавляет. Его работа в том, что скринридер получает ориентир поиска и может перейти к нему одной командой - так же, как к меню или к основному тексту.
<search>
<form action="/poisk">
<label for="q">Поиск по сайту</label>
<input type="search" id="q" name="q">
<button type="submit">Найти</button>
</form>
</search>Пример: блок поиска в шапке сайта
Внешне тег ничего не меняет - оформление строки поиска целиком на CSS.
Кстати, здесь замыкается правило, о котором шла речь на странице тега nav: форму поиска внутрь навигации не прописывают. Теперь понятно, куда её девать - у неё есть собственный тег, и в шапке они с меню стоят рядом, а не одно внутри другого.
Что оборачивают в search, а что оставляют снаружи
Внутрь попадает всё, чем человек задаёт запрос: поле ввода, кнопка, выпадающие списки, флажки фильтров, подсказки под строкой. Текстовым поиском дело не ограничивается - набор фильтров в каталоге товаров это тоже поиск, даже если ни одной буквы никто не вводит.
А вот результаты поиска внутрь не помещают. Найденные страницы, отфильтрованные товары, карточки из выдачи - это основное содержимое страницы, и его место в main. Тег <search> отвечает за инструмент, а не за то, что этот инструмент нашёл.
<main>
<h1>Результаты поиска</h1>
<search>
<form>...</form>
</search>
<article>Найденная страница 1</article>
<article>Найденная страница 2</article>
</main>У этого правила есть размытый край, и честнее сказать о нём прямо. Когда фильтр работает мгновенно и список обновляется прямо внутри виджета - например, поиск по таблице с живой подстановкой, - результаты фактически оказываются частью самого инструмента. Такой пример есть и в документации MDN. Строгого запрета спецификация тут не ставит: правило касается полноценной страницы результатов, а не короткого списка подсказок под строкой ввода.
Нужен ли сегодня role="search"
Если поискать об этом теге русскоязычные статьи, почти наверняка попадётся совет: пишите <search role="search">, потому что поддержка ещё неполная. Совет встречается и в Доке, и в блоге HTML Academy.
В момент написания тех статей он был верным - тег только появился. Но с тех пор прошло три года. По данным MDN <search> получил статус широко доступного ещё в октябре 2023 года и сегодня поддерживается всеми актуальными браузерами, так что причина, по которой роль советовали дублировать, отпала.
Одна оговорка: статус поддержки считается по браузерам, а скринридеры обновляются своим темпом. Если вы делаете сайт с жёсткими требованиями к доступности, лишний role="search" ничего не сломает - он просто дублирует то, что тег и так сообщает.
Отсюда общее правило, которое пригодится не только здесь: у недавно появившихся тегов всегда смотрите на дату статьи. Рекомендации вида "пока не поддерживается" устаревают быстрее любой другой части справочника, а находятся в поиске годами.
Несколько блоков поиска на одной странице
Ограничений на количество нет, и это обычная ситуация: в шапке поиск по всему сайту, а в каталоге - фильтр по товарам. Оба блока размечаются тегом <search>, и оба попадают в список ориентиров скринридера.
Проблема ровно та же, что была с несколькими блоками навигации: без названий они объявляются одинаково, и различить их невозможно. Решается так же - атрибутом aria-label.
<header>
<search aria-label="Поиск по сайту">...</search>
</header>
<main>
<search aria-label="Фильтр товаров">...</search>
</main>Слово "поиск" в значение атрибута добавлять не обязательно по той же причине, что и с навигацией: тип ориентира скринридер произносит сам.
Частые ошибки
Тег молодой, и ошибки вокруг него пока не устоялись - но три из четырёх ниже встречаются регулярно уже сейчас.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
В <search> обёрнута вся страница результатов |
Найденное содержимое объявляется частью инструмента поиска | Оставить внутри форму и фильтры, результаты вынести в <main> |
Дописан role="search" |
Роль дублируется - тег несёт её сам с 2023 года | Убрать атрибут |
Форма поиска прописана внутри <nav> |
Поиск попадает в навигационный ориентир, хотя навигацией не является | Вынести форму из <nav> и обернуть тегом <search> |
Несколько блоков поиска без aria-label |
Все объявляются одинаково, различить их нельзя | Дать каждому своё название |
