HTML — язык разметки веб-страниц

1. Что такое HTML

HTML — это язык разметки, который описывает, из каких элементов состоит веб-страница и как эти элементы связаны между собой. Он не является языком программирования в полном смысле слова: в нём нет переменных, циклов и логики — только структура.

Первая версия HTML была создана Тимом Бернерсом-Ли в начале 1990-х годов. Современный стандарт называется HTML5 — он появился в 2014 году и добавил семантические теги, встроенную поддержку видео и аудио, а также множество других возможностей.

Как работают HTML, CSS и JavaScript вместе

• HTML — каркас и содержимое здания (стены, комнаты, мебель).
• CSS — оформление и внешний вид (краска, обои, стиль интерьера).
• JavaScript — поведение и интерактивность (электрика, автоматика, логика дома).

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

Любая HTML-страница начинается с объявления типа документа и корневого элемента <html>, внутри которого находятся две основные части: <head> (служебная информация) и <body> (видимое содержимое).

<!DOCTYPE html>           <!-- тип документа: HTML5 -->
<html lang="ru">          <!-- корневой элемент, язык страницы -->
<head>                    <!-- служебные данные -->
  <meta charset="UTF-8">  <!-- кодировка текста -->
  <title>Моя страница</title>  <!-- название вкладки -->
</head>
<body>                    <!-- видимое содержимое -->
  <h1>Привет, мир!</h1>   <!-- заголовок -->
</body>
</html>

Скелет страницы — <!DOCTYPE html>, <html>, <head>, <body>.

Назначение элементов head

3. Текстовая разметка

Заголовки

Заголовки обозначаются тегами от <h1> до <h6>. Первый отвечает за главный заголовок страницы, следующие — за подзаголовки и логические уровни вложенности.

<h1>Главный заголовок</h1>
<h2>Раздел 1</h2>
<h3>Подраздел 1.1</h3>
<h2>Раздел 2</h2>

Абзацы и выделение текста

<p>Обычный абзац текста.</p>
<p>Слово <strong>важное</strong> и <em>выделенное</em>.</p>
<p>Можно сделать <mark>отметку маркером</mark>.</p>

strong — это смысловое выделение важности, em — смысловое акцентирование. Их стоит отличать от визуальных <b> и <i>, которые не несут смысла.

Переносы и разделители

<p>Первая строка<br>вторая строка</p>
<hr>   <!-- горизонтальная линия-разделитель -->

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

Ссылки

<a href="https://example.com">Внешняя ссылка</a>
<a href="about.html">Относительная ссылка</a>
<a href="page.html" target="_blank">Открыть в новой вкладке</a>

Атрибут target="_blank" открывает ссылку в новом окне. Чтобы перейти к нужному месту страницы, используют якоря — ссылку на идентификатор элемента.

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

<h2 id="section2">Второй раздел</h2>

