Кратко
СкопированоСемантический тег-обёртка для блока с поиском или фильтром.
Пример
Скопировано<search> <form> <input type="search"> <button>Поиск</button> </form></search>
<search> <form> <input type="search"> <button>Поиск</button> </form> </search>
Как пишется
Скопировано<search> ...</search>
<search> ... </search>
Как понять
СкопированоЭтот семантический тег пришёл на замену ARIA-атрибуту role
. Им можно обернуть форму с поиском или блок на странице с результатами фильтрации.
Как было раньше
<form role="search"></form>
<form role="search"> </form>
Как будет теперь
<search> <form> </form></search>
<search> <form> </form> </search>
или
<search> <h4> Поиск по фильтрам </h4> <form> <label> цвет <select name="color"> <option value="red">Красный</option> <option value="green">Зелёный</option> <option value="blue">Синий</option> </select> </label> </form></search>
<search> <h4> Поиск по фильтрам </h4> <form> <label> цвет <select name="color"> <option value="red">Красный</option> <option value="green">Зелёный</option> <option value="blue">Синий</option> </select> </label> </form> </search>
Что делать, если на странице одновременно есть и то, и другое? Просто добавьте атрибут aria
, если заголовок видят только скринридеры, или aria
, когда заголовок видят все. Например:
<body> <search aria-label="По сайту"> <form> <!-- Содержимое, связанное с поиском --> </form> </search> <search aria-labelledby="label"> <h2 id="label"> Результаты фильтрации </h2> </search></body>
<body> <search aria-label="По сайту"> <form> <!-- Содержимое, связанное с поиском --> </form> </search> <search aria-labelledby="label"> <h2 id="label"> Результаты фильтрации </h2> </search> </body>
Важно упомянуть, что это новый тег и пока у него нет широкой браузерной поддержки. Понадобится время, чтобы браузеры и скринридеры его внедрили. Когда это произойдёт, мы получим отличное дополнение к другим семантическим тегам, таким как <aside>
или <header>
.
Пока у тега нет хорошей поддержки, можно дублировать роль search
:
<search role="search"> <!-- Содержимое формы --></search>
<search role="search"> <!-- Содержимое формы --> </search>