Записки фронтендера
Фотография
нажмите — покажем
нажмите — покажем
Новый семантический тег
В HTML5 было добавлено много различных тегов вроде <header>, <footer>, <nav> и других. Скорее всего вы все их знаете.
Относительно недавно к этому списку был добавлен новый — <search>
Он должен быть использован в качестве обёртки для полей поиска или фильтрации / сортировки чего-либо:
<search>
<form action="/search">
<input type="search" placeholder="Поиск" />
<button type="submit">Найти</button>
</form>
</search>
<search>
<label>
Сортировать:
<select name="sort">
<option value="price_asc">Цена ↑</option>
<option value="price_desc">Цена ↓</option>
</select>
</label>
</search>
Если вы ранее пользовались ARIA-атрибутом role со значением search для доступности, то при использовании <search> он больше не нужен.
<form role="search">...</form>
заменяем на
<search>
<form>...</form>
</search>
⚙️ Поддержка браузерами широкая
2 · 503 ·