Элемент <search> — это относительно новый элемент HTML, который, как легко догадаться, предназначен для разметки поиска. Это семантический контейнер с блочным отображением (
display: block) и встроенной ролью search.Согласно спецификации WAI-ARIA, роль
search — это ориентир для набора объектов пользовательского интерфейса, которые реализуют функциональность поиска. Яркий пример — это форма с полем для ввода поискового запроса и кнопкой поиска.<search>
<form action="/search" method="get">
<label for="q">Поиск:</label>
<input type="search" id="q" name="q" autocomplete="off">
<button aria-label="Найти">🔍</button>
</form>
</search>
Кроме формы поиска в
<search> можно помещать набор элементов управления для фильтрации результатов. Например, фильтр в интернет-магазине или элементы управления для фильтрации таблицы в реальном времени. Всё, что как-то влияет на набор данных на странице или осуществляет глобальный поиска по сайту.Элемент
<search> уже поддерживается во всех современных браузерах. В более старых браузерах можно использовать эквивалент <div role="search"> до более широкой поддержки <search>. Или же можно использовать <search>, но подстраховаться следующим образом:<search role="search">
<!-- средства поиска -->
</search>
В CSS при этом важно не забыть указать:
search {
display: block;
}#ydkhtml