Основные HTML-теги и их назначение

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Форматирование текста

Play ITЗагрузка интерактивного демо…

Теги из этой главы — в целые HTML-файлы с построчным разбором — HTML-страницы целиком (списки, таблица, форма, статья с оглавлением). Оформление и сетка — готовые макеты HTML+CSS или Tailwind — готовые блоки.

Основные теги форматирования текста

HTML позволяет своими встроенными инструментами менять вид текста. Подробнее о шрифтах здесь — /encyclopedia/1-basics/1-15-tekst/.

Тег	Описание
`<b>`	Жирный шрифт
`<i>`	Курсив
`<u>`	Подчёркивание
`<br>`	Перенос строки
`<hr>`	Горизонтальная линия
`<p>`	Абзац HTML (в отличие от переноса, выделяет набор данных отдельно)
`<h1>`, `<h2>`, …, `<h6>`	Заголовки. Отличаются встроенным форматированием, которое делает шрифт больше, жирнее и более выдающимся. В отличие от простого размера и формата, присваивает тексту "статус" заголовка, что позволяет работать с объектом
`<ul>`	Неупорядоченный (маркированный) список:`• раз`; `• два`
`<ol>`	Упорядоченный список: `1. раз`; `2. два`
`<li>`	Элемент списка:`<li>раз</li>` `<li>два</li>`

Интересный факт

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

Семантика важнее вида

Теги <b>, <i> и <u> меняют оформление, но не объясняют смысл. Для важности и акцента в разметке используйте <strong> и <em> — так страницу лучше понимают браузеры и скринридеры.

Жирный шрифт — `<b>`

<b>Этот текст будет отображён жирным.</b>

Результат:

Этот текст будет отображён жирным.

Курсив — `<i>`

<i>Этот текст будет курсивным.</i>

Результат:

Этот текст будет курсивным.

Подчёркивание — `<u>`

<u>Этот текст будет подчёркнут.</u>

Результат:

Этот текст будет подчёркнут.

Перенос строки — `<br>`

Первая строка.<br>
Вторая строка.

Результат:

Первая строка.
Вторая строка.

Горизонтальная линия — `<hr>`

Первый абзац.<br>
<hr>
Второй абзац.

Результат:

Первый абзац.

Второй абзац.

Абзац — `<p>`

<p>Это первый абзац. Он отделён от других блоков вертикальными отступами.</p>
<p>А это второй абзац.</p>

Результат:

Это первый абзац. Он отделён от других блоков вертикальными отступами.

А это второй абзац.

Заголовки — `<h1>`–`<h6>`

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Результат (визуально уменьшается по размеру и весу шрифта):

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Неупорядоченный список — `<ul>`

<ul>
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент</li>
</ul>

Результат:

Первый элемент
Второй элемент
Третий элемент

Упорядоченный список — `<ol>`

<ol>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
</ol>

Результат:

Первый пункт
Второй пункт
Третий пункт

Элемент списка — `<li>`

Тег <li> всегда используется внутри <ul> или <ol>. Сам по себе он не создаёт видимого эффекта, но определяет каждый отдельный пункт списка.

Пример повторно:

<ul>
  <li>Яблоко</li>
  <li>Банан</li>
  <li>Апельсин</li>
</ul>

Результат:

Яблоко
Банан
Апельсин

Ссылки и изображения

Основные теги ссылок и изображений

<a> — гиперссылка (hyperlink): фрагмент гипертекста, по которому пользователь переходит к другой HTML-странице, файлу, якорю #раздел на той же странице или внешнему ресурсу. В браузере ссылка чаще всего выглядит как подчёркнутый цветной текст; посещённые адреса могут отличаться по цвету. Анкор (anchor) — видимый текст или изображение внутри <a>…</a>; адрес назначения задаёт атрибут href.

Ссылка "битая", если объект по href недоступен (файл удалён, сервер не отвечает). Для внешних страниц в новой вкладке используют target="_blank" вместе с rel="noopener".

Почтовая ссылка — отдельная схема URI mailto::

<a href="mailto:support@example.com?subject=Вопрос">Написать в поддержку</a>

Результат:

Написать в поддержку

Пример обычной ссылки:

<a href="ссылка">анкор</a>

У тега <a> есть атрибуты:

charset – кодировка символов документа, на который ведёт ссылка;
coords – координаты ссылки в карте изображений;
download – документ по ссылке будет загружаться;
href – ссылка (URL страницы);
hreflang – язык документа по ссылке;
media – устройство вывода документа по ссылке;
name – имя анкора;
rel/rev – отношение с документом;
shape – форма ссылки в карте изображений;
target – где открывать документ по ссылке;
type – медиа тип документа по ссылке.

На практике для <a> чаще всего нужны href, при открытии в новой вкладке — target="_blank" вместе с rel="noopener". Атрибуты charset, coords, rev, name в современной вёрстке почти не используются (исторические).

Другой тег, похожий на <a> - <img>.

<img> - изображение, которое нужно отобразить на странице, и имеет атрибуты:

align – горизонтальное выравнивание содержимого;
alt – альтернативный текст (отображается, если элемент недоступен);
border – толщина границы (рамки) элемента;
height – высота изображения;
hspace – величина отступов слева и справа;
longdesc – гиперссылка на подробное описание изображения;
src – URL изображения;
vspace – величина отступов сверху и снизу от изображения;
width – ширина изображения.

Как и href у тега <a>, для <img> атрибут src — путь к картинке (обязателен), alt — текстовое описание (обязателен для доступности, если изображение несёт смысл). Устаревшие align, border, hspace, vspace заменяют стилями CSS.

Базовая ссылка с `href`

<a href="https://example.com">Перейти на Example</a>

Результат:

Перейти на Example

— кликабельный текст, при нажатии открывает страницу https://example.com.

Ссылка, открывающаяся в новой вкладке (`target="_blank"`)

<a href="https://example.com" target="_blank">Открыть Example в новой вкладке</a>

Результат:

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

— браузер откроет ссылку в новой вкладке или окне.

Скачивание файла (`download`)

<a href="https://example.com/files/document.pdf" download>Скачать PDF-документ</a>

Результат:

Скачать PDF-документ

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

Якорная (внутренняя) ссылка на элемент на той же странице

<a href="#section2">Перейти к разделу 2</a>

<!-- Где-то ниже на странице -->
<h2 id="section2">Раздел 2</h2>

Результат:

Перейти к разделу 2

Раздел 2

— ссылка прокручивает страницу до элемента с id="html-demo-section2".

Указание языка документа (`hreflang`)

<a href="https://example.fr" hreflang="fr">Французская версия сайта</a>

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

Базовое изображение с `src` и `alt`

<img src="images/photo.jpg" alt="Пейзаж горного озера">

Результат:

Браузер загружает изображение по адресу в src. Если файл недоступен, вместо картинки показывается текст из alt.

Изображение с заданной шириной и высотой

<img src="images/logo.png" alt="Логотип компании" width="200" height="100">

Результат:

Изображение отображается с фиксированной шириной 200 пикселей и высотой 100 пикселей. Это помогает браузеру заранее выделить место под картинку, уменьшая «прыжки» макета при загрузке.

Изображение как ссылка

<a href="https://example.com">
  <img src="images/banner.jpg" alt="Рекламный баннер" width="600" height="200">
</a>

Результат:

Всё изображение становится кликабельным — при нажатии происходит переход на https://example.com.

Альтернативный текст для доступности

<img src="diagrams/flowchart.svg" alt="Диаграмма процесса обработки заказа">

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

Относительный и абсолютный путь в `src`

Относительный путь (относительно текущего HTML-файла):

  <img src="assets/icon.png" alt="Иконка">

Абсолютный путь (полный URL):

  <img src="https://cdn.example.com/images/icon.png" alt="Иконка">

Оба варианта корректны. Выбор зависит от структуры проекта и способа размещения ресурсов.

Элементы выбора из списка

Общие принципы работы выпадающих списков

Элементы select, option и optgroup обеспечивают интерфейс для выбора одного или нескольких вариантов из предопределённого набора значений. Данные элементы являются стандартными компонентами форм валидации и обработки пользовательских данных.

Особенность	Описание
Тип контента	Формат ввода с ограниченным множеством опций
Клавиатурное управление	Стрелки вверх/вниз переключают варианты, Enter/Space подтверждает выбор
Поддержка множественного выбора	Атрибут `multiple` позволяет выбрать несколько вариантов одновременно
Доступность	Требуется обязательная связь с меткой через `<label>`
Интеграция	Работает с атрибутами `form`, `name`, `value` для отправки данных

