Шпаргалка по основным HTML-тегам

Иван Корнев·26.05.2026·⏱4 мин

HTML-теги — это строительные блоки веб-страниц. Чтобы сверстать работающий сайт, достаточно знать около 20–30 основных элементов. В этой статье собраны самые востребованные теги с примерами кода, которые покрывают 90% повседневных задач разработчика: от создания структуры документа до форм обратной связи.

Оглавление

  1. Базовая структура документа
  2. Работа с текстом и заголовками
  3. Ссылки и медиа-контент
  4. Списки и навигация
  5. Семантическая разметка
  6. Формы и ввод данных
  7. Частые ошибки
  8. FAQ

Базовая структура документа

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

Каркас страницы

  • <!DOCTYPE html> — объявление типа документа (HTML5). Должно быть первой строкой.
  • <html> — корневой элемент, внутри которого находится всё содержимое. Атрибут lang="ru" помогает браузерам и скринридерам определить язык.
  • <head> — технический блок. Здесь хранятся мета-данные, подключение стилей и скриптов. Пользователь не видит этот контент напрямую.
  • <body> — видимая часть страницы. Весь текст, картинки и кнопки размещаются здесь.
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Заголовок вкладки</title>
</head>
<body>
    <!-- Видимый контент -->
</body>
</html>

Мета-теги

Тег <meta> критически важен для SEO и адаптивности.

  • charset="UTF-8" — корректное отображение кириллицы и спецсимволов.
  • viewport — адаптация под мобильные устройства (без этого тега сайт на телефоне будет выглядеть как уменьшенная десктопная версия).

Работа с текстом и заголовками

Правильная типографика в HTML строится на иерархии. Поисковые системы используют заголовки для понимания структуры контента.

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

Используйте один <h1> на страницу (главная тема). Остальные уровни (<h2>, <h3>) вкладывайте логически, как матрешку. Не пропускайте уровни (не ставьте <h4> сразу после <h2>).

<h1>Как выбрать велосипед</h1>
<h2>Типы рам</h2>
<h3>Алюминиевые рамы</h3>
<p>Текст описания...</p>

Абзацы и форматирование

  • <p> — стандартный абзац. Браузер автоматически добавляет отступы сверху и снизу.
  • <br> — принудительный перенос строки внутри абзаца (используйте редко, только для адресов или стихов).
  • <strong> — важный текст (обычно жирный). Имеет семантический вес для SEO.
  • <em> — акцентированный текст (обычно курсив). Меняет интонацию при чтении скринридером.

Не используйте теги <b> и <i> для смыслового выделения. Они отвечают только за внешний вид (жирность/курсив), но не несут смысловой нагрузки для поисковиков и людей с ограниченными возможностями.

Ссылки и медиа-контент

Гиперссылки и изображения — основа навигации и визуальной подачи.

Ссылки <a>

Главный атрибут — href (адрес назначения).

  • Для открытия в новой вкладке добавьте target="_blank".
  • Для безопасности при открытии внешних ссылок добавьте rel="noopener noreferrer".
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
    Перейти на пример
</a>

Изображения <img>

Одиночный тег (не требует закрывающего).

  • src — путь к файлу.
  • alt — альтернативный текст. Обязателен! Если картинка не загрузится, пользователь увидит этот текст. Также он читается скринридерами.
<img src="cat.jpg" alt="Рыжий кот спит на подоконнике" width="600" height="400">

Всегда указывайте width и height для изображений. Это предотвращает сдвиг макета (CLS) при загрузке страницы, что важно для Core Web Vitals.

Группировка медиа <figure>

Если у картинки или видео есть подпись, оберните их в <figure>, а подпись поместите в <figcaption>.

<figure>
    <img src="graph.png" alt="График роста продаж">
    <figcaption>Рис. 1. Динамика выручки за 2025 год</figcaption>
</figure>

Списки и навигация

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

Виды списков

  • <ul> — маркированный список (точки). Для наборов элементов без строгого порядка.
  • <ol> — нумерованный список (цифры). Для инструкций, рейтингов, шагов.
  • <li> — элемент списка (вкладывается внутрь ul или ol).
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Навигация <nav>

Оборачивайте основные меню сайта в тег <nav>. Это помогает поисковым роботам быстро находить структуру сайта.

<nav>
    <ul>
        <li><a href="/">Главная</a></li>
        <li><a href="/about">О нас</a></li>
    </ul>
</nav>

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

Семантика заменяет бессмысленные <div> на теги, объясняющие роль блока. Это улучшает доступность и SEO.

ТегНазначениеГде использовать
<header>ШапкаЛоготип, главное меню, заголовок статьи
<main>Основное содержимоеУникальный контент страницы (один на странице)
<section>Смысловой разделГлава статьи, блок услуг, категория товаров
<article>Самостоятельный материалПост в блоге, карточка товара, комментарий
<aside>Боковая панельРеклама, рубрики, «читайте также»
<footer>ПодвалКонтакты, копирайт, ссылки на соцсети

Пример структуры лендинга:

<header>
    <nav>...</nav>
</header>

<main>
    <section>
        <h2>Наши услуги</h2>
        <article>Услуга 1</article>
        <article>Услуга 2</article>
    </section>
    
    <aside>
        <p>Акция месяца!</p>
    </aside>
</main>

<footer>
    <p>© 2026 Все права защищены</p>
</footer>

Формы и ввод данных

Формы позволяют пользователю взаимодействовать с сайтом: регистрироваться, искать товары, отправлять сообщения.

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

  • <form> — контейнер формы. Атрибут action указывает, куда отправлять данные.
  • <label> — подпись к полю. Обязательно связывайте с полем через for и id. Это увеличивает область клика и помогает скринридерам.
  • <input> — поле ввода. Тип определяется атрибутом type (text, email, password, checkbox).
  • <button> — кнопка отправки или действия.
<form action="/submit" method="POST">
    <label for="email">Ваш Email:</label>
    <input type="email" id="email" name="email" required placeholder="[email protected]">
    
    <button type="submit">Подписаться</button>
</form>

Выпадающие списки

Используйте <select> для выбора одного варианта из многих.

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

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

  1. Отсутствие alt у изображений. Это нарушение стандартов доступности и ухудшение SEO.
  2. Несколько <h1> на странице. Запутывает поисковые системы. Главный заголовок должен быть один.
  3. Использование <div> вместо семантических тегов. <div class="header"> хуже, чем просто <header>.
  4. Вложенность блочных элементов в строчные. Например, нельзя вкладывать <div> или <p> внутрь <a> или <span> (хотя HTML5 смягчил некоторые правила, лучше соблюдать логику: блочное в блочное, строчное в строчное).
  5. Забытый viewport. Сайт будет нечитаем на смартфонах.

FAQ

Нужно ли учить все HTML-теги наизусть? Нет. Достаточно помнить основные (~30 штук). Остальные можно быстро найти в справочнике (например, MDN) по мере необходимости.

Чем <section> отличается от <div>? <section> имеет семантическое значение — это тематическая группа контента, обычно с заголовком. <div> — нейтральный контейнер, используемый только для стилизации или группировки скриптов, когда нет подходящего семантического тега.

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