Абсолютные пути содержат полный адрес с доменом (https://site.ru/page.html), а относительные указывают путь от текущего файла (img/photo.jpg, ../css/style.css).

Изображения

<img src="images/cat.jpg" alt="Рыжий кот на диване">
<img src="logo.png" alt="Логотип компании" width="200" height="100">

5. Списки и таблицы

Списки

Маркированный список <ul>, нумерованный — <ol>. Каждый пункт — <li>.

<ul>
  <li>Молоко</li>
  <li>Хлеб</li>
  <li>Яблоки</li>
</ul>

<ol>
  <li>Открыть файл</li>
  <li>Внести правки</li>
  <li>Сохранить</li>
</ol>

Таблицы

<table>
  <thead>
    <tr><th>Имя</th><th>Возраст</th></tr>
  </thead>
  <tbody>
    <tr><td>Иван</td><td>25</td></tr>
    <tr><td>Мария</td><td>30</td></tr>
  </tbody>
</table>

Секции <thead>, <tbody> и <tfoot> помогают браузеру и скринридерам понять структуру таблицы. Для объединения ячеек применяются атрибуты colspan (по горизонтали) и rowspan (по вертикали).

<tr>
  <td colspan="2">Ячейка на две колонки</td>
</tr>

6. Формы

Формы собирают данные от пользователя. Основные элементы: <form>, <input>, <textarea>, <select> и кнопки.

<form action="/register" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="you@mail.ru" required>

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

  <p>
    <input type="checkbox" id="agree" name="agree">
    <label for="agree">Согласен с условиями</label>
  </p>

  <p>
    <input type="radio" id="male" name="gender" value="m">
    <label for="male">Мужской</label>
    <input type="radio" id="female" name="gender" value="f">
    <label for="female">Женский</label>
  </p>

  <select name="city">
    <option value="msk">Москва</option>
    <option value="spb">Санкт-Петербург</option>
  </select>

  <textarea name="message" rows="4"></textarea>

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

Основные типы поля input

7. Семантические теги HTML5

Семантика означает «смысл». Семантические теги описывают, что именно находится внутри, а не только как это выглядит.

<header>   Шапка страницы или раздела
<nav>      Навигация
<main>     Основное содержимое (одно на странице)
<section>  Логический раздел
<article>  Самодостаточная статья или запись
<aside>    Боковая панель / сопутствующий контент
<footer>   Подвал страницы или раздела
<figure>   Иллюстрация с подписью

<figure>
  <img src="chart.png" alt="График роста продаж">
  <figcaption>Рост продаж в 2026 году</figcaption>
</figure>

8. Медиа

Видео и аудио

<video src="movie.mp4" controls width="640">
  Ваш браузер не поддерживает видео.
</video>

<audio src="song.mp3" controls loop></audio>

Атрибут controls показывает панель управления, autoplay — автозапуск, loop — зацикливание, muted — звук без громкости.

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

Любое видео на YouTube можно встроить через <iframe>:

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Урок по HTML" frameborder="0"
  allowfullscreen></iframe>

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

9. Атрибуты и валидация

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

<div id="header" class="container" lang="ru">
  <button data-action="save">Сохранить</button>
</div>

<!-- в JavaScript: -->
// document.querySelector('[data-action]')

Проверка кода

Один элемент может иметь несколько классов через пробел: class="card card--big". Важно, чтобы у элемента был только один id, и он не повторялся на странице.

10. Комментарии и основы доступности

Комментарии

Комментарии в HTML не отображаются на странице, но видны в коде. Они помогают разобраться в структуре.

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

<!--
  Многострочный
  комментарий
-->

Основы доступности

Доступность (a11y) помогает людям с ограниченными возможностями пользоваться сайтом. Основные принципы:

• Всегда указывай alt у изображений с содержанием.
• Соблюдай логическую иерархию заголовков от <h1> вниз.
• Используй <label> для каждого поля формы.
• Применяй атрибут lang="ru" на <html>.
• Для сложных элементов — ARIA-атрибуты, например aria-label и aria-hidden.

<button aria-label="Закрыть окно">&times;</button>

<div aria-hidden="true">декоративная иконка</div>

11. Спецсимволы и HTML-сущности

Символы <, > и & имеют специальное значение в HTML. Чтобы показать их как текст, используют сущности — именованные или числовые коды.

&lt;    —  <
&gt;    —  >
&amp;   —  &
&nbsp;  —  неразрывный пробел
&copy;   —  ©
&times; —  ×

Числовой вариант записывается так: © — тоже знак ©.

12. Метатеги и базовое SEO

Содержимое тега <head> почти не видно пользователю, но именно по нему поисковики и превью социальных сетей понимают страницу.

<meta name="description" content="Курс HTML: основы разметки">
<meta name="keywords" content="HTML, разметка">
<meta property="og:title" content="HTML для начинающих">
<meta property="og:image" content="cover.png">
<link rel="canonical" href="https://site.ru/html/">

• description — 150–160 символов, сниппет в поиске;
• og:* — превью при отправке в мессенджеры;
• canonical — главный адрес страницы при дублях.

13. Графика: Canvas и SVG

Рисовать прямо на странице можно двумя способами: SVG — векторная разметка, Canvas — программное рисование через JavaScript.

SVG остаётся частью HTML и масштабируется без потерь:

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="gold" stroke="orange"/>
</svg>

Canvas — область, где пиксели рисует JavaScript:

<canvas id="chart" width="400" height="200"></canvas>
<script>
  const ctx = document.getElementById("chart").getContext("2d");
  ctx.fillStyle = "steelblue";
  ctx.fillRect(10, 10, 380, 180);
</script>

14. Структура многостраничного сайта

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

site/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── img/
    ├── logo.svg
    └── hero.webp

• ссылки между страницами — относительные: about.html или ../img/logo.svg;
• одна общая шапка и подвал подключаются одинаковыми блоками разметки;
• все страницы должны иметь уникальные <title> и description;
• для администратора добавь favicon, robots.txt и sitemap.xml.

15. Viewport и адаптивная вёрстка

Сайт должен одинаково читаться на телефоне и мониторе. Ключ адаптивности — метатег viewport в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Без него браузер телефона включает «режим совместимости» и уменьшает страницу как картинку. После добавления тега верстка начинает реагировать на ширину экрана.

• проектируйте «mobile-first»: сначала узкая колонка, потом — шире;
• используйте относительные единицы и CSS Media Queries;
• изображения растягивайте через max-width: 100%;
• проверяйте в DevTools режим эмуляции устройств (раздел 9).

16. Продвинутая доступность: ARIA и фокус

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

<div role="button" tabindex="0" aria-pressed="false">Вкл</div>
<nav aria-label="Основная навигация">...</nav>

17. Встраиваемый контент: iframe и сторонние виджеты

Карты, видео, виджеты — всё это встраивается через <iframe>. Это «окно» на чужую страницу внутри вашей.

<iframe src="https://maps.example/embed" 
        width="600" height="450" 
        loading="lazy" title="Карта проезда"></iframe>

• всегда задавайте title — скринридеры озвучивают его;
• loading="lazy" экономит трафик ниже первого экрана;
• альтернатива video — теги <video> с controls (раздел 8).

<iframe sandbox="allow-scripts" src="widget.html"></iframe>

18. Оптимизация разметки для парсеров и индексации

Поисковики и парсеры читают HTML как документ: чистый порядок заголовков и логичная иерархия страницы работают на SEO лучше любой магии.

• один <h1> на страницу, заголовки — по вложенности;
• текст, обёрнутый в ссылки и списки, парсится полнее;
• важное содержимое — не в iframe (индексация ограничена);
• alt у картинок, summary у таблиц — это и доступность, и семантика.

<table>
  <caption>Расходы по кварталам</caption>
  <thead>...</thead>
</table>

19. Микроразметка Schema.org: понятные данные поисковикам

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

<div itemscope itemtype="https://schema.org/Article">
  <h2 itemprop="headline">Как настроить Nginx</h2>
  <meta itemprop="datePublished" content="2026-09-19"/>
  <span itemprop="author">IT Уроки</span>
</div>

• Schema.org — самый распространённый словарь типов (Article, Product, FAQ);
• JSON-LD — рекомендуемый формат: <script type="application/ld+json">...</script>;
• валидируйте разметку в Rich Results Test — иначе она не попадёт в выдачу.

20. Предзагрузка ресурсов: preload, prefetch и defer

Подсказки браузеру, какие файлы важны, — современная замена «скриптам в конце страницы». Атрибуты preload и prefetch управляют приоритетами загрузки ресурсов.

<link rel="preload" href="fonts.woff2" as="font">
<link rel="prefetch" href="next-page.html">
<script src="app.js" defer></script>

• preload — критичные ресурсы первой загрузки (шрифты, hero-изображение);
• prefetch — ресурсы следующей страницы, когда сеть свободна;
• defer исполняет скрипт после разбора HTML, не блокируя рендер;
• async — скрипт исполняется сразу после скачивания, порядок не гарантирован.

21. Web Components: свои HTML-теги

Web Components позволяют инкапсулировать разметку, стили и логику в переиспользуемый тег — например <my-rating>, который работает без фреймворка.

class MyRating extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `Рейтинг: ${this.getAttribute('value')} из 5`;
  }
}
customElements.define('my-rating', MyRating);

