search: новый HTML-элемент в 2023

В стандарте HTML появился новый семантический элемент <search>. Он обозначает раздел страницы, который используется для поиска или фильтрации. Он должен содержать элементы управления формой (например, текстовые поля, выпадающие меню, кнопки и так далее), а область поиска или фильтрации может быть любой: от одного документа до всего интернета.

Как это работает

До появления элемента мы добавляли role="search" к тегу, чтобы указать, что форма предназначена для поиска.

<form role="search" method="get" action="/search">
  <input type="search" name="search-text" />
  <button>Search</button>
</form>

Теперь мы можем использовать тег <search>, чтобы обернуть им форму:

<search>
  <form method="get" action="/search">
    <input type="search" name="search-text" />
    <button>Search</button>
  </form>
</search>

К сожалению, поскольку <search> недавно вошел в стандарт, может пройти некоторое время, прежде чем все браузеры, программы для чтения с экрана и другие инструменты смогут его использовать. Тем временем, мы можем использовать хак, указывающий ARIA-роль, которую он уже имеет изначально (подобно тому, как это произошло с <nav>)

Это станет ненужным в будущем, но сейчас может подготовить наш код к моменту, когда браузеры начнут поддерживать новый тег:

<search role="search">
   ...
</search>

Может показаться нелогичным: мы убираем role="search", но оборачиваем все тегом <search>. В целом, получается больше кода (но всего на три символа) и больше вложенности (на один уровень больше). Это не должно стать проблемой, но я уверен, что некоторые разработчики будут жаловаться на это.

Ещё один важный момент: область поиска не обязательно должна представлять собой текстовый ввод с кнопкой для поиска на сайте или в Интернете. Можно использовать <search> для фильтрации результатов или строк таблицы. Его применение выходит за рамки простого ввода текста и полей для поиска:

<search>
  <h2>Фильтрация результатов</h2>

  <form>
    <label for="cartype">Класс автомобиля</label>
    <select id="cartype">
      <option value="coupe">Купе</option>
      <option value="sedan">Седан</option>
    </select>

    <label for="electric">Электрический?</label>
    <input type="checkbox" id="electric" />
  </form>
</search>

Мнение

Иметь элемент для обозначения поиска — здорово. Как отмечает Скотт О’Хара, это была единственная знаковая роль ARIA, которая до сих пор не имела семантического эквивалента в HTML. Смотрите:

С использованием <search> для идентификации раздела, который должен иметь роль search, все роли ARIA будут покрыты семантическими элементами HTML. Это улучшит доступность (хотя, как сказано выше, пройдет некоторое время, прежде чем поддержка появится во всех браузерах), и расширит семантику языка

Но с точки зрения программиста кажется, что <search> мало что добавляет к существующей реализации. Другие семантические элементы могут повысить доступность и упростить разработку конкретных компонентов. Например, по моему искреннему мнению, что-то вроде <tabpanel> или <tab> было бы гораздо более полезным и важным.

Но всё это не отменяет важности тега <search>. Все улучшения — даже незначительные — приветствуются. Так будет и с <search>. Отличное пополнение в семье HTML.

Материалы по теме

• Элемент<form> — справочная статья о формах с примерами.
• Шаблон формы на HTML — именно эти формы мы и будем оборачивать в <search>.
• Плейсхолдеры в полях формы вредны — почему оставлять поля без подписи это плохая идея.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.