Элемент `<select>`

Характеристики

Параметр	Значение
Категория содержимого	Flow, phrasing, interactive content, listed, labelable, submittable, resettable
Модель содержимого	Ноль или более `<option>`, ноль или более `<optgroup>`
Глобальные атрибуты	Все поддерживаются, кроме `is`
Специфические атрибуты	Описаны ниже
Режим в фокусе	Входит в таб-последовательность по умолчанию
Валидация	Работает совместно с атрибутом `required`

Специфические атрибуты

Атрибут	Тип	Описание	Допустимые значения	Примечания
`autocomplete`	перечисление	Автозаполнение значения	`on`, `off`, имя варианта из истории	Совместимо с атрибутами `list`, `datalist` для улучшения UX
`autofocus`	булев	Автоматический фокус при загрузке	—	Не использовать вместе с другими элементами автофокуса
`disabled`	булев	Отключение взаимодействия	—	Все дочерние `option` также недоступны
`form`	IDREF	Ссылка на ID формы-владельца	ID существующего элемента `<form>`	Позволяет включить `select` вне контейнера формы
`multiple`	булев	Множественный выбор	—	Активирует Ctrl/Cmd+клик или Shift+клик для выбора
`name`	строка	Имя для отправки данных	Любая допустимая строка	Пустое значение не отправляется
`required`	булев	Обязательное поле	—	Если ни один вариант не выбран — форма не отправится
`size`	целое	Количество отображаемых вариантов	Целое число `≥ 1`	При значении `1` — раскрывающийся список; при `≥ 2` — перечень без раскрытия
`tabindex`	целое	Порядок фокусировки	Целое число (отрицательное, ноль, положительное)	Рекомендуется использовать `-1` для программной навигации

Поведение при различных настройках

Код ITЗагрузка примера кода…

Требования к наличию первого пустого варианта:

При использовании обязательного поля рекомендуется добавлять вариант без значения как первый элемент:

<select required name="gender">
  <option value="" disabled selected>-- Выберите пол --</option>
  <option value="male">Мужской</option>
  <option value="female">Женский</option>
  <option value="other">Другой</option>
</select>

Результат:

Атрибут disabled на первом варианте предотвращает его отправку. Атрибут selected устанавливает видимость этого текста при начальном состоянии.

Элемент `<option>`

Характеристики

Параметр	Значение
Категория содержимого	None (зависит от родителя)
Модель содержимого	Текст CDATA
Разрешённые вложенные элементы	Нет (только текст)
Глобальные атрибуты	Все поддерживаются, кроме `is`
Специфические атрибуты	Описаны ниже

Специфические атрибуты

Атрибут	Тип	Описание	Допустимые значения	Примечания
`disabled`	булев	Блокировка отдельного варианта	—	Пользователь не может выбрать данный вариант
`label`	строка	Отображаемый текст (альтернатива тексту в элементе)	Любая строка	Приоритет у текста внутри тега
`selected`	булев	Установленное значение по умолчанию	—	Только один `selected` работает корректно в одиночном выборе
`value`	строка	Отправляемое значение	Любая строка	Если не указан — используется текст внутри тега

Примеры использования

Базовый вариант:

<option value="electronics">Электроника</option>

С предустановленным выбором:

<select name="priority">
  <option value="low">Низкий</option>
  <option value="medium" selected>Средний</option>
  <option value="high">Высокий</option>
</select>

Заблокированный вариант:

<select name="region">
  <option value="">Все регионы</option>
  <option value="c1">Центральный</option>
  <option value="c2" disabled>Северный (пока недоступен)</option>
  <option value="s1">Южный</option>
</select>

Значение отличается от отображаемого текста:

<option value="us">США</option>
<option value="ca">Канада</option>
<option value="mx">Мексика</option>

Отправляется только значение атрибута value, а не текст внутри элемента.

Элемент `<optgroup>`

Назначение группировки

Характеристика	Описание
Семантика	Логическая группировка связанных опций
Требование	Атрибут `label` обязателен для каждого `optgroup`
Вложенность	Внутри допускается `option`, другие `optgroup` не разрешены
Отключение	Атрибут `disabled` блокирует всю группу

Специфические атрибуты

Атрибут	Тип	Описание	Значения	Примечания
`disabled`	булев	Блокировка всей группы	—	Нельзя выбрать ни одну опцию внутри
`label`	строка	Заголовок группы	Любая строка	Обязательно указывать для каждой группы

Пример структуры

Код ITЗагрузка примера кода…

Первая группа доступна для выбора. Вторая группа заблокирована полностью. Третья группа доступна для выбора.

Пример полной формы с выпадающими списками

Код ITЗагрузка примера кода…

Формы и айфреймы

См. также

Типы <input>; шаблоны, output и datalist; управление плеером из скрипта — audio и video из JavaScript; проверка полей в коде — валидация форм.

Разметка формы с label и required — HTML-страницы целиком (форма).

Оформленная форма входа по центру — готовые макеты HTML+CSS, на Tailwind — Tailwind — готовые блоки.

Основные теги форм

Формы - <form> нужны для создания фрагмента страницы, в которой будет выполняться ввод данных – логины, поиск, опросы. Попробуйте добавить в нашу страницу перед <footer> следующий фрагмент:

<form action="/submit" method="POST">
  <label>Имя:</label>
  <input type="text" name="username" placeholder="Введите имя">
  <input type="submit" value="Отправить">
</form>

Результат:

Здесь:

<form> - сама форма;
- action - действие, к примеру, куда отправлять данные (/submit в нашем случае, разумеется никуда не отправится – обязательный атрибут;
- method – метод HTTP-запроса (GET или POST, допустим);
<input> - поле для ввода;
- type – тип, к примеру, text, password, email;
- placeholder – подсказка в поле.

Также, элемент формы может содержать теги <textarea>, <button>, <select>, <option>, <optgroup>, <fieldset>, <label>.

Типы поля `<input>`

Атрибут type задаёт поведение поля — вид клавиатуры на телефоне, проверку значения перед отправкой, встроенный календарь или ползунок. Если type не указан, браузер считает поле текстовым (text).

Текст и строки

`type`	Назначение
`text`	Однострочная строка; можно задать начальное значение через `value`
`search`	Строка поиска; в части браузеров есть кнопка очистки
`email`	Адрес почты; при отправке формы браузер проверяет формат `local@domain`
`password`	Пароль; вводимые символы скрыты
`tel`	Телефон; на мобильных часто открывается цифровая клавиатура, строгой проверки номера нет
`url`	Ссылка; ожидается схема (`https://…`)
`hidden`	Служебное значение уходит на сервер, пользователь поле не видит

Числа, дата и время

`type`	Назначение
`number`	Число; работают `min`, `max`, `step`, на десктопе — стрелки увеличения и уменьшения
`range`	Ползунок между `min` и `max`
`date`	Дата в формате `YYYY-MM-DD`; встроенный календарь
`time`	Время (`HH:mm` и варианты с секундами)
`month`	Месяц и год
`week`	Неделя в году
`datetime-local`	Дата и время без часового пояса

Для date, time, month, week, range и color браузер рисует нативные контролы — для простого выбора даты, времени или уровня громкости отдельная JS-библиотека обычно не нужна. Внешний вид зависит от ОС и браузера.

Выбор и файлы

`type`	Назначение
`checkbox`	Флажок; атрибут `checked` задаёт начальное состояние
`radio`	Один вариант из группы с общим `name`
`file`	Загрузка файла; у `<form>` при отправке нужен `enctype="multipart/form-data"`
`color`	Цвет `#rrggbb`; палитра браузера

Кнопки

`type`	Назначение
`submit`	Отправить форму
`reset`	Вернуть поля к начальным значениям
`button`	Кнопка без действия по умолчанию (часто обрабатывается скриптом)
`image`	Картинка вместо кнопки "Отправить"; на сервер уходят координаты клика (`name.x`, `name.y`)

Встроенная проверка

Типы email, url, number и поля даты/времени участвуют во встроенной валидации HTML5: браузер может не отправить форму, если значение не подходит под формат. Вместе с required, min, max, pattern и minlength это даёт быструю обратную связь без отдельного скрипта. Примеры значений для атрибута pattern — RegEx, готовые паттерны.

На сервере данные всё равно проверяют повторно — клиентскую проверку можно обойти.

<label for="volume">Громкость</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">

<label for="deadline">Срок</label>
<input type="date" id="deadline" name="deadline" min="2026-05-29" required>

Результат:

ГромкостьСрок

Справочник

Таблица атрибутов по каждому type (step, list, multiple, accept…) — в справочнике HTML. Проверка и сообщения об ошибках в коде — валидация форм.

Кроме форм, можно встроить также "айфрейм" при помощи тега <iframe>, который позволяет встроить на другую страницу видео или карту. К примеру, на сервисе ВК Видео (Вконтакте) можно скопировать код для вставки, и напрямую вставить в код своей страницы.

<iframe> использует атрибуты:

src – ссылку на ресурс;
width / height – размеры областы (ширина и высота);
title – заголовок.

Так, к примеру, я могу добавить на свою страницу видео с котом:

Купились? Но так можно. Поверьте на слово :)

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

