Это перевод статьи Альваро Монторо «New HTML Element: search»

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

☹️ Примечание редакции: на момент публикации перевода в мае 2023 тега <search> ещё нет на caniuse.com. Возможно, в том будущем, где вы находитесь, он уже вовсю используется.

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

До появления элемента мы добавляли 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>. В целом, получается больше кода (но всего на три символа) и больше вложенности (на один уровень больше). Это не должно стать проблемой, но я уверен, что некоторые разработчики будут жаловаться на это.

👉 Обратите внимание: хотя нам не нужен тег для создания компонента поиска, его наличие очень полезно (и даже необходимо), чтобы поиск работал даже без JavaScript или в соответствии со стратегией прогрессивного улучшения.

Ещё один важный момент: область поиска не обязательно должна представлять собой текстовый ввод с кнопкой для поиска на сайте или в Интернете. Можно использовать <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. Смотрите:

✅ banner → <header>

complementary → <aside>

contentinfo → <footer>

form → <form>

main → <main>

navigation → <nav>

region → <section> (с доступным именем)

search →???

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

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

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

🧑‍💻 Больше HTML-тегов в справочнике от HTML Academy.

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


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

ТелеграмПодкастБесплатные учебники

Читать дальше

Зачем нужен метатег viewport

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport.

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport, который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

Читать дальше
HTML
  • 18 сентября 2023
Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

<!-- Один класс -->
<div class="container">
  <!-- ... -->
</div>

<!-- Несколько классов -->
<div class="container special-box">
  <!-- ... -->
</div>
Читать дальше
HTML
  • 14 сентября 2023
Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

Читать дальше
HTML
  • 31 июля 2023
Как понять, что перед вами заголовок

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от <h1> до <h6>. Каждый уровень заголовка имеет свой семантический вес, где <h1> имеет наибольший вес, а <h6> — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

Читать дальше
HTML
  • 8 июня 2023
Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.

�PNG
IH�aV
PLTE�������0�
IDAcZ�d���� �W=
S�3�o;���]P
���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

<svg width="20">
  <rect fill="#fc0"
    width="20"
    height="20"/>
  <line stroke="black"
    x1="0" y1="0"
    x2="20" y2="20"/>
</svg>

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

Читать дальше
HTML
  • 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset

Как создавать адаптивные изображения. Атрибут srcset

Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.

Давайте рассмотрим несколько способов создания адаптивных изображений.

🎓 В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.

Читать дальше
HTML
  • 25 мая 2023
В чём разница между <p> и <br>

В чём разница между <p> и <br>

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Читать дальше
HTML
  • 24 мая 2023
Как сделать таблицу в HTML

Как сделать таблицу в HTML

<table> — один из основных элементов HTML, который используют для отображения данных (текста, изображения или другого элемента) в ячейках на странице. Таблица состоит из строк и столбцов.

Основные теги, используемые при создании таблицы:

  • <table> — определяет начало и конец таблицы. Всё содержимое таблицы должно находиться между <table></table>.
  • <thead> — определяет заголовок таблицы. Заголовок может содержать одну или несколько строк, в которых могут использоваться теги <th> для определения заголовков столбцов.
  • <tbody> — определяет тело таблицы. Тело содержит одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tfoot> — определяет нижний колонтитул таблицы. Колонтитул может содержать одну или несколько строк, в которых могут использоваться теги <td> для определения содержимого ячеек.
  • <tr> — определяет строку таблицы. Каждая строка должна находиться между тегами <tbody>, <thead> или <tfoot>.
  • <th> — определяет заголовок столбца или строки таблицы. Используется внутри тегов <thead> и <tr>.
  • <td> — определяет содержимое ячейки таблицы. Используется внутри тегов <tbody>, <tfoot> и <tr>.
  • <caption> — определяет заголовок таблицы, который будет размещен над таблицей. Используется внутри тега <table>.
Читать дальше
HTML
  • 16 мая 2023