`<search>`

Один тег чтобы обернуть секцию с поиском или фильтром.

Время чтения: меньше 5 мин

Кратко

Скопировано

Семантический тег-обёртка для блока с поиском или фильтром.

Пример

Скопировано

        
          
          <search>  <form>    <input type="search">    <button>Поиск</button>  </form></search>
          <search>
  <form>
    <input type="search">
    <button>Поиск</button>
  </form>
</search>

Как пишется

Скопировано

        
          
          <search>  ...</search>
          <search>
  ...
</search>

Открыть демо в новой вкладке

Как понять

Скопировано

Этот семантический тег пришёл на замену ARIA-атрибуту role="search". Им можно обернуть форму с поиском или блок на странице с результатами фильтрации.

Как было раньше

        
          
          <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-label, если заголовок видят только скринридеры, или aria-labelledby, когда заголовок видят все. Например:

        
          
          <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>

Кратко

Пример

Как пишется

Как понять

Читайте также

<form>

<input>

search

`<form>`

`<input>`

`search`