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

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

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

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

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

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

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

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

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

Жирный шрифт: `<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> - Гипертекстовая ссылка (гиперссылка) – текст, который позволяет при клике перейти по ссылке, указанной в атрибуте. Она будет выведена по умолчанию как подчёркнутый текст.

Сама ссылка будет скрыта, но отображаться будет в виде текста, который называется анкор (anchor) – потому этот тег и называется «а». Пример ссылки:

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

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

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

На практике, конечно, для <a>, используют в основном только href атрибут, так что на текущий момент достаточно запомнить лишь его – он обязательный.

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

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

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

Как и href у тега <a>, для <img> атрибут src – путь к картинке, обязательный атрибут.

Базовая ссылка с `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» (href="#section2")
— прокручивает страницу до элемента с id="section2".

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

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

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

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

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

Результат:
Браузер загружает изображение по пути images/photo.jpg. Если изображение недоступно, вместо него отображается текст «Пейзаж горного озера».

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

<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` для программной навигации

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

<!-- Раскрывающийся список (стандартный) -->
<select name="country">
  <option value="">Выберите страну</option>
  <option value="ru">Россия</option>
  <option value="de">Германия</option>
</select>

<!-- Список с количеством строк -->
<select size="4" name="fruits">
  <option>Яблоко</option>
  <option>Банан</option>
  <option>Груша</option>
  <option>Апельсин</option>
  <option>Киви</option>
</select>

<!-- Множественный выбор -->
<select multiple name="hobbies">
  <option value="reading">Чтение</option>
  <option value="music">Музыка</option>
  <option value="travel">Путешествия</option>
</select>

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

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

<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`	строка	Заголовок группы	Любая строка	Обязательно указывать для каждой группы

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

<select name="category">
  <optgroup label="Электроника">
    <option value="phone">Смартфоны</option>
    <option value="laptop">Ноутбуки</option>
    <option value="tablet">Планшеты</option>
  </optgroup>
  <optgroup label="Одежда" disabled>
    <option value="tshirt">Футболки</option>
    <option value="jeans">Джинсы</option>
  </optgroup>
  <optgroup label="Продукты">
    <option value="fruits">Фрукты</option>
    <option value="vegetables">Овощи</option>
  </optgroup>
</select>

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

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

<form id="registration-form" action="/register" method="post">
  <fieldset>
    <legend>Основные данные</legend>
    
    <div class="form-row">
      <label for="role-select">Роль в системе</label>
      <select id="role-select" name="role" required>
        <option value="" disabled selected>Выберите вашу роль</option>
        <option value="admin">Администратор</option>
        <option value="manager">Менеджер проекта</option>
        <option value="developer">Разработчик</option>
        <option value="tester">Тестировщик</option>
        <option value="designer">Дизайнер</option>
      </select>
    </div>
    
    <div class="form-row">
      <label for="department-select">Отдел</label>
      <select id="department-select" name="department" required>
        <option value="" disabled selected>Выберите отдел</option>
        <optgroup label="Технический">
          <option value="frontend">Frontend</option>
          <option value="backend">Backend</option>
          <option value="devops">DevOps</option>
          <option value="qa">QA</option>
        </optgroup>
        <optgroup label="Нетехнический">
          <option value="marketing">Маркетинг</option>
          <option value="sales">Продажи</option>
          <option value="hr">HR</option>
          <option value="finance">Финансы</option>
        </optgroup>
      </select>
    </div>
    
    <div class="form-row">
      <label for="experience-select">Опыт работы</label>
      <select id="experience-select" name="experience" required>
        <option value="">Выберите диапазон</option>
        <option value="junior">0-1 год (Junior)</option>
        <option value="middle">1-3 года (Middle)</option>
        <option value="senior">3-5 лет (Senior)</option>
        <option value="lead">5+ лет (Lead)</option>
      </select>
    </div>
    
    <div class="form-actions">
      <button type="reset">Очистить</button>
      <button type="submit">Зарегистрироваться</button>
    </div>
  </fieldset>
