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

Что это такое

HTML — это язык разметки; он задаёт веб-странице структуру и смысл. Вы пишете элементы — заголовки, абзацы, списки, ссылки, формы, изображения, — а браузер собирает из них дерево документа и уже его превращает в пиксели. Оформительского в самом языке нет: <h1> сообщает «это заголовок верхнего уровня», а не «сделай его большим».

Почему это важно

Поверх этого дерева стоит любая другая фронтенд-технология. CSS выбирает из него, JavaScript к нему обращается, скринридеры его объявляют, поисковые системы индексируют, — и все они читают одну и ту же структуру, а сбивают их одни и те же ошибки. Страница, собранная из груды <div> с обработчиками клика, выглядит нормально, однако с клавиатуры до неё не добраться, для вспомогательных технологий она невидима и рассыпается от любой правки стилей. Аккуратная разметка — самая дешёвая работа по доступности из всех, что вам предстоят, и стоит она только внимания.

Ключевые идеи

Элементы, атрибуты и дерево документа

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

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

Семантика несёт смысл дальше внешнего вида

Выбирайте элемент, который описывает содержимое: button для действия, a для перехода, nav, main, article и footer для областей страницы. div с обработчиком клика — не кнопка: клавиатурой до него не добраться, ничего он не объявляет и формы не отправляет. Стили способны сделать любой элемент похожим на любой другой, однако вести себя правильно и быть понятным его заставит только разметка.

Формы делают тяжёлую работу за вас

Встроенные элементы управления бесплатно дают проверку, поведение с клавиатуры, автозаполнение и мобильные клавиатуры. type="email" получает почтовую клавиатуру и встроенную проверку; required блокирует отправку; label с подходящим for делает кликабельной всю метку и даёт полю доступное имя.

Структура — это ещё и навигация

Заголовки, выстроенные по порядку, образуют оглавление, по которому пользователь скринридера переходит между разделами, а ориентиры (header, nav, main) служат точками пропуска. У страницы, где уровни заголовков выбирали по размеру шрифта, структуры нет вовсе.

Практика

Разметьте страницу вообще без CSS

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

Готово, когда: страница читается в браузере с отключённым CSS, у каждого поля формы есть видимая метка, а обход клавишей Tab достигает каждого элемента управления в разумном порядке.

Проверьте структуру заголовков настоящей страницы

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

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

Частые ошибки

Выбор элементов по внешнему виду — у страницы нет структуры, и любое изменение стилей превращается в переписывание; исправить: выбирайте элемент, который описывает содержимое, а внешний вид переносите в CSS.
Использование div или span для интерактивных элементов — пользователь клавиатуры до них не доберётся, а вспомогательные технологии их не объявят; исправить: используйте button или a и стилизуйте их.
Поле формы с placeholder вместо метки — имя исчезает, как только пользователь начинает печатать, а некоторые скринридеры пропускают placeholder; исправить: добавьте label, связанный через for и id.
Пропуск уровней заголовков ради меньшего шрифта — в структуре документа появляются фантомные разделы; исправить: держите структуру логичной, а заголовок оформите правилом CSS.
alt="" на осмысленном изображении — изображение объявляется декоративным, и его содержание теряется; исправить: опишите информацию, которую несёт изображение, или оставляйте пустой alt только когда он действительно ничего не добавляет.

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

Каскадные таблицы стилей (CSS) (02-frontend/05-css) — слой стилей, который выбирает из дерева, построенного вами только что.
Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — проверка написанной здесь семантики по настоящему стандарту.
Адаптивные изображения (02-frontend/07-responsive-images) — единственный элемент, у которого вариантов доставки больше, чем у любого другого.