Перейти к основному содержимому

Основные 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>

Результат:

  1. Первый пункт
  2. Второй пункт
  3. Третий пункт

Элемент списка: <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="/files/document.pdf" download>Скачать PDF-документ</a>

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

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

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

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

Результат:
Перейти к разделу 2
— прокручивает страницу до элемента с 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="Иконка">

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

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

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

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

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

После обновления мы увидим:

image-2.png

Здесь:

  • <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 – заголовок.

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

image-3.png

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

Айфрейм позволяет встроить виджеты на свою страницу, но при этом виджет становится зависимым от доступности ресурса по ссылке в 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="Музыкальное видео"
  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)
<data>Контент с машиночитаемым значением, отличным от отображаемого текста
<mark>Выделение фрагмента текста, например, при поиске
<strong>Текст высокой важности (логическое выделение, не просто жирный шрифт)
<em>Акцентированный текст (логический курсив, передающий интонацию)
<cite>Название произведения (книги, фильма, статьи)
<var>Переменная в математическом выражении или программном коде
<dfn>Определение термина
<samp>Пример вывода программы
<abbr>Аббревиатура или акроним
<kbd>Обозначение пользовательского ввода с клавиатуры

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

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

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

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

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

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

Освоение главы0%