</form>

<style>
.form-row {
  margin-bottom: 20px;
}

.form-row label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-row select {
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-row select:focus {
  border-color: #0066cc;
  box-shadow: 0 0 10px rgba(0, 102, 204, 0.2);
  outline: none;
}

.form-actions {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.form-actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-actions button[type="reset"] {
  background-color: #f5f5f5;
  color: #333;
}

.form-actions button[type="reset"]:hover {
  background-color: #e0e0e0;
}

.form-actions button[type="submit"] {
  background-color: #0066cc;
  color: white;
}

.form-actions button[type="submit"]:hover {
  background-color: #0052a3;
}
</style>

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

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

Формы - <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):

text – стандартное текстовое поле, можно добавить атрибут value, который будет содержать текст по умолчанию;
password – текстовое поле, но вводимые символы будут скрыты;
checkbox – поле флажков (чекбоксов), или «галочек», которые можно включить или выключить – добавляется атрибут checked, который задаёт начальное состояние – включен или выключен (checked/unchecked);
radio – переключатели (radiobuttons), которые работают по принципу checked/unchecked, но имеет два объекта, где выбирается или первый, или второй;
file – поле загрузки файла;
submit – кнопка отправки данных;
image – изображение вместо кнопки отправки, потребуется дополнительный атрибут src;
button – кнопка;
reset – кнопка сброса значений по умолчанию;
hidden – скрытое поле (скрытое от пользователя).

Кроме форм, можно встроить также «айфрейм» при помощи тега <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-Данные">
  <label for="avatar">Загрузите аватар:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">

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

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

Атрибут enctype="multipart/form-Данные" у формы;
Тип поля 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="Музыкальное видео"
  frameborder="0"
  allowfullscreen>
</iframe>

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

Встраивание карты 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>

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

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

Здесь:

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

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

<table border="1">
  <tr>
    <th>Город</th>
    <th>Население (тыс.)</th>
    <th>Страна</th>
  </tr>
  <tr>
    <td>Москва</td>
    <td>12600</td>
    <td>Россия</td>
  </tr>
  <tr>
    <td>Париж</td>
    <td>2100</td>
    <td>Франция</td>
  </tr>
</table>

Результат отображается как:

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

Такая таблица подходит для представления структурированных данных, где каждая строка — отдельная сущность, а столбцы — её атрибуты.

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

<table border="1">
  <tr>
    <th>Имя</th>
    <th colspan="2">Контакты</th>
  </tr>
  <tr>
    <td>Иван Петров</td>
    <td>ivan@example.com</td>
    <td>+7 (999) 123-45-67</td>
  </tr>
  <tr>
    <td rowspan="2">ООО «ТехноЛаб»</td>
    <td>office@techlab.ru</td>
    <td>+7 (495) 987-65-43</td>
  </tr>
  <tr>
    <td>support@techlab.ru</td>
    <td>+7 (495) 987-65-44</td>
  </tr>
</table>

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

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

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

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

<table border="1">
  <thead>
    <tr>
      <th>Товар</th>
      <th>Цена (руб.)</th>
      <th>Количество</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ноутбук</td>
      <td>85000</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Мышь</td>
      <td>1500</td>
      <td>5</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Итого:</td>
      <td>177500 руб.</td>
    </tr>
  </tfoot>
</table>

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

<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.

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

<table border="1">
  <tr>
    <th>Время</th>
    <th>Понедельник</th>
    <th>Вторник</th>
    <th>Среда</th>
  </tr>
  <tr>
    <td>09:00–10:30</td>
    <td>Математика</td>
    <td></td>
    <td>Физика</td>
  </tr>
  <tr>
    <td>10:45–12:15</td>
    <td></td>
    <td>Программирование</td>
    <td></td>
  </tr>
</table>

Пустые ячейки <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> -->

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

пояснения сложных участков кода;
временного отключения фрагментов разметки при отладке;
разделения логических блоков (например, , ).

Помимо комментариев, имеется возможность формировать основы

<span> - тег для группировки строчных элементов и задания им определенных атрибутов, к примеру, если посреди текста нужно <span style="color:blue;font-weight:bold">синий</span> текст.
<div> - тег для выделения раздела или блока кода. Он нужен особенно в случаях, когда для определённой части кода используется особый CSS-стиль, к примеру, нужно определить, что есть вкладка, а что – контент вкладки.
<meta> - метаданные о HTML-документе, которые находятся внутри тега <head> - они используются для указания информационного набора общих сведений о странице.

То есть, <div> и <span> это «коробки» для структуры и текста, а <meta> - служебная информация о странице.

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

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

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

<span> не влияет на структуру документа;
применяется внутри строкового контекста (внутри <p>, <h1>, <li> и т.д.);
часто используется с CSS или JavaScript для точечного управления стилем или поведением.

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

Результат — выделенный блок с фоном и отступами.

Назначение:

группировка других элементов;
применение общих стилей или скриптов к целой секции;
основа для макета (layout) при использовании CSS Grid или Flexbox.

<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-методов:

show() — добавляет атрибуты open и aria-modal="false".
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".

<dialog open id="closeMe" aria-labelledby="heading">
  <h2 id="heading">Закрой меня! 🙏</h2>
  <p>Результат этих кнопок одинаковый.</p>

  <button type="button" onclick="window.closeMe.close()">
    Закрыть с помощью JavaScript
  </button>

  <form method="dialog">
    <button>
      Закрыть с помощью формы
    </button>
  </form>
</dialog>

Атрибут `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`)
`<Данные>`	Контент с машиночитаемым значением, отличным от отображаемого текста
`<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></strong> — акцентированный текст с интонацией</li>
                    <li><mark><code>&lt;mark&gt;</code></strong> — выделенный фрагмент для поиска</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> — соответствует значению <Данные value="12-25-2025">25.12.2025</Данные>.</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 для программных целей.

Элемент `<Данные>`

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

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

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

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

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

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

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

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

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

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

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

Элемент `<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>.

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