• custom elements — регистрация своих тегов через customElements.define;
• shadow DOM — изоляция стилей и разметки от внешней страницы;
• слоты и атрибуты — параметризация компонента прямо из разметки.

22. Вёрстка писем: HTML для email-рассылок

Письма — это HTML с ограничениями 15-летней давности: табличная вёрстка, инлайновые стили и никакого JavaScript. Почтовые клиенты строже любых браузеров.

<table role="presentation" width="600" cellpadding="0">
  <tr>
    <td style="font-family:Arial; padding:20px;">
      Привет! Это наша рассылка.
    </td>
  </tr>
</table>

• только таблицы и инлайновые стили — большинство клиентов иначе ломают вёрстку;
• ширина 600px, минимальный набор свойств: шрифт, отступы, ссылки;
• обязательны role="presentation", alt-тексты картинок и текстовая версия;
• перед отправкой — тест в Outlook, Gmail и Apple Mail.

23. Продвинутые элементы форм

Раздел 6 знакомит с базовыми полями. В реальных формах пригодятся ещё несколько полезных элементов — от выбора файла до подсказок при вводе.

<input type="file" accept="image/*">   <!-- загрузка файла -->
<input type="date" min="2026-01-01">   <!-- календарь -->

<input list="cities" placeholder="Начните печатать">
<datalist id="cities">
  <option value="Москва">
  <option value="Санкт-Петербург">
  <option value="Казань">
