Тег <search>: область поиска и фильтрации
Search обозначает часть документа с элементами поиска или фильтрации. Он помогает выразить назначение области, но не реализует поиск по данным самостоятельно.
Назначение
Search обозначает часть документа с элементами поиска или фильтрации. Он помогает выразить назначение области, но не реализует поиск по данным самостоятельно.
Как это работает
Внутри можно разместить форму, подписи и связанные элементы выбора. Элемент создаёт поисковый ориентир для поддерживающих технологий, поэтому дублировать role="search" на той же области обычно не требуется.
Пример
<search aria-label="Поиск по учебным темам"><form action="/demo-search" method="get"><label for="search-topic">Тема</label><input id="search-topic" name="q" type="search"><button type="submit">Найти</button></form></search>Что должно получиться
Форма имеет поле с подписью и понятную область поиска. Адрес /demo-search является учебным: работающий обработчик нужно создать в своём проекте, а песочница отправку не выполняет.
Граница применения и частая ошибка
Не оборачивайте весь список результатов в search только из-за его связи с поиском. Результаты обычно относятся к основному содержимому. Если поисковых областей несколько, назовите их так, чтобы было понятно различие области действия.
Самостоятельная проверка
Проверьте доступное название области и поля в инструментах браузера. Добавьте второй поиск по другой части проекта и задайте отличающееся имя. Убедитесь, что основное содержимое можно читать без выполнения поиска.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.