Помимо форм и кнопок, HTML предлагает встроенные интерактивные элементы:

<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).
enterkeyhint — подсказка на виртуальной клавиатуре (например, «Отправить», «Готово»).
Данные-* — пользовательские данные, доступные через JavaScript.

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

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

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

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

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

Метаданные размещаются внутри <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 или семантическими аналогами. Использование устаревших элементов снижает доступность, производительность и поддерживаемость кода.

См. также

Другие статьи этого же раздела в боковом меню (как на странице «О разделе»).

Форматирование текста
Результат:Первый абзац.
- Абзац: <p>
- Заголовки: <h1>–<h6>
Заголовок второго уровня
Ссылки и изображения
Элементы выбора из списка
Формы и айфреймы
Таблицы
Работа с тегами и события
Модальные и диалоговые окна
Семантические элементы
Мультимедиа и встраивание
Изображения и графика
Интерактивные компоненты
Глобальные атрибуты
Интеграция с другими языками
Поисковая оптимизация и метаданные
Устаревшие и нестандартные элементы

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

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

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

Курсив: <i>​

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

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

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

Результат: Первый абзац.​

Абзац: <p>​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Элемент <select>​

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

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

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

Элемент <option>​

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

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

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

Элемент <optgroup>​

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы​

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

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

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

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

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

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

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

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

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

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

Кнопка​

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

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

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

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

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

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

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

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

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

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

Как пишется​

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

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

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

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

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

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

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

Результат:
Первый абзац.

Абзац: `<p>`

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Таблицы

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

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

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

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

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

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

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

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

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

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

Кнопка

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

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

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

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

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

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

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

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

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

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

Как пишется

Как открыть