HTML

HTML(HyperText Markup Language) - язык гипертектовой разметки веб-страниц. Он соединяет между собой страницы средствами гипертекста, имеет определенный стиль написания и является языком.

Содержание

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

Пример простой страницы:

Чтобы увидеть результат кода разметки, необходимо создать файл index.html и открыть его в веб-браузере.

Файл index.html 

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Template of html document" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Моя первая веб-страница</title>
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый абзац.</p>
    <ul>
        <li>Первый пункт списка</li>
        <li>Второй пункт с вложенным элементом</li>
        <li>Третий пункт</li>
    </ul>
    <!-- Изображение и ссылка -->
    <img src="example.jpg" alt="Пример изображения" width="300" height="200">
    <a href="https://example.com" target="_blank">Перейти на сайт</a>
</body>
</html>

Основные элементы

Подробнее о <meta>

Тег meta для определения метаданных содержит атрибуты:

Пример

<meta name="description" content="Template of html document" />

Мета-тег description содержит описание страницы. (используется поисковыми системами)

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

Meta-тег viewport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб.

content может содержать следующие параметры для отображения страницы:

Из примера content="width=device-width, initial-scale=1.0" - устанавливается ширина страницы в соответствии с шириной экрана и определяет маштаб 1:1.

Примечание:

Семантическая верстка

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

Плюсы:

Таблица тегов

Тег Описание
<header> Вводная часть страницы (логотипб меню), шапка
<nav> Навигационный блок (меню, хлебные крошки или цепочка ссылок)
<main> Основное содержимое страницы с уникальным контентом
<article> Самодостаточный блок контента (статьяб новостьб карточка товара)
<section> Тематический раздел внутри страницы
<aside> Вспомогательный, дополнительный контент (боковая колонка, цитаты, пояснения, реклама, примечания)
<footer> Заключительная часть, подвал (копирайт, контакты, ссылки)
<address> Контактные данные (например, в подвале)
Пример семантической верстки 
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Семантическая страница</title>
</head>
<body>

  <!-- Шапка сайта -->
  <header>
    <h1>Мой блог</h1>
    <p>Добро пожаловать!</p>
  </header>

  <!-- Навигационное меню -->
  <nav>
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">Обо мне</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </nav>

  <!-- Основное содержимое страницы -->
  <main>
    <!-- Отдельная статья -->
    <article>
      <h2>Заголовок статьи</h2>
      <p>Текст статьи. Здесь может быть полезный контент.</p>
      <time datetime="2026-08-23">23 августа 2026</time>
    </article>

    <!-- Дополнительный раздел (например, последние записи) -->
    <section>
      <h3>Последние записи</h3>
      <ul>
        <li><a href="#">Запись 1</a></li>
        <li><a href="#">Запись 2</a></li>
      </ul>
    </section>
  </main>

  <!-- Боковая панель -->
  <aside>
    <h4>О блоге</h4>
    <p>Краткая информация о блоге и авторе.</p>
  </aside>

  <!-- Подвал -->
  <footer>
    <p>&copy; 2026 Мой блог. Все права защищены.</p>
  </footer>

</body>
</html>

Элемент <div>

Элемент <div> - нужен для того, чтобы выделять элементы в отдельные блоки, и используется, как правило, для стилизации

Пример без семантической верстки (не делайте так)

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Верстка на div</title>
</head>
<body>
  <!-- Шапка -->
  <div class="header">
    <h1>Мой блог</h1>
    <p>Добро пожаловать!</p>
  </div>
  <!-- Навигация -->
  <div class="nav">
    <ul>
      <li><a href="/">Главная</a></li>
      <li><a href="/about">Обо мне</a></li>
      <li><a href="/contacts">Контакты</a></li>
    </ul>
  </div>
  <!-- Основной контент -->
  <div class="main">
    <!-- Статья -->
    <div class="article">
      <h2>Заголовок статьи</h2>
      <p>Текст статьи. Здесь может быть полезный контент.</p>
      <div class="time">23 августа 2026</div>
    </div>
    <!-- Раздел -->
    <div class="section">
      <h3>Последние записи</h3>
      <ul>
        <li><a href="#">Запись 1</a></li>
        <li><a href="#">Запись 2</a></li>
      </ul>
    </div>
  </div>
  <!-- Боковая панель -->
  <div class="aside">
    <h4>О блоге</h4>
    <p>Краткая информация о блоге и авторе.</p>
  </div>
  <!-- Подвал -->
  <div class="footer">
    <p>&copy; 2026 Мой блог. Все права защищены.</p>
  </div>