Простая форма входа

<form action="/login" method="POST">
  <label for="email">Электронная почта:</label>
  <input type="email" id="email" name="email" placeholder="user@example.com" required>

  <label for="password">Пароль:</label>
  <input type="password" id="password" name="password" placeholder="••••••••" required>

  <input type="submit" value="Войти">
</form>

Эта форма:

отправляет данные на /login методом POST;
содержит два обязательных поля: email и пароль;
использует атрибут required для валидации на стороне браузера;
связывает метки (<label>) с полями через атрибут for/id.

Форма обратной связи с многострочным полем

<form action="/feedback" method="POST">
  <label for="name">Ваше имя:</label>
  <input type="text" id="name" name="name" placeholder="Иван Иванов">

  <label for="message">Сообщение:</label>
  <textarea id="message" name="message" rows="5" placeholder="Напишите ваше сообщение..."></textarea>

  <input type="submit" value="Отправить">
</form>

Тег <textarea> позволяет вводить многострочный текст. Атрибут rows задаёт высоту поля.

Форма с чекбоксами и радиокнопками

<form action="/survey" method="POST">
  <p>Как вы оцениваете наш сайт?</p>
  <label><input type="radio" name="rating" value="5"> Отлично</label>
  <label><input type="radio" name="rating" value="4"> Хорошо</label>
  <label><input type="radio" name="rating" value="3"> Удовлетворительно</label>

  <p>Какие функции вам интересны?</p>
  <label><input type="checkbox" name="features" value="chat"> Чат поддержки</label>
  <label><input type="checkbox" name="features" value="dark_mode"> Тёмная тема</label>
  <label><input type="checkbox" name="features" value="mobile"> Мобильное приложение</label>

  <input type="submit" value="Проголосовать">
</form>

Особенности:

Все радиокнопки имеют одинаковое значение атрибута name, поэтому можно выбрать только один вариант.
Чекбоксы имеют одинаковый name, но разные value — можно выбрать несколько значений.
При отправке формы данные будут переданы как rating=4&features=chat&features=mobile.

Форма загрузки файла

<form action="/upload" method="POST" enctype="multipart/form-data">
  <label for="avatar">Загрузите аватар:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">

  <input type="submit" value="Загрузить">
</form>

Обязательные условия для загрузки файлов:

Атрибут enctype="multipart/form-data" у формы;
Тип поля type="file";
Атрибут accept ограничивает выбор только изображениями.

Скрытые поля и кнопка сброса

<form action="/process" method="GET">
  <input type="hidden" name="source" value="newsletter">
  <input type="text" name="query" placeholder="Поиск...">
  <input type="reset" value="Очистить">
  <input type="submit" value="Найти">
</form>

Поле source будет отправлено вместе с запросом, хотя пользователь его не видит. Кнопка reset возвращает все поля к начальным значениям.

Встраивание видео с YouTube

<iframe 
  src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
  width="560" 
  height="315" 
  title="Музыкальное видео"
  style="border: 0;"
  allowfullscreen>
</iframe>

Этот код встраивает популярное видео. Атрибут title важен для доступности — он описывает содержимое фрейма для вспомогательных технологий. Рамку убирают через CSS (style="border: 0;"); устаревший атрибут frameborder в новых проектах не используют.

Встраивание карты Google Maps

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2249.347037140483!2d37.6173!3d55.7558!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46b54afc73d4b0c9%3A0x3d4fc6b6b6e0a5a5!2m2!1d37.6173!2d55.7558!5e0!3m2!1ru!2s!4v1710000000000!5m2!1ru!2s" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy"
  title="Карта центра Москвы">
</iframe>

Карта отображается как интерактивный виджет. Параметры в URL определяют центр, масштаб и другие настройки.

Встраивание стороннего документа или страницы

<iframe 
  src="https://example.com/widget.html" 
  width="100%" 
  height="400" 
  title="Внешний виджет">
</iframe>

Если домен example.com разрешает встраивание (через заголовок X-Frame-Options или CSP), содержимое отобразится внутри текущей страницы.

Защита от встраивания (примечание)

Некоторые сайты блокируют использование в <iframe> через HTTP-заголовки. В таких случаях фрейм остаётся пустым, даже если src указан верно. Это мера безопасности, предотвращающая clickjacking.

Таблицы

Основные теги таблиц

Таблицы <table> используются для сетки данных, когда нужно разделить всё на строки, таблицы и ячейки:

<table border="1">
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>25</td>
  </tr>
</table>

Атрибут border здесь только для наглядности в учебном примере; в реальных проектах границы таблиц задают через CSS.

Мы увидим простую таблицу:

Имя	Возраст
Анна	25

Здесь:

<table> - таблица, border – атрибут для границ;
<tr> - строка таблицы;
<th> - заголовок колонки (столбца), по умолчанию жирный;
<td> - ячейка с данными.

Простая таблица с заголовками

Код ITЗагрузка примера кода…

Результат:

Город	Население (тыс.)	Страна
Москва	12600	Россия
Париж	2100	Франция

Такая таблица подходит для представления структурированных данных, где каждая строка — отдельная сущность, а столбцы — её атрибуты. Готовый файл index.html с расписанием и разбором thead / scope — HTML-страницы целиком (таблица).

Таблица с объединёнными ячейками (`colspan`, `rowspan`)

Код ITЗагрузка примера кода…

Особенности:

Атрибут colspan="2" объединяет две ячейки по горизонтали (в заголовке "Контакты").
Атрибут rowspan="2" объединяет две ячейки по вертикали (название компании занимает две строки).

Такие конструкции полезны при отображении иерархических или группируемых данных.

Таблица с разделением на секции (`<thead>`, `<tbody>`, `<tfoot>`)

Код ITЗагрузка примера кода…

Семантические теги:

<thead> — заголовочная часть таблицы;
<tbody> — основное тело с данными;
<tfoot> — итоговая или сводная информация.

Это улучшает читаемость кода, помогает браузеру правильно прокручивать большие таблицы и облегчает стилизацию через CSS.

Таблица без границ (чистый вид)

<table>
  <tr>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
  </tr>
  <tr>
    <td>10:00 – Встреча</td>
    <td>14:00 – Дедлайн</td>
    <td>09:00 – Обучение</td>
  </tr>
</table>

Без атрибута border таблица отображается без видимых линий. Такой подход часто используется в современном дизайне, где границы задаются через CSS.

Таблица для расписания (сложная структура)

Код ITЗагрузка примера кода…

Пустые ячейки <td></td> обозначают отсутствие занятий. Такая таблица эффективно передаёт временные интервалы и распределение активностей.

Доступность — использование `scope` в заголовках

<table border="1">
  <tr>
    <th scope="col">Сотрудник</th>
    <th scope="col">Должность</th>
    <th scope="col">Отдел</th>
  </tr>
  <tr>
    <td>Мария Козлова</td>
    <td>Аналитик</td>
    <td>BI</td>
  </tr>
</table>

Атрибут scope="col" явно указывает, что ячейка является заголовком столбца. Это помогает экранным дикторам корректно интерпретировать таблицу.

Работа с тегами и события

Справочные теги

Сейчас мы рассмотрим некоторые новые теги, а также изучим особенности работы с ними.

В HTML, как и в других языках, есть комментарии – текст внутри кода, который игнорируется браузером и нужен для разработчиков, "читающих код". Если вы работали хоть раз с кодом с ИИ, то замечали, как он комментирует чуть ли не каждый шаг. Синтаксис представляет собой открывающий тег {/* и закрывающий */}. Всё, что указано между открывающим и закрывающим, не будет отображено на странице. Комментарии нужны для пояснений к коду, временного отключения сомнительного кода и разметки секций. Их нельзя вкладывать друг в друга, они не работают внутри тегов и содержимое комментариев видно в исходном коде страницы на стороне клиента, так что – лучше не баловаться.

