Хабр·Russia·Tuesday, September 15, 2026 at 09:02 AM

Зря вы не используете эти HTML-элементы

Translate

melnik90912 минут назад

Я говорю о семантической вёрстке уже десять лет. Только как-то так получилось, что в последнее время я ничего не писал на эту тему. Надо исправляться!

В современных веб-интерфейсах я часто встречаю определённый набор семантических элементов. Это header, main, nav, footer. Даже элемент button встречается. Реже, чем другие, но всё же есть.

Не будем на этом останавливаться! Сегодня мы с вами рассмотрим ещё несколько элементов, которые почему-то редко используются. Хотя с ними ваша вёрстка станет ещё более семантичной, а значит, и интерфейсы станут ещё лучше.

Давайте посмотрим, что я вам подготовил.

Элемент search

Элемент search говорит сам за себя. С помощью него мы можем разметить поиск по сайту.

Именно так думал я и многие коллеги, с кем я общался. Конечно, он отлично подойдёт для основного поиска по сайту, но это не все его возможности. Так что давайте разбираться.

Начнём мы с того, а зачем нам использовать элемент search. Всю жизнь у нас существует элемент form.

<body>
  <form class="awesome-search">
    <!-- здесь элементы поиска -->
  </form>
</body>

Я не спорю, что всё отлично работает для большинства пользователей. Но всё же не для всех.

Семантика HTML часто помогает специальным программам правильно понять разметку. Например, есть скринридеры, которые необходимы пользователям с тотальной или частичной слепотой.

Давайте посмотрим на то, как поймёт разметку с элементом form скринридер NVDA. Для этого нажмём комбинацию клавиш Insert + F7 для активации режима «Список элементов».

Мы видим, что скринридер нашёл форму. Но сама подсказка «Форма» неинформативна. По этой причине использование элемента form заставляло пользователей дополнительно разбираться в интерфейсе.

Элемент search решает эту проблему. Он буквально говорит скринридерам: «Я поиск». Давайте обвернём им нашу форму поиска.

<body>
  <search>
    <form class="awesome-search">
      <!-- здесь элементы поиска -->
    </form>
  </search>
</body>

В списке появился элемент «Поиск». Именно такую подсказку скринридер скажет пользователю, когда он попадёт в область поиска.

Главный поиск является не единственным примером. Часто можно встретить интерфейсы, в которых есть дополнительные фильтры для контента.

Например, можно использовать его в интернет-магазинах при фильтрации товара.

Если бы я работал над проектом, то всю разметку фильтров поместил в элемент search. Дополнительно объявил бы атрибут aria-label, указав в нём текст «По товарам».

<body>
  <!-- другие элементы -->
  <search aria-label="По товарам">
    <div class="left-filters" data-role="filters-container">
      <!-- здесь элементы фильтров -->
    </div>
  </search>
  <!-- другие элементы -->
</body>

Теперь скринридеры найдут элемент search и скажут пользователю: «По товарам. Поиск».

Также хочу сказать пару слов о том, почему я выбрал именно такую подсказку. Поскольку мы говорим о семантике, то именно из-за неё элемент search заставляет скринридеры произносить слово «Поиск».

Это несомненно плюс. Соответственно, нам нужно корректно дополнять текст подсказки для атрибута aria-label, не используя слово «Поиск», чтобы не получилось дублирования. Оно как раз раздражает пользователей.

Элемент dialog

Сегодня без модальных окон не обходится большинство интерфейсов. Многие разработчики для их разметки используют элемент div, хотя уже достаточно давно есть элемент dialog. И пора использовать его!

Для разбора преимуществ мы рассмотрим обычную разметку модального окна для входа.

<body>
  <div class="awesome-modal">
    <form class="awesome-form">
      <div class="awesome-form__group">
        <label for="tel">Телефон</label>
        <input id="tel" type="tel">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="submit">Продолжить</button>
  	  </div>
    </form>
  </div>
</body>

Давайте подумаем, как скринридер NVDA распознает разметку. Поскольку у нас используется элемент div, то он останется незаметным. По этой причине скринридер найдёт только форму.

Для сравнения заменим элемент div с классом .awesome-modal на элемент dialog.

<body>
  <dialog class="awesome-modal">
    <form class="awesome-form">
      <div class="awesome-form__group">
        <label for="tel">Телефон</label>
        <input id="tel" type="tel">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="submit">Продолжить</button>
  	  </div>
    </form>
  </dialog>
</body>

Сейчас скринридер увидит пустую страницу! Но не торопитесь ругать меня.

Тут, конечно, надо вспомнить, что по умолчанию у элемента dialog установлено свойство display со значением none. По этой причине модальное окно скрыто.

dialog:not([open]) {
  display: none;
}

Добавим атрибут open, чтобы оно стало открытым.

<body>
  
  <!-- атрибут open добавлен для демонстрации работы элемента dialog. В реальных проектах нужно использовать метод showModal() -->
  
  <dialog class="awesome-modal" open>
    <form class="awesome-form">
      <div class="awesome-form__group">
        <label for="tel">Телефон</label>
        <input id="tel" type="tel">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="submit">Продолжить</button>
  	  </div>
    </form>
  </dialog>
</body>

Всё, модальное окно стало заметным. Теперь пользователи услышат подсказку «Диалог», когда попадут в область модального окна.

Она, конечно, полезна, но мы можем улучшить её. Добавим больше смысла к ней с помощью атрибута aria-label.

<body>
  <dialog class="awesome-modal" aria-label="Форма авторизации" open>
    <form class="awesome-form">
      <div class="awesome-form__group">
        <label for="tel">Телефон</label>
        <input id="tel" type="tel">
  	  </div>
  	  <div class="awesome-form__group">
        <button type="submit">Продолжить</button>
  	  </div>
    </form>
  </dialog>