</body>
</html>

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

Текстовые теги

Тэг Описание
<h1></h1> - <h6></h6> Используется для заголовков разных уровней
<p></p> Параграф
<ul></ul>
<ol></ol>
<li></li>		 <ul> - маркеровочный список
<ol> - нумерованный список
<li> - элемент списка (заключается в <ul> или <ol>)
<dl></dl>
<dt></dt>
<dd></dd>		 <dl> - список определений, который включает в себя:
<dt> - термин
<dd> - определение
<span></span> Используется для стилизации текста
<em></em> Семантический тег для акцента. По умолчанию выделяет текст курсивом
<strong></strong> Семантический тег для важного значения. По умолчанию делает текст жирным
<i></i>**
<b></b>**
<u></u>		 Курсив, жирный шрифт, подчеркиание. Не являются семантическими
<q></q>
<blockquote></blockquote>		 Цитаты. Встраиваемые в текст и отдельным блоком соответственно.
Используют атрибутcite для указания источника.
<time></time> Используется для семантической разметки дат. Может собержать атрибут datetime, в котором указыватеся дата или время в машиночитаемом формате (по стандарту ISO 8601).

Пример цитаты:

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they’ll go through
      anything. You read and you’re pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>

Атрибут cite указывает на источник цитаты, а элемент <cite> - строковое представление источника.

Ссылки и навигация

HTML-элемент <a> (от anchor — «якорь»), с атрибутом href определяет гиперссылку на страницу в Интернете, файл, адрес электронной почты, определённое место на странице или на что-либо ещё, на что может указывать URL-адрес.

Виды ссылок

<a href="https://example.com/">Ссылка на сайт</a>
<a href="ftp://example.com/file.zip">Скачать файл по FTP</a
<a href="file:///C:/Users/User/Documents/file.txt">Открыть локальный файл</a>
<a href="https://site.com/file.pdf" download="Название файла">Скачать PDF</a>
<a href="">Открыть эту же страницу</a>
<a href="#Отзывы">Якорная ссылка. Ссылка на раздел на странице с id="Отзывы"</a>
<a href="docs.html#installation">Якорная ссылка на раздел на другой странице</a>
<a href="mailto:user@example.com">Написать на почту</a>>
<a href="tel:+78005553535">Позвонить</a>

Атрибут target

<a href="https://www.ru" target="_self">Открыть в этой вкладке (по умолчанию)</a>
<a href="https://google.ru" target="_blank">Открыть в новой вкладке</a>

Атрибут target с фреймами

Значения:

Атрибут rel

Атрибут rel задает отношения между старой и новой страницей и используется только в связке с target.

Значения:

<a href="https://google.com" target="_blank" rel="noopener noreferrer">Безопасная ссылка</a>

Изображения и медиа

Элемент Описание
<img> встраивает изображение в документ
<picture> служит контейнером для одного или более элементов <source> и одного элемента <img> для обеспечения оптимальной версии изображения для различных размеров экрана
<audio> используется для встраивания звукового контента в документ
<video> используется для встраивания видео контента в документ используйте

Атрибуты <img>

Картинка в той же директории:

<img src="photo.jpg" alt="Описание фото" width="300" height="200">

Картинка на другом сервере:

`<img src="https://example.com/image.jpg" alt="Описание фото" loading="lazy">`

Адаптивное изображение:

<img src="default.jpg" alt="Адаптивное изображение"
     srcset="small.jpg 320w, medium.jpg 480w, large.jpg 800w"
     sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px">

Примечание:

Атрибуты <picture>

Примеры:

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>

Атрибуты <audio>

Атрибуты <video>

Формы

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

Атрибуты <form>

Элементы внутри фрмы

