Язык гипертекстовой разметки (HTML) — Примеры

Пример 1 — Карточка, собранная из div

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

<section class="card">
  <div class="title">Квартальный отчёт</div>
  <p>Опубликовано 14 февраля 2026.</p>
  <img src="chart.png" alt="" />
  <div class="btn" onclick="openReport()">Открыть отчёт</div>
</section>

Решение

<article>
  <h2>Квартальный отчёт</h2>
  <p>Опубликовано <time datetime="2026-02-14">14 февраля 2026</time>.</p>
  <img src="chart.png" alt="Выручка растёт на 12% квартал к кварталу" />
  <button type="button" onclick="openReport()">Открыть отчёт</button>
</article>

div с обработчиком клика — не кнопка: до него не добраться клавишей Tab, он не отвечает на Enter и пробел, а вспомогательные технологии ничего не объявляют. <button> даёт всё это бесплатно, и CSS способен вернуть ему прежний вид. Пустой alt сообщил браузеру, что диаграмма декоративна, поэтому её содержание потерялось для всех, кто её не видит. Заголовок и article отводят карточке место в структуре документа, и именно по ней пользователь скринридера перемещается по странице; пиксели же от всего этого не меняются.

Пример 2 — Форма без доступных имён

Поле регистрации подписано только placeholder, а заголовок раздела оформили более низким уровнем, чтобы он выглядел меньше: объясните, чего не хватает, и исправьте и то и другое, не написав ни строчки CSS.

<h1>Аккаунт</h1>
<h5>Контактные данные</h5>
<input type="text" placeholder="Адрес электронной почты" />

Решение

<h1>Аккаунт</h1>
<h2>Контактные данные</h2>
<label for="email">Адрес электронной почты</label>
<input id="email" name="email" type="email" required autocomplete="email" />

уровень заголовка 1: «Аккаунт»
уровень заголовка 2: «Контактные данные»
текстовое поле «Адрес электронной почты», обязательное

Placeholder — это не имя: он исчезает, как только пользователь начинает печатать, а некоторые скринридеры пропускают его целиком, поэтому поле объявляется как текстовое без метки. label, связанный через for и id, даёт элементу управления постоянное имя и делает всю метку кликабельной. Уровень заголовка — это структура, а не размер: h5 под h1 придумывает три фантомных раздела в структуре документа, а для крупного шрифта нужно правило стиля, а не другой элемент; type="email" вдобавок добавляет почтовую клавиатуру на мобильных и встроенную проверку — бесплатно.