<!-- это комментарий -->

<!-- Это комментарий. Он не отображается на странице. -->
<p>Этот абзац виден пользователю.</p>
<!-- <p>Этот абзац временно отключён.</p> -->

Комментарии полезны для:

пояснения сложных участков кода;
временного отключения фрагментов разметки при отладке;
разделения логических блоков (например, {/* Навигация */}, {/* Основной контент */}).

Помимо комментариев, в разметке часто используют универсальные контейнеры <div> и <span>, а в <head> — служебные метатеги <meta>.

`<div>` и `<span>` — сравнение

Оба тега не задают смысл контенту сами по себе: это "коробки" для группировки и стилей. Разница — в типе отображения по умолчанию и в том, что вы группируете.

	`<div>`	`<span>`
Тип по умолчанию	блочный (`display: block`)	строчный (`display: inline`)
Назначение	группировка блоков, секций, макета	выделение части текста внутри строки
Поведение в потоке	начинается с новой строки, тянется на ширину родителя	остаётся в той же строке, как слово
Типичное содержимое	абзацы, заголовки, списки, вложенные `<div>`	текст, `<strong>`, `<a>` и другие строчные элементы
Стили CSS	фон, отступы и сетка на всю группу элементов	цвет, шрифт, рамка на фрагмент внутри абзаца

<div> удобен, когда нужно обернуть несколько элементов и применить к ним общий стиль или скрипт — например, подсветить карточку, колонку или вкладку.

<div>
  <p>A</p>
  <div>
    <p>B</p>
    <p>C</p>
  </div>
  <p>D</p>
</div>

Внешний <div> объединяет абзацы A, B, C и D; внутренний — только B и C. Одно правило CSS (фон, отступ, flex-сетка) может оформить всю такую группу сразу.

<span> удобен, когда нужно выделить несколько символов или слов внутри одной строки, не разрывая абзац.

<p>1<span>234</span>5</p>

Результат:

12345

Стили на <span> затронут только «234»; «1» и «5» останутся в том же абзаце на одной линии.

Пример со стилями:

<p>Обычный текст, но <span style="color: blue; font-weight: bold;">этот фрагмент выделен</span> особым образом.</p>

Результат:

Обычный текст, но этот фрагмент выделен особым образом.

<div style="background-color: #f0f0f0; padding: 16px; margin: 12px 0;">
  <h3>Заголовок блока</h3>
  <p>Это содержимое блока. Всё, что внутри &lt;div&gt;, группируется как единый фрагмент.</p>
</div>

Результат:

Заголовок блока

Это содержимое блока. Всё, что внутри <div>, группируется как единый фрагмент.

Семантика

Для навигации, статьи, боковой панели и подвала предпочтительны теги <nav>, <article>, <aside>, <footer>. <div> оставляют для чисто визуальной группировки и макета, когда отдельного смыслового тега нет. Подробнее — в справочнике HTML5.

Связь с CSS: блочное и строчное поведение задаёт свойство display; у <div> и <span> значения по умолчанию разные, но их можно переопределить. См. виды блоков в CSS.

Метатеги `<meta>`

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Учебный сайт по HTML и веб-разработке">
  <meta name="author" content="Автор сайта">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

Пояснение:

charset="UTF-8" — задаёт кодировку текста;
viewport — обеспечивает корректное отображение на мобильных устройствах;
description — краткое описание страницы (используется поисковиками);
author — имя автора;
http-equiv — эмулирует HTTP-заголовок.

Метатеги не отображаются на странице, но критически важны для SEO, безопасности и совместимости.

Основные теги событий

Для того, чтобы вместо простого текста была именно кнопка (специальный тип элемента), используется тег <button> - просто кликабельный и активный элемент, который позволяет обрабатывать события. К примеру, кнопка "Войти" на форме авторизации, или "Перейти" для перехода по ссылке (по аналогии с гиперссылкой). Кнопка может работать как тег <a>, а может обрабатывать событие.

В HTML есть такое понятие, как события – когда что-то происходит на странице с элементом:

onblur – когда элемент формы теряет фокус;
onchange – при изменениях в элементе;
onclick – клик мышью (левой кнопкой мыши);
ondblclick – двойной клик мышью;
onfocus – когда элемент получает фокус;
onkeydown – при нажатии клавиши;
onkeypress – при нажатии и отпускании клавиши;
onkeyup – при отпускании клавиши;
onload – когда загружены элементы (допустим в теге body);
onmousedown – при нажатии на кнопку мыши;
onmousemove – при движении указателя мыши;
onmouseout – при покидания указателя мыши района элемента;
onmouseover – при попадании указателя мыши в район элемента;
onmouseup – при отпускании кнопки мыши;
onreset – при сбросе элементов;
onsubmit – при отправке данных;
onunload – при закрытии страницы (в теге body).

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

Пример:

<button onclick="/* скрипт или ссылка на него */">Текст кнопки</button>

Скрипт, встроенный в страницу, содержится как вложенный контент в элементе <script>. У тега <script> тоже есть атрибуты:

async – асинхронный режим работы скрипта;
charset – кодировка символов скрипта;
defer – отложенный режим запуска, до окончания загрузки страницы;
src – URL файла скрипта (для внешнего);
type – медиа-тип скрипта.

Но, для случаев, когда в браузере отключено отображение скриптов, или работает старый браузер, можно добавить резервный тег <noscript>, который выведет текст на случай, если скрипты отключены. Но JavaScript мы изучим чуть позже, ведь там уже идёт работа на языке программирования, а не разметки.

Кнопка

Простая кнопка без действия

<button>Нажми меня</button>

Результат:

Отображается как стандартная кнопка. Без указания события или формы она ничего не делает.

Кнопка как часть формы

<form action="/send" method="POST">
  <input type="text" name="message" placeholder="Введите сообщение">
  <button type="submit">Отправить</button>
</form>

Результат:

Атрибут type="submit" автоматически отправляет форму при нажатии.

Кнопка с обработкой события

<button onclick="alert('Привет, мир!')">Показать сообщение</button>

Результат:

При клике выполняется встроенная JavaScript-функция alert.

Обработка событий

<div 
  onmouseover="this.style.backgroundColor='lightgreen'" 
  onmouseout="this.style.backgroundColor=''"
  style="padding: 10px; border: 1px solid #ccc; cursor: pointer;">
  Наведите курсор сюда
</div>

Результат:

Наведите курсор сюда

При наведении фон становится зелёным, при уходе — возвращается к исходному состоянию.

<label for="theme">Выберите тему:</label>
<select id="theme" onchange="document.body.className = this.value">
  <option value="">По умолчанию</option>
  <option value="dark">Тёмная</option>
  <option value="light">Светлая</option>
</select>

Изменение выбора применяет CSS-класс к <body>, что может управлять темой оформления (при наличии соответствующих стилей).

Встраивание скриптов

Встроенный скрипт

<script>
  function greet() {
    alert("Добро пожаловать!");
  }
</script>

<button onclick="greet()">Поприветствовать</button>

Функция greet определена внутри <script> и вызывается при нажатии кнопки.

Внешний скрипт

<script src="scripts/main.js" defer></script>

Скрипт загружается из файла main.js. Атрибут defer гарантирует, что он выполнится только после полной загрузки HTML-документа.

Асинхронная загрузка

<script src="https://example.com/analytics.js" async></script>

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

Резервный контент — `<noscript>`

<noscript>
  <p style="color: red; background: yellow; padding: 10px;">
    Для полноценной работы сайта включите JavaScript в настройках браузера.
  </p>
</noscript>

Этот блок отобразится только если JavaScript отключён в браузере. Используется редко, но остаётся важным для доступности.

Модальные и диалоговые окна

Тег <dialog> создаёт всплывающее окно или диалог. По умолчанию не показывается на странице.

Может открываться в двух режимах:

Всплывающее окно — не блокирует взаимодействие со страницей.
Модальное окно — откроется поверх страницы, имеет фоновое затемнение, остальной контент не доступен для взаимодействия.

Как пишется

Парный тег <dialog></dialog>, внутри которого находится содержимое всплывающего окна. У <dialog> нельзя использовать атрибут tabindex.

<dialog>
  Привет, мир!
</dialog>

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