Элемент Описание
<input> универсальный элемнт, вид которого определяется атрибутом type
<textarea> многострочное текстовое поле
<select> выпадающий список
<button> кнопка, вид определяется атрибутом type: submit (отправить), reset (очистить форму), button (обычная кнопка)
<label> подпись (лейбл) к элементу ввода
<fieldset> и <legend> помогают логически сгруппировать поля

Значения атрибута type в <input>

Примеры:

<form action="/submit" method="POST">
            <!-- Текстовое поле (имя) -->
            <div class="form-group">
                <label for="name">Имя *</label>
                <input type="text" id="name" name="name" placeholder="Введите ваше имя" required>
            </div>
            <!-- Поле email -->
            <div class="form-group">
                <label for="email">Email *</label>
                <input type="email" id="email" name="email" placeholder="example@mail.ru" required>
            </div>
            <!-- Поле телефон -->
            <div class="form-group">
                <label for="phone">Телефон</label>
                <input type="tel" id="phone" name="phone" placeholder="+7 (999) 123-45-67">
            </div>
            <!-- Выпадающий список (пол) -->
            <div class="form-group">
                <label for="gender">Пол</label>
                <select id="gender" name="gender">
                    <option value="">Не выбрано</option>
                    <option value="male">Мужской</option>
                    <option value="female">Женский</option>
                </select>
            </div>
            <!-- Радиокнопки (предпочтения) -->
            <div class="form-group">
                <label>Способ связи</label>
                <div class="radio-group">
                    <label><input type="radio" name="contact" value="email" checked> Email</label>
                    <label><input type="radio" name="contact" value="phone"> Телефон</label>
                    <label><input type="radio" name="contact" value="messenger"> Мессенджер</label>
                </div>
            </div>
            <!-- Чекбоксы (интересы) -->
            <div class="form-group">
                <label>Интересы</label>
                <div class="checkbox-group">
                    <label><input type="checkbox" name="interests" value="sport"> Спорт</label>
                    <label><input type="checkbox" name="interests" value="music"> Музыка</label>
                    <label><input type="checkbox" name="interests" value="books"> Книги</label>
                </div>
            </div>
            <!-- Текстовая область (комментарий) -->
            <div class="form-group">
                <label for="comment">Комментарий</label>
                <textarea id="comment" name="comment" rows="4" placeholder="Ваши пожелания..."></textarea>
            </div>
            <!-- Кнопка отправки -->
            <button type="submit">Отправить</button>
            <!-- Кнопка сброса -->
            <button type="reset" style="background: #6c757d; margin-left: 10px;">Сбросить</button>
        </form>

Примечание:

Тблицы

Тег Описание
<table> Контейнер для всей таблицы.
<tr> (table row) Строка таблицы.
<td> (table data) Ячейка с данными.
<th> (table header) Ячейка-заголовок (обычно выделяется жирным и центрируется).

Пример простой таблицы:

<table>
  <tr>
    <th>Имя</th>
    <th>Возраст</th>
  </tr>
  <tr>
    <td>Анна</td>
    <td>28</td>
  </tr>
</table>

Заголовок таблицы

Тег <caption> добавляет подпись к таблице (располагается сверху или снизу с помощью CSS).

<table>
  <caption>Список сотрудников</caption>
  ...
</table>

Структурные секции

Для улучшения семантики и удобства стилизации используют:

Порядок: <thead>, затем <tbody>, затем <tfoot> — браузер отрендерит tfoot внизу даже при прокрутке тела.

Объединение ячеек

<tr>
  <td colspan="2">Объединённая ячейка на два столбца</td>
</tr>

Пример таблицы:

<table>
  <caption>Отчёт по продажам</caption>
  <thead>
    <tr>
      <th scope="col">Месяц</th>
      <th scope="col">Выручка</th>
      <th scope="col">Прибыль</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Январь</td>
      <td>100 000</td>
      <td rowspan="2">25 000</td> <!-- объединены две строки -->
    </tr>
    <tr>
      <td>Февраль</td>
      <td>120 000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Итого</td>
      <td>50 000</td>
    </tr>
  </tfoot>
</table>

Доступность (a11y)

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