</datalist>

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

<fieldset>
  <legend>Способ доставки</legend>
  <label><input type="radio" name="delivery" value="courier"> Курьер</label>
  <label><input type="radio" name="delivery" value="pickup"> Самовывоз</label>
</fieldset>

Чтобы проверять ввод, которого нет в типах браузера, используй атрибут pattern с регулярным выражением и title для подсказки:

<input type="text" name="phone" pattern="[0-9+]{11,}" 
       title="Телефон: только цифры, 11+ символов" required>

24. Интерактив без JavaScript: details, dialog и popover

Часть интерактива HTML умеет из коробки. Раскрывающийся блок <details> с заголовком <summary> работает без единой строчки скриптов:

<details>
  <summary>Как вернуть товар?</summary>
  <p>Вернуть можно в течение 14 дней с чеком и упаковкой.</p>
</details>

<!-- атрибут open делает блок раскрытым по умолчанию -->
<details open>
  <summary>Гарантия</summary>
  <p>Официальная гарантия — 12 месяцев.</p>
</details>

Модальное окно <dialog> вызывается методом showModal() и закрывается кнопкой Esc — фокус и фон уже продуманы браузером:

<dialog id="modal">
  <h3>Подтверждение</h3>
  <p>Удалить этот файл?</p>
  <form method="dialog">
    <button value="cancel">Отмена</button>
    <button value="ok">Удалить</button>
  </form>
</dialog>

Атрибут popover превращает любой элемент во всплывающую подсказку или меню без JavaScript — браузер управляет показом и кликом мимо:

<button popovertarget="menu">Меню</button>
<ul id="menu" popover>
  <li>Профиль</li>
  <li>Настройки</li>
  <li>Выйти</li>
</ul>

25. Favicon и оформление вкладки

Значок сайта — это не только favicon.ico. Хороший набор покрывает вкладку десктопа, мобильные закладки и рабочие столы:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2563eb">
<meta name="theme-color" content="#2563eb">

• favicon.svg — масштабируемый значок для современных браузеров;
• apple-touch-icon — закладка на iPhone/iPad (нужен PNG не меньше 180×180);
• theme-color — цвет адресной строки в Chrome на Android;
• mask-icon — монохромная иконка Safari.

Что дальше

Ты изучил основы HTML: структуру документа, текстовую разметку, ссылки, изображения, списки, таблицы, формы, семантику, медиа и атрибуты. Теперь страница имеет структуру, но ещё выглядит некрасиво и «голой». Следующий логичный шаг — изучение CSS, чтобы превратить каркас в аккуратный и привлекательный дизайн. Когда закончишь, проверьте себя в тестах по HTML и CSS и соберите первый проект в Практике: лендинг.

← Вернуться к курсам