Имя окну можно добавить двумя способами:

aria-label,
aria-labelledby.

aria-label добавляет имя, о котором знают только пользователи скринридеров.

<dialog aria-label="Приветствие">
  Привет, мир!
</dialog>

aria-labelledby связывает <dialog> с видимым всем именем.

<dialog aria-labelledby="dialog-name">
  <h3 id="dialog-name">
    Привет, мир!
  </h3>
  <p>Вы не ждали, а вот он я.</p>
</dialog>

Как открыть

Как и у элемента <details>, по умолчанию содержимое окна скрыто от пользователя, но его можно отобразить через атрибут open.

<dialog open>
  Я виден. Привет! 👋
</dialog>

<dialog>
  Я скрыт от пользователя 🥷
</dialog>

Также окно можно открыть с помощью JavaScript-методов:

добавляет атрибуты open и aria-modal="false".

show()

showModal() — открывает в режиме "модального окна". Добавляет атрибуты open и aria-modal="true". Появляется подложка в виде псевдоэлемента ::backdrop, который можно стилизовать.

<button type="button" onclick="window.myDialog.show()">
  Просто открыть
</button>
<button type="button" onclick="window.myDialog.showModal()">
  Открыть как модалку
</button>
<dialog id="myDialog">🖖 Живи долго и процветай!</dialog>

Как закрыть

Закрыть диалог можно двумя основными способами:

Из JavaScript с помощью метода close().
Из HTML по событию submit (например, по нажатию кнопки <button type="submit">), если в <dialog> есть тег <form> с атрибутом method="dialog".

Код ITЗагрузка примера кода…

Атрибут `closedby`

Атрибут closedby — это экспериментальный атрибут, который автоматически появляется у тега <dialog> после его закрытия. Он показывает, какое конкретное пользовательское действие или системный жест привёл к закрытию диалога. Это может быть:

нажатие клавиши Esc,
клик вне области диалога,
свайп назад на Android (например, при включённом TalkBack),
жест закрытия в VoiceOver на iOS,
или даже команда с внешнего контроллера.

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

Этот атрибут на данный момент имеет ограниченную поддержку.

Возвращаемое значение

Если кнопкам в форме задать value, то при закрытии диалога это значение будет присваиваться dialog.returnValue.

<form class="options" method="dialog">
  <button class="button button--dark" value="debug">
    Дави его!
  </button>
  <button class="button button--light" value="reproduction">
    Каждая жизнь священна
  </button>
</form>

В JavaScript можно обработать результат:

if (dialog.returnValue === "debug") {
  bugs.innerText = bugs.innerText.substring(0, bugs.innerText.length - 2)
} else {
  bugs.innerText += "🐞"
}

Как понять

Долгое время в HTML не существовало тега для создания всплывающих окон. Если такая задача возникала, то использовались либо самописные решения для красивых попапов, либо JavaScript-методы alert(), prompt() и confirm(), если красота была не важна.

Тег <dialog> появился как альтернатива. Хорошее диалоговое окно — это не просто логика "Показать" и "Скрыть". В <dialog> реализовано то, о чём часто забывают:

Для вспомогательных технологий <dialog> — аналог role="dialog". Если окно открыто в режиме модального, то и аналог aria-modal="true". Также у тега есть aria-live="assertive", поэтому скринридеры сразу же зачитывают его содержимое.
Модальные диалоги закрываются по нажатию на Esc.
У модального диалога при открытии появляется "ловушка фокуса": для клавиатурной навигации доступны только интерактивные элементы только текущего диалога.
Браузер запоминает какой элемент был в фокусе до открытия окна и после закрытия окна снова переводит его в фокус.

Вся эта логика реализована в самом браузере "из коробки". А значит пользователю не отправляется лишний трафик.

Подсказки

Google Chrome при закрытии модального окна клавишей Esc ставит предыдущий элемент не просто в :focus, а в :focus-visible. Подразумевая, что пользователь перешёл на клавиатурную навигацию.
Если нужно узнать, кто закрыл окно, воспользуйтесь атрибутом closedby. Он появится у тега <dialog> после закрытия и будет содержать id кнопки или другого интерактивного элемента, вызвавшего закрытие.
По нажатию Esc сначала запускается событие cancel, а затем close. Это может быть полезно, если мы хотим отгородить пользователя от случайного нажатия клавиши, сначала предупредив, что изменённые данные не сохранятся, и только при повторном нажатии закрывать окно.
Контент <dialog> по умолчанию скрыт с помощью display: none. Можно переписать это поведение в стилях и анимировать открытие и закрытие. Намного легче, чем аналогичная задача в <details>, например.
Модальные окна "ускользают" от контекста: даже если в HTML-разметке после модального окна указан тег <div> с z-index: 99999, то модальное окно всё равно отобразится поверх этого <div>. Или если родитель наклонён с помощью skew(), то дочернее модальное окно всё равно откроется без наклона.

Примеры окон