Главное правило: сначала используйте нативный HTML, затем при необходимости ARIA.

<!-- Правильно -->
<button type="button">Открыть меню</button>

<!-- role не добавляет клавиатурное поведение кнопки -->
<div role="button">Открыть меню</div>

ARIA

Атрибут Назначение
aria-label Доступное имя без видимой подписи
aria-labelledby Связь с элементом-названием
aria-describedby Связь с пояснением
aria-expanded Состояние раскрытого блока
aria-controls Управляемый элемент
aria-current="page" Текущая страница
aria-invalid="true" Ошибочное значение
aria-live Объявление динамических изменений
aria-hidden="true" Скрытие декоративного элемента от скринридера 
<button type="button" aria-expanded="false" aria-controls="menu">Меню</button>
<nav id="menu" aria-label="Основная навигация" hidden>...</nav>

JavaScript должен синхронно менять hidden и aria-expanded. Не дублируйте встроенные роли: <nav role="navigation"> избыточен.

Формы и ошибки

<label for="password">Пароль</label>
<input type="password" id="password" name="password"
       aria-describedby="password-hint" minlength="8" required>
<p id="password-hint">Минимум 8 символов.</p>

Для ошибочного поля после проверки можно установить aria-invalid="true" и связать понятное сообщение через aria-describedby. Ошибка должна объяснять способ исправления.

Клавиатура и фокус

Естественный порядок Tab определяется порядком HTML. tabindex="0" включает нестандартно фокусируемый элемент в порядок, tabindex="-1" позволяет сфокусировать его программно, но исключает из Tab. Положительные значения обычно не используют.

:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

Не удаляйте видимый фокус. Добавьте ссылку пропуска повторяющейся навигации:

<a href="#main-content">Перейти к основному содержимому</a>
<main id="main-content" tabindex="-1">...</main>

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

SEO-основы

<title>Основы HTML — структура, формы и доступность</title>
<meta name="description"
      content="Справочник по структуре, семантике, формам и доступности HTML.">
<link rel="canonical" href="https://example.com/html-guide/">

<title> должен быть содержательным и уникальным. meta description кратко описывает страницу и может попасть в поисковый сниппет. canonical указывает предпочтительный абсолютный URL для дублирующегося содержимого; это подсказка, а не перенаправление.

Open Graph

<meta property="og:type" content="article">
<meta property="og:locale" content="ru_RU">
<meta property="og:site_name" content="Веб-справочник">
<meta property="og:title" content="Основы HTML">
<meta property="og:description" content="Краткая справка по HTML.">
<meta property="og:url" content="https://example.com/html-guide/">
<meta property="og:image" content="https://example.com/images/cover.jpg">
<meta property="og:image:alt" content="Обложка справочника по HTML">

Open Graph управляет карточкой ссылки в поддерживающих его сервисах. Для og:url и og:image используйте абсолютные URL.

Favicon

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

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

Валидация и чистая семантика

Проверить документ можно в W3C Nu HTML Checker: https://validator.w3.org/nu/. Доступна проверка URL, файла или вставленного кода. Сначала исправляйте ошибки, затем предупреждения и проверяйте повторно.

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

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

<!-- Повторяющийся id — неправильно -->
<section id="news">...</section>
<section id="news">...</section>

<!-- Вложенные интерактивные элементы — неправильно -->
<a href="/catalog"><button type="button">Каталог</button></a>

<!-- Правильно: ссылка для перехода -->
<a class="button" href="/catalog">Каталог</a>

Элемент выбирают по смыслу: <button> — действие, <a> — переход, <table> — табличные данные, <blockquote> — цитата, <br> — смысловой перенос, а не отступ.

<!-- Div-суп -->
<div class="header">
  <div class="title">Новости</div>
  <div class="navigation"><div class="link">Главная</div></div>
</div>

<!-- Семантический вариант -->
<header>
  <h1>Новости</h1>
  <nav aria-label="Основная навигация"><a href="/">Главная</a></nav>
</header>

Перед добавлением <div> спросите, есть ли более точный элемент и действительно ли контейнер нужен для структуры или стилизации.

Контрольный список