</body>

Теперь скринридер скажет: «Форма авторизации. Диалог». Согласитесь, в такой подсказке больше информации, чем в обычной. И это главное преимущество элемента dialog.

Мы не можем использовать атрибут aria-label для элемента div. Соответственно, пользователи не найдут модальное окно и не услышат подсказку для него. Им придётся тратить очень много сил, чтобы понять, что происходит в интерфейсе.

Согласитесь, что это не то, что нужно для классного интерфейса.

Элемент time

Я узнал про элемент time ещё в 2016 году. Поскольку я тогда был вдохновлён семантической вёрсткой, то, конечно же, стал его использовать. Хотя он полностью стал поддерживаться всеми браузерами только с 2018 года.

Когда общался с коллегами, то большая часть вообще не знала элемент time. Действительно, даже на тематических митапах и конференциях редко рассказывали про него. Так и получилось, что элемент редко встречается в современных интерфейсах.

Но есть приятное исключение! Готовясь к другим статьям, я случайно увидел элемент time на сайте спортивных новостей. Как же приятно я был удивлён, увидев не просто один пример, а целое множество вариантов. Очень хочется вам показать.

Начнём мы с новости, которая вышла какое-то время назад. Дата будет указана в формате дня, месяца и времени.

<body>
  <!-- другие элементы -->
  <time class="published-date" datetime="2026-09-04T21:20:00+03:00">4 сентября, 21:20</time>
  <!-- другие элементы -->
</body>

Мы видим «4 сентября, 21:20». Конечно, в таком формате браузеры не могут правильно понять дату. Но они отлично знают атрибут datetime. С помощью него мы можем указать формат даты в удобной для браузеров форме.

В нашем примере разработчики используют значение «2026-09-04T21:20:00+03:00». Таким образом, они указали дату публикации с помощью строки «2026-09-04». Время было указано строкой «T21:20:00». А самое интересное, что строка «+03:00» обозначает часовой пояс.

На самом деле атрибут datetime делает элемент time полезным, потому что он адаптирует любой формат даты. Мы даже можем использовать указатели времени. Например, разработчики используют слово «сегодня».

<body>
  <!-- другие элементы -->
  <time class="time-block" datetime="2026-09-06 11:49:00">сегодня, 11:49</time>
  <!-- другие элементы -->
</body>

В атрибуте datetime указатель «сегодня» адаптирован с помощью числовой аналогии «2026-09-06».

И этот пример не последний. Мы можем размечать элементом time фразы, содержащие информацию о том, сколько времени прошло с момента публикации.

<body>
  <!-- другие элементы -->
  <time class="time-block" datetime="2026-09-06 12:30:00">46 минут назад</time>
  <!-- другие элементы -->
</body>

Технически использование атрибута datetime такое же, как в прошлом примере. Указывается день и время публикации с помощью строки «2026-09-06 12:30:30».

Этот сайт — отличный пример разнообразия применения элемента time. Мы можем использовать его везде, где есть время или дата.

Элемент blockquote

И наконец-то мы переходим к самому старому элементу. Да, представьте, что элемент blockquote стал поддерживаться в большинстве браузеров в 2014 году. Старичок!

Как и элемент time, он не прижился у разработчиков. Я связываю это с тем, что большинство коллег не понимают, где использовать элемент blockquote. Лично многие думают, что цитирование очень редко где используется. Но мне кажется, что это наша с вами ошибка.

Давайте посмотрим на разметку раздела Хабра, который любим многими. Я имею в виду комментарии.

<body>
  <!-- другие элементы -->
  <blockquote>
    <p>Для меня загадка, почему в современных интерфейсах мало используется свойство <code>aspect-ratio</code></p>
  <blockquote>
  <!-- другие элементы -->
</body>

Мы видим элемент blockquote!

Каждый раз, когда вы хотите прокомментировать мысль автора статьи, то выделяете текст с ней. Получается цитата. Следовательно, элемент blockquote отлично подходит в этой ситуации.

Кроме того, где мы часто ещё цитируем текст? В мессенджерах. Например, я использую веб-версию.

<body>
  <!-- другие элементы -->
  <div class="reply quote-like">
    <!-- здесь текст, на который отвечает пользователь -->
  </div>
  <!-- другие элементы -->
</body>

Конечно, разработчики используют обычный элемент div. Жаль, потому что в этой ситуации элемент blockquote тоже отлично подходит.

Так что если в ваших проектах есть чат с возможностью ответа на сообщение, то теперь знаете, какой лучше элемент использовать.

Заключение

Давайте подведём итог. В этой статье мы рассмотрели:

использование элемента search для разметки разделов поиска или фильтрации;
элемент dialog для улучшения восприятия модальных окон;
в каких местах интерфейса можно использовать элемент time;
где в веб-интерфейсах элемент blockquote уместен при разметке цитат.

Вот такой список у меня получился. Да, он не слишком длинный. Всего четыре элемента.

Но вы можете дополнить его! Так что делитесь в комментариях элементами, которые вы считаете важными с точки зрения семантики. Только это должны быть нераспространённые, чтобы многие о них не знали.

На этом всё. Спасибо за чтение!

P. S. Помогаю больше узнать про CSS и дружелюбные интерфейсы в своих ТГ‑каналах CSS isn't magic и UX + Dev = a11y. Присоединяйтесь. Как вступить, написано в профиле.

View the original on Хабр →

KioskNews shows a cleaned-up reading view extracted from the publisher’s page — the original always lives on their site, not ours.