Можете создать файл windows.html и добавить туда следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Типы окон</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      background-color: #f9f9f9;
    }
    h2 {
      color: #333;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px 0;
      transition: background-color 0.3s;
    }
    button:hover {
      background-color: #0056b3;
    }
    .modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index: 1000;
    }
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 999;
    }
    .popup {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: #007bff;
      color: white;
      padding: 15px;
      border-radius: 5px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Окна предупреждений (Alerts)</h2>
    <button onclick="alert('Это окно предупреждения!')">Показать предупреждение</button>

    <h2>Окна подтверждения (Confirmation Dialogs)</h2>
    <button onclick="confirmAction()">Подтвердить действие</button>

    <h2>Модальные окна (Modal Windows)</h2>
    <button id="openModal">Открыть модальное окно</button>
    <div class="modal-overlay" id="modalOverlay"></div>
    <div class="modal" id="modal">
      <h3>Модальное окно</h3>
      <p>Это пример модального окна. Оно блокирует взаимодействие с остальной частью страницы.</p>
      <button id="closeModal">Закрыть</button>
    </div>

    <h2>Всплывающие окна (Pop-ups)</h2>
    <button id="openPopup">Показать всплывающее окно</button>
    <div class="popup" id="popup">
      Это всплывающее окно!
    </div>
  </div>

  <script>
    // Модальное окно
    const modal = document.getElementById('modal');
    const modalOverlay = document.getElementById('modalOverlay');
    const openModalBtn = document.getElementById('openModal');
    const closeModalBtn = document.getElementById('closeModal');

    openModalBtn.addEventListener('click', () => {
      modal.style.display = 'block';
      modalOverlay.style.display = 'block';
    });

    closeModalBtn.addEventListener('click', () => {
      modal.style.display = 'none';
      modalOverlay.style.display = 'none';
    });

    modalOverlay.addEventListener('click', () => {
      modal.style.display = 'none';
      modalOverlay.style.display = 'none';
    });

    // Всплывающее окно
    const popup = document.getElementById('popup');
    const openPopupBtn = document.getElementById('openPopup');

    openPopupBtn.addEventListener('click', () => {
      popup.style.display = 'block';
      setTimeout(() => {
        popup.style.display = 'none';
      }, 3000);
    });

    // Подтверждение действия
    function confirmAction() {
      if (confirm('Вы уверены, что хотите выполнить это действие?')) {
        alert('Действие подтверждено!');
      } else {
        alert('Действие отменено.');
      }
    }
  </script>
</body>
</html>

Здесь вы увидите:

окна предупреждений;
окна подтверждения;
модальные окна;
всплывающие окна.

Семантические элементы

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

Тег	Назначение
`<header>`	Вводная часть документа или секции: логотип, навигация, заголовок
`<footer>`	Завершающая часть документа или секции: авторские права, контакты, ссылки
`<main>`	Основное содержимое страницы, уникальное и не повторяющееся в других частях
`<section>`	Тематическая группа контента, обычно с заголовком
`<article>`	Самодостаточный блок информации, который можно распространять отдельно (например, новость, пост, комментарий)
`<aside>`	Дополнительный контент, косвенно связанный с основным (реклама, боковая панель, цитаты)
`<nav>`	Блок навигационных ссылок
`<time>`	Представление даты или времени в машиночитаемом формате (`datetime`)
`<data>`	Контент с машиночитаемым значением, отличным от отображаемого текста
`<mark>`	Выделение фрагмента текста, например, при поиске
`<strong>`	Текст высокой важности (логическое выделение, не просто жирный шрифт)
`<em>`	Акцентированный текст (логический курсив, передающий интонацию)
`<cite>`	Название произведения (книги, фильма, статьи)
`<var>`	Переменная в математическом выражении или программном коде
`<dfn>`	Определение термина
`<samp>`	Пример вывода программы
`<abbr>`	Аббревиатура или акроним
`<kbd>`	Обозначение пользовательского ввода с клавиатуры

Элемент <hgroup> ранее использовался для группировки заголовков (<h1>–<h6>), но в современных спецификациях считается устаревшим и не рекомендуется к применению.

Примеры

Структура документа

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Семантический HTML — справочный документ</title>
</head>
<body>

Шапка документа

    <header>
        <nav aria-label="Основное меню">
            <ul>
                <li><a href="#main-content">Контент</a></li>
                <li><a href="#about">О материале</a></li>
                <li><a href="#contacts">Контакты</a></li>
            </ul>
        </nav>
        
        <div class="logo">
            <h1>HTML Справочник</h1>
            <p>Раздел 3.09. Основные теги разметки</p>
        </div>
    </header>

Основное содержимое страницы

    <main id="main-content">
        <section id="introduction">
            <h2>Введение в семантические элементы</h2>
            
            <article class="intro-article">
                <header>
                    <h3>Что такое семантика в HTML?</h3>
                    <time datetime="2025-11-18">Дата публикации: 18 ноября 2025</time>
                    <small>Версия материала: 1.0.0</small>
                </header>
                
                <p>Семантическая разметка придаёт элементам документу смысловую нагрузку. Она помогает браузерам, скринридерам и поисковым системам понимать структуру страницы.</p>
                
                <p>Термин **семантика** означает связь между знаком и его значением. В контексте HTML это определение того, какую роль выполняет каждый элемент на странице.</p>
            </article>
            
            <hr>
        </section>

Пример использования навигации

        <nav aria-label="Внутренняя навигация">
            <ol>
                <li><a href="#content-blocks">Блоки контента</a></li>
                <li><a href="#interactive-elements">Интерактивные элементы</a></li>
                <li><a href="#text-markup">Разметка текста</a></li>
            </ol>
        </nav>

Блоки основного контента

        <section id="content-blocks">
            <h2>Основные блоки контента</h2>
            
            <article class="example-section">
                <h3>Пример блока с описанием технологии</h3>
                
                <p>Элемент <code>&lt;article&gt;</code> представляет независимый блок информации. Этот контент имеет смысл вне зависимости от контекста документа.</p>
                
                <p>Например, публикация в блоге, новость или комментарий могут существовать как отдельная единица.</p>
                
                <aside class="sidebar-info">
                    <h4>Рекомендация</h4>
                    <p>Используйте <code>&lt;article&gt;</code> для контента, который можно распространять через RSS или другие каналы публикации.</p>
                </aside>
            </article>
            
            <article class="another-example">
                <h3>Разделение на секции</h3>
                
                <p>Элемент <code>&lt;section&gt;</code> создаёт тематическую группу контента внутри документа.</p>
                
                <h4>Структурные компоненты:</h4>
                <dl>
                    <dt><code>&lt;section&gt;</code></dt>
                    <dd>Логическая группа связанных контента, часто с заголовком</dd>
                    
                    <dt><code>&lt;aside&gt;</code></dt>
                    <dd>Дополнительный материал, косвенно связанный с основным потоком</dd>
                </dl>
            </article>
            
            <aside class="related-content">
                <h4>Полезные ссылки</h4>
                <ul>
                    <li><cite>W3C HTML Спецификация</cite> — официальная документация</li>
                    <li><cite>MDN Web Docs</cite> — подробное описание API</li>
                    <li><cite>HTML5 Doctor</cite> — практическое руководство</li>
                </ul>
            </aside>
        </section>

Текст с различными типами выделения

        <section id="text-markup">
            <h2>Разметка текста и акценты</h2>
            
            <article class="typography-guide">
                <header>
                    <h3>Правила типографики в HTML</h3>
                    <time datetime="2025-11-15T14:30:00+03:00">Обновлено: 15 ноября 2025, 14:30</time>
                </header>
                
                <p>Семантические теги для текста помогают передать интонацию и важность материала.</p>
                
                <h4>Основные приёмы оформления:</h4>
                
                <ul>
                    <li><strong><code>&lt;strong&gt;</code></strong> — текст высокой важности</li>
                    <li><em><code>&lt;em&gt;</code></em> — акцентированный текст с интонацией</li>
                    <li><mark><code>&lt;mark&gt;</code></mark> — выделенный фрагмент для поиска</li>
                </ul>
                
                <h4>Технические обозначения:</h4>
                
                <blockquote cite="https://example.com/source">
                    <p>Элемент <code>&lt;cite&gt;</code> содержит название произведения, а не имя автора.</p>
                    <footer>— Официальная спецификация HTML5</footer>
                </blockquote>
                
                <h4>Обозначение кода и терминов:</h4>
                
                <pre><code>
// Пример программирования
const variable = value;
let result = calculate(var);
</code></pre>
                
                <p>Переменная <var>x</var> содержит числовое значение. Результат операции отображается через <samp>output()</samp>.</p>
                
                <h4>Аббревиатуры и ввод пользователя:</h4>
                
                <p>Система поддерживает аббревиатуру <abbr title="HyperText Markup Language">HTML</abbr>. Пользователь вводит данные через клавиатуру <kbd>Enter</kbd> и комбинацию <kbd>Ctrl</kbd>+<kbd>C</kbd>.</p>
                
                <h4>Определения терминов:</h4>
                
                <p>Данный текст демонстрирует использование определения термина. Термин <dfn>семантика</dfn> означает смысловое значение элемента.</p>
                
                <h4>Данные и даты:</h4>
                
                <p>Дата события — <time datetime="2025-12-25">25 декабря</time> — соответствует значению <data value="12-25-2025">25.12.2025</data>.</p>
            </article>
        </section>

Боковая панель со вспомогательной информацией

        <aside class="complementary-info">
            <nav aria-label="Боковая навигация">
                <h4>Быстрая навигация</h4>
                <ul>
                    <li><a href="#">Главная страница</a></li>
                    <li><a href="#">Содержание курса</a></li>
                    <li><a href="#">Проверка знаний</a></li>
                </ul>
            </nav>
            
            <section class="quick-links">
                <h4>Связанные материалы</h4>
                <ul>
                    <li>Теория структуры данных</li>
                    <li>Практические задания</li>
                    <li>Чек-листы для самопроверки</li>
                </ul>
            </section>
        </aside>

Подвал документа

        <section id="feedback">
            <footer>
                <p>Формы обратной связи позволяют пользователю отправить данные разработчикам проекта.</p>
                
                <h5>Контактная информация</h5>
                <address>
                    <p>Разработчик: Team Name</p>
                    <p>Email: contact@example.com</p>
                    <time datetime="2025-11-18">Дата последнего обновления: 18.11.2025</time>
                </address>
            </footer>
        </section>

Завершение body и html

    </main>
    
    <footer>
        <p>Авторские права © 2025. Все материалы защищены лицензией.</p>
        <nav aria-label="Нижнее меню">
            <ul>
                <li><a href="/privacy">Политика конфиденциальности</a></li>
                <li><a href="/terms">Условия использования</a></li>
            </ul>
        </nav>
    </footer>
</body>
</html>

Элемент `<header>`

Атрибут	Значение	Описание
`role`	banner	Роль области баннера
`aria-label`	Название раздела	Описание назначения шапки
`class`	Имя класса	Стили для внешнего вида

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

Элемент `<footer>`

Атрибут	Значение	Описание
`role`	contentinfo	Роль информационной подложки
`aria-label`	Название раздела	Описание назначения подвала
`class`	Имя класса	Стили для внешнего вида

Элемент содержит завершающую информацию — авторские права, контакты, ссылки на связанные документы. Может находиться в main или отдельно после него.

Элемент `<main>`

Атрибут	Значение	Описание
`id`	unique-id	Уникальный идентификатор
`tabindex`	-1	Программная фокусировка
`class`	Имя класса	Стили для внешнего вида

Документ должен содержать ровно один элемент main. Он определяет основное содержание, не повторяющееся в других частях страницы.

Элемент `<section>`

Атрибут	Значение	Описание
`aria-labelledby`	ID заголовка	Ссылка на подписанный заголовок
`aria-describedby`	ID описания	Дополнительная информация
`id`	unique-id	Уникальный идентификатор
`class`	Имя класса	Стили для внешнего вида

Каждая секция должна иметь заголовок h1–h6 или атрибут aria-label. Секции создают новую область в outline документа.

Элемент `<article>`

Атрибут	Значение	Описание
`aria-labelledby`	ID заголовка	Ссылка на подписанный заголовок
`itemprop`	name, author	Микроданные для SEO
`class`	Имя класса	Стили для внешнего вида

Элемент представляет самодостаточный контент, имеющий смысл вне контекста страницы. Подходит для новостей, постов, комментариев.

Элемент `<aside>`

Атрибут	Значение	Описание
`role`	complementary	Роль дополнения к основному контенту
`aria-label`	Название	Описание области
`class`	Имя класса	Стили для внешнего вида

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

Элемент `<nav>`

Атрибут	Значение	Описание
`aria-label`	Название меню	Описание навигационного блока
`class`	Имя класса	Стили для внешнего вида
`id`	unique-id	Уникальный идентификатор

Элемент содержит навигационные ссылки — меню сайта, оглавление, пагинация. Страница может иметь несколько nav для разных разделов.

Элемент `<time>`

Атрибут	Значение	Описание
`datetime`	ISO 8601	Машиночитаемая дата/время
`class`	Имя класса	Стили для внешнего вида

Значение datetime принимает формат ISO 8601. Браузеры отображают human-readable текст, используют datetime для программных целей.

Элемент `<data>`

Атрибут	Значение	Описание
`value`	строка	Машиночитаемое значение
`class`	Имя класса	Стили для внешнего вида

Атрибут value хранит значение для программной обработки. Отображаемый текст может отличаться от значения.

Элемент `<mark>`

Атрибут	Значение	Описание
`class`	Имя класса	Стили для внешнего вида

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

<p>Найдено слово <mark>HTML</mark> в тексте.</p>

Результат:

Найдено слово HTML в тексте.

Элемент `<strong>`

Атрибут	Значение	Описание
`aria-level`	уровень	Уровень приоритета
`class`	Имя класса	Стили для внешнего вида

Элемент обозначает текст высокой важности или срочности. По умолчанию отображается жирным шрифтом.

<p><strong>Внимание:</strong> сохраните работу перед выходом.</p>

Результат:

Внимание: сохраните работу перед выходом.

Элемент `<em>`

Атрибут	Значение	Описание
`class`	Имя класса	Стили для внешнего вида

Элемент добавляет интонационный акцент к тексту. По умолчанию отображается курсивом.

<p>Это <em>очень</em> важная деталь.</p>

Результат:

Это очень важная деталь.

Элемент `<cite>`

Атрибут	Значение	Описание
`href`	URL источника	Ссылка на произведение
`class`	Имя класса	Стили для внешнего вида

Элемент содержит название произведения — книги, фильма, статьи. Не следует использовать для имени автора.

Элемент `<var>`

Атрибут	Значение	Описание
`class`	Имя класса	Стили для внешнего вида

Элемент обозначает переменную в математическом выражении или коде. Обычно отображается курсивом.

Элемент `<dfn>`

Атрибут	Значение	Описание
`title`	расшифровка	Дополнительная информация
`class`	Имя класса	Стили для внешнего вида

Элемент определяет термин при первом упоминании. Часто оборачивает слово или аббревиатуру.

Элемент `<samp>`

Атрибут	Значение	Описание
`class`	Имя класса	Стили для внешнего вида

Элемент содержит пример вывода программы или системы. Обычно отображается моноширинным шрифтом.

Элемент `<abbr>`

Атрибут	Значение	Описание
`title`	расшифровка	Полное название аббревиатуры
`class`	Имя класса	Стили для внешнего вида

Элемент обозначает аббревиатуру или акроним. Атрибут title содержит полное название для скринридеров.

Элемент `<kbd>`

Атрибут	Значение	Описание
`class`	Имя класса	Стили для внешнего вида

Элемент обозначает ввод пользователя с клавиатуры. Кнопки разделяют несколькими kbd элементами.

Мультимедиа и встраивание

HTML позволяет встраивать разнообразные типы медиаконтента:

<audio> — воспроизведение звука.
<video> — воспроизведение видео.
<source> — указание альтернативных источников для <audio> и <video>, позволяющее поддерживать разные форматы.
<track> — добавление субтитров, описаний или глав к видео/аудио.
<embed> — встраивание внешнего контента (например, Flash, PDF).
<object> — универсальный контейнер для встраивания мультимедиа или плагинов.
<canvas> — область для рисования графики с помощью JavaScript.

Элементы <audio> и <video> поддерживают атрибут controls, который отображает стандартные элементы управления (плей, пауза, громкость).

Изображения и графика

Тег <img> предназначен для отображения растровых изображений. Обязательный атрибут — src. Рекомендуемый атрибут — alt, содержащий текстовое описание изображения для случаев, когда изображение недоступно или используется скринридером.

Для группировки изображения с подписью применяется пара тегов:

<figure> — контейнер для изображения, диаграммы, кода и т.п.
<figcaption> — подпись к содержимому <figure>.

Элемент <picture> позволяет задавать несколько вариантов изображения для разных условий (размер экрана, плотность пикселей). Внутри <picture> используются теги <source> с атрибутами media или type.

SVG-графика может быть встроена прямо в HTML с помощью тега <svg>. Также возможна работа с SVG-спрайтами — объединёнными файлами иконок, где нужная иконка вызывается через <use>. Готовые учебные фигуры (квадрат, треугольник, домик, цветок, снежинка) с построчным разбором — SVG — рисунки кодом; справочник по атрибутам — элемент <svg> в HTML.

Интерактивные компоненты

Помимо форм и кнопок, HTML предлагает встроенные интерактивные элементы. В статьях энциклопедии к ним добавляют callout — выноски на базе <div> и классов (см. основы HTML).

Callout в документации

Живой пример предупреждения (как в статьях про безопасность и Git):

Перед экспериментом

Деструктивные команды (rm -rf, git reset --hard) пробуйте только в учебной среде, не в рабочем репозитории.

`<details>` и `<summary>`

Раскрывающийся блок без скриптов — удобен для FAQ, длинных таблиц атрибутов и "показать разметку":

Пример — скрытый фрагмент разметки

&lt;button type="button"&gt;Отправить&lt;/button&gt;

Список прочих интерактивных тегов:

<details> и <summary> — раскрывающийся блок с дополнительной информацией. <summary> служит заголовком, клик по которому открывает или закрывает содержимое.
<meter> — индикатор значения в известном диапазоне (например, уровень заряда).
<progress> — индикатор выполнения задачи (например, загрузка файла).
<dialog> — модальное или немодальное диалоговое окно (подробно описано выше).

Popover API — новая функциональность, позволяющая создавать всплывающие панели без JavaScript. Для этого используется глобальный атрибут popover и методы showPopover() / hidePopover().

Глобальные атрибуты

Глобальные атрибуты применимы ко всем HTML-элементам:

class — назначение CSS-класса.
id — уникальный идентификатор элемента.
style — встроенные CSS-правила.
title — всплывающая подсказка при наведении.
hidden — скрытие элемента без удаления из DOM.
inert — деактивация всех взаимодействий с элементом и его потомками.
tabindex — управление порядком перехода по элементам с клавиатуры.
autofocus — автоматическая установка фокуса при загрузке страницы.
dir — направление текста (ltr, rtl, auto).
translate — управление автоматическим переводом содержимого (yes/no).
enterkeyhint — подсказка на виртуальной клавиатуре (например, "Отправить", "Готово").
data-* — пользовательские данные, доступные через JavaScript.

Атрибут data-* особенно полезен для хранения служебной информации, связанной с элементом, без изменения его визуального представления.

Если фрагмент не должен переводиться встроенным переводчиком браузера, укажите translate="no":

<code translate="no">npm run build</code>

Интеграция с другими языками

HTML-документ может включать стили и скрипты:

<style> — встроенные CSS-правила.
<script> — встроенный или внешний JavaScript-код.
- Атрибут defer откладывает выполнение скрипта до полной загрузки DOM.
- Атрибут async загружает и выполняет скрипт асинхронно, не блокируя парсинг страницы.
- Атрибут crossorigin управляет CORS-запросами при загрузке внешних ресурсов.
- type="speculationrules" — JSON с правилами предзагрузки и prerender (см. ниже).
<noscript> — резервный контент, отображаемый, если скрипты отключены.
<template> — невидимый фрагмент HTML, предназначенный для клонирования и вставки через JavaScript.

Спекулятивная загрузка — Speculation Rules

Speculation Rules API позволяет подсказать браузеру, какие страницы пользователь, скорее всего, откроет следующими. Браузер может заранее подготовить переход: загрузить документ (prefetch) или полностью отрендерить его в фоне (prerender).

Правила задаются тегом <script type="speculationrules">. Это JSON в разметке, а не исполняемый JavaScript.

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": { "href_matches": "/logout" } },
        { "not": { "selector_matches": "[rel~=nofollow]" } },
        { "not": { "selector_matches": "[data-no-prerender]" } }
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Что означает пример:

prerender — браузер заранее строит DOM, применяет стили и может выполнить скрипты целевой страницы.
href_matches: "/*" — правило для внутренних ссылок сайта.
not — исключения — выход из аккаунта, ссылки с rel="nofollow", элементы с data-no-prerender.
eagerness: "moderate" — старт подготовки при намерении перейти (часто при наведении на ссылку).

При клике по уже подготовленной странице переход ощущается почти мгновенным.

Когда это уместно

Документация, блог, каталог — предсказуемая навигация по ссылкам.
Лендинги с несколькими целевыми страницами (тарифы, контакты, регистрация).
SPA с классической ссылочной навигацией между маршрутами.

Ограничения

prerender расходует память и трафик: готовить стоит только вероятные переходы.
Исключайте чувствительные URL (/logout, /admin, оплата).
Для отдельной ссылки можно добавить data-no-prerender или rel="nofollow".
Поддержка в браузерах развивается; в production проверяйте метрики (hit rate, экономия LCP навигации).

Связанные механизмы: <link rel="prefetch">, <link rel="preconnect"> — в спекулятивной загрузке.

Поисковая оптимизация и метаданные

Метаданные размещаются внутри <head> и описывают документ для браузеров, поисковиков и социальных сетей:

<meta charset="UTF-8"> — указание кодировки.
<meta name="viewport" content="width=device-width, initial-scale=1"> — адаптация под мобильные устройства.
<meta name="description" content="..."> — краткое описание страницы.
<link rel="canonical" href="..."> — указание канонического URL.
Open Graph и Twitter Card — метатеги для корректного отображения ссылок в соцсетях.

Хотя тег <noindex> иногда упоминается в контексте запрета индексации, он не является частью официального стандарта HTML. Для управления индексацией рекомендуется использовать HTTP-заголовки или robots-метатег.

Устаревшие и нестандартные элементы

Некоторые теги, такие как <font>, <center>, <strike>, <frame>, больше не поддерживаются в современном HTML. Их функциональность заменяется CSS или семантическими аналогами. Использование устаревших элементов снижает доступность, производительность и поддерживаемость кода.

Основа по протоколу

Базовый разбор HTTP и HTTPS находится в отдельной статье — HTTP как основа веб-интеграций.

Содержание

Форматирование текста
Ссылки и изображения
Элементы выбора из списка
Формы и айфреймы
Таблицы
Работа с тегами и события
Модальные и диалоговые окна
Семантические элементы
Мультимедиа и встраивание
Изображения и графика
Интерактивные компоненты
- Callout в документации
- <details> и <summary>
Глобальные атрибуты
Интеграция с другими языками
Спекулятивная загрузка — Speculation Rules
- Когда это уместно
- Ограничения
Поисковая оптимизация и метаданные
Устаревшие и нестандартные элементы

Форматирование текста​

Основные теги форматирования текста​

Жирный шрифт — <b>​

Курсив — <i>​

Подчёркивание — <u>​

Перенос строки — <br>​

Горизонтальная линия — <hr>​

Абзац — <p>​

Заголовки — <h1>–<h6>​

Неупорядоченный список — <ul>​

Упорядоченный список — <ol>​

Элемент списка — <li>​

Ссылки и изображения​

Основные теги ссылок и изображений​

Базовая ссылка с href​

Ссылка, открывающаяся в новой вкладке (target="_blank")​

Скачивание файла (download)​

Якорная (внутренняя) ссылка на элемент на той же странице​

Указание языка документа (hreflang)​

Базовое изображение с src и alt​

Изображение с заданной шириной и высотой​

Изображение как ссылка​

Альтернативный текст для доступности​

Относительный и абсолютный путь в src​

Элементы выбора из списка​

Общие принципы работы выпадающих списков​

Элемент <select>​

Характеристики​

Специфические атрибуты​

Поведение при различных настройках​

Элемент <option>​

Характеристики​

Специфические атрибуты​

Примеры использования​

Элемент <optgroup>​

Назначение группировки​

Специфические атрибуты​

Пример структуры​

Пример полной формы с выпадающими списками​

Формы и айфреймы​

Основные теги форм​

Типы поля <input>​

Простая форма входа​

Форма обратной связи с многострочным полем​

Форма с чекбоксами и радиокнопками​

Форма загрузки файла​

Скрытые поля и кнопка сброса​

Встраивание видео с YouTube​

Встраивание карты Google Maps​

Встраивание стороннего документа или страницы​

Защита от встраивания (примечание)​

Таблицы​

Основные теги таблиц​

Простая таблица с заголовками​

Таблица с объединёнными ячейками (colspan, rowspan)​

Таблица с разделением на секции (<thead>, <tbody>, <tfoot>)​

Таблица без границ (чистый вид)​

Таблица для расписания (сложная структура)​

Доступность — использование scope в заголовках​

Работа с тегами и события​

Справочные теги​

<div> и <span> — сравнение​

Метатеги <meta>​

Основные теги событий​

Кнопка​

Простая кнопка без действия​

Кнопка как часть формы​

Кнопка с обработкой события​

Обработка событий​

Встраивание скриптов​

Встроенный скрипт​

Внешний скрипт​

Асинхронная загрузка​

Резервный контент — <noscript>​

Модальные и диалоговые окна​

Как пишется​

Как открыть​

Как закрыть​

Атрибут closedby​

Возвращаемое значение​

Форматирование текста

Основные теги форматирования текста

Жирный шрифт — `<b>`

Курсив — `<i>`

Подчёркивание — `<u>`

Перенос строки — `<br>`

Горизонтальная линия — `<hr>`

Абзац — `<p>`

Заголовки — `<h1>`–`<h6>`

Неупорядоченный список — `<ul>`

Упорядоченный список — `<ol>`

Элемент списка — `<li>`

Ссылки и изображения

Основные теги ссылок и изображений

Базовая ссылка с `href`

Ссылка, открывающаяся в новой вкладке (`target="_blank"`)

Скачивание файла (`download`)

Якорная (внутренняя) ссылка на элемент на той же странице

Указание языка документа (`hreflang`)

Базовое изображение с `src` и `alt`

Изображение с заданной шириной и высотой

Изображение как ссылка

Альтернативный текст для доступности

Относительный и абсолютный путь в `src`

Элементы выбора из списка

Общие принципы работы выпадающих списков

Элемент `<select>`

Характеристики

Специфические атрибуты

Поведение при различных настройках

Элемент `<option>`

Характеристики

Специфические атрибуты

Примеры использования

Элемент `<optgroup>`

Назначение группировки

Специфические атрибуты

Пример структуры

Пример полной формы с выпадающими списками

Формы и айфреймы

Основные теги форм

Типы поля `<input>`

Простая форма входа

Форма обратной связи с многострочным полем

Форма с чекбоксами и радиокнопками

Форма загрузки файла

Скрытые поля и кнопка сброса

Встраивание видео с YouTube

Встраивание карты Google Maps

Встраивание стороннего документа или страницы

Защита от встраивания (примечание)

Таблицы

Основные теги таблиц

Простая таблица с заголовками

Таблица с объединёнными ячейками (`colspan`, `rowspan`)

Таблица с разделением на секции (`<thead>`, `<tbody>`, `<tfoot>`)

Таблица без границ (чистый вид)

Таблица для расписания (сложная структура)

Доступность — использование `scope` в заголовках

Работа с тегами и события

Справочные теги

`<div>` и `<span>` — сравнение

Метатеги `<meta>`

Основные теги событий

Кнопка

Простая кнопка без действия

Кнопка как часть формы

Кнопка с обработкой события

Обработка событий

Встраивание скриптов

Встроенный скрипт

Внешний скрипт

Асинхронная загрузка

Резервный контент — `<noscript>`

Модальные и диалоговые окна

Как пишется

Как открыть

Как закрыть

Атрибут `closedby`

Возвращаемое значение