Основные теги HTML: список по группам, пример страницы и частые ошибки

Чтобы собрать первую страницу, хватит двух десятков тегов. Каркас документа задают <!DOCTYPE>, <html>, <head>, <meta>, <title> и <body>. Текст размечают заголовки <h1>–<h6>, абзацы <p> и выделение <strong>. Дальше идут списки, ссылки, картинки и блоки <header>, <main>, <footer>.

Ниже основные теги HTML разложены по группам, в конце есть готовая страница и разбор ошибок, которые чаще всего находит валидатор. Если вы пока не знаете, зачем вообще нужна разметка, начните с материала что такое язык HTML и где он используется.

CheckroiПодборка курсов по HTML207 курсов • 42 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Что такое тег и чем он отличается от элемента

Тег — это слово в угловых скобках, которое говорит браузеру, что за кусок текста перед ним. Открывающий тег <p>, содержимое и закрывающий </p> вместе образуют элемент. В разговоре теги часто называют «командами HTML», но команд в языке нет: разметка ничего не выполняет, а только описывает структуру.

У тега бывают атрибуты, то есть уточнения внутри открывающей скобки: <a href="about.html">, <img src="photo.jpg" alt="…">. Имена тегов и атрибутов нечувствительны к регистру, но принято писать их строчными буквами.

Парные и пустые теги

Большинство тегов парные. Пустых, у которых нет содержимого и закрывающей пары, в спецификации ровно 13:

Слеш в конце, как в <br/> или <img />, ставить не нужно. В спецификации HTML сказано, что на пустых элементах он не нужен и ни на что не влияет. Ошибкой он тоже не считается, а валидатор выводит его как информационное сообщение.

Каркас страницы: шесть тегов, без которых не обойтись

С этого шаблона начинается любой документ. Скопируйте его в файл с расширением .html, как описано в инструкции как создать HTML-файл index.html, и откройте в браузере.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <!-- всё, что видно на странице -->
</body>
</html>

Строку <!DOCTYPE html> легко забыть, а последствия у этого заметные. По спецификации без неё браузеры переходят в другой режим отображения, несовместимый с частью стандартов. Его называют режимом совместимости (quirks mode). По описанию MDN, в нём браузер подражает нестандартному поведению Navigator 4 и Internet Explorer 5.

Проверить режим можно в консоли браузера: document.compatMode вернёт "BackCompat" в режиме совместимости и "CSS1Compat" в обычном.

Теги для текста

Заголовки и абзацы составляют основу любой статьи и страницы услуги. Вот что встречается чаще всего:

Пары <strong> и <b> браузер по умолчанию рисует одинаково, но смысл у них разный. В стандарте HTML <strong> отмечает важность, серьёзность или срочность. <b> только привлекает внимание к словам и важности не добавляет: так выделяют ключевые слова в аннотации или названия продуктов в обзоре.

Решение простое: если без выделения фраза потеряет смысл, ставьте <strong>, если это чистое оформление, лучше задать font-weight в CSS.

Списки, ссылки и картинки

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

• Списки. <ul> даёт маркированный список, <ol> нумерованный, каждый пункт оборачивается в <li>. Вложенный список ставится внутрь <li>, а не между пунктами. Подробности в статье списки в HTML.
• Ссылки. <a href="адрес">текст</a>. Внутренний адрес пишут относительно сайта, внешний целиком с https://. Как ссылки устроены в Word, Excel и HTML, разобрано в материале гиперссылка: что это и как сделать.
• Картинки. <img src="photo.jpg" alt="Описание" width="640" height="480">. Атрибут alt обязателен, если картинка несёт смысл: его читает программа экранного доступа и показывает браузер, когда файл не загрузился. Ширина и высота резервируют место, и текст не прыгает при загрузке.

У декоративной картинки alt оставляют пустым (alt=""), но не удаляют. Если атрибута нет совсем, валидатор W3C выдаёт ошибку.

Блоки и семантические теги

Чтобы разбить страницу на части, нужны контейнеры. Универсальных два: блочный <div> и строчный <span>. По стандарту ни тот ни другой ничего не означают, ими группируют содержимое для стилей и скриптов.

Для типовых частей страницы в HTML5 есть семантические теги. Выглядят они как <div>, зато поисковик и программа экранного доступа понимают, где меню, а где основной текст.

Полный список элементов с описанием на русском есть в справочнике MDN, там они разбиты по тем же группам.

Разметкой таких блоков каждый день занимается верстальщик, чем ещё он занят и сколько получает, рассказано в статье кто такой HTML-верстальщик.

Таблицы и формы

Таблица собирается из строк <tr>, в которых стоят ячейки <td>, а заголовки столбцов размечают <th>. Объединение ячеек и разметка шапки разобраны в статье таблица в HTML: теги table, tr, td и th.

Для форм нужно четыре тега:

1. <form>: контейнер, который отправляет данные.
2. <label>: подпись поля. Если она связана с полем атрибутом for, клик по подписи ставит курсор в поле.
3. <input>: поле ввода. Тип задаёт атрибут type: text, email, checkbox и другие.
4. <button>: кнопка отправки.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Страница целиком и проверка валидатором

Соберём всё вместе: шапка с меню, основной блок с заголовком, абзацем, списком и картинкой, подвал.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Моя первая страница</title>
</head>
<body>
  <header>
    <nav>
      <a href="index.html">Главная</a>
      <a href="about.html">Обо мне</a>
    </nav>
  </header>
  <main>
    <h1>Привет, это моя страница</h1>
    <p>Я учу <strong>HTML</strong> и собираю первый сайт.</p>
    <h2>Что я уже умею</h2>
    <ul>
      <li>размечать абзацы и заголовки</li>
      <li>ставить ссылки и картинки</li>
    </ul>
    <img src="photo.jpg" alt="Я за ноутбуком" width="640" height="480">
  </main>
  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>

Чтобы проверить разметку, откройте валидатор W3C, в списке Check by выберите text input, вставьте код и нажмите Check. Для этой страницы он не покажет ни одной ошибки и ни одного предупреждения. Открыть файл на компьютере или телефоне помогут инструкции как открыть HTML-файл.

Без CSS страница выглядит просто: чёрный текст на белом фоне. Цвета, шрифты и сетку добавляют стилями, способы описаны в статье как подключить CSS к HTML.

Частые ошибки новичков

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

<html>
<head>
<title>Тест</title>
</head>
<body>
<center>Заголовок</center>
<font color="red">Текст</font>
<p>Абзац <div>блок</div></p>
<img src="photo.jpg">
<br/>
</body>
</html>

Почему div внутри абзаца ломает вёрстку

Абзац может содержать только строчное содержимое: текст, ссылки, <strong>, <span>. Когда браузер встречает <div>, он закрывает абзац раньше, чем вы задумали. Код

<p>Абзац <div>блок</div></p>

браузер превращает в три соседних элемента:

<p>Абзац </p><div>блок</div><p></p>

В итоге появляется лишний пустой абзац, а стили, заданные для p, на блок не действуют. Увидеть это можно в инструментах разработчика (клавиша F12) на вкладке с деревом элементов: там показан результат разбора, а не исходный код.

Устаревшие теги

Кроме <center> и <font> в старых учебниках встречаются <marquee>, <big> и <frame>. В разделе спецификации об устаревших возможностях они названы полностью устаревшими, и авторам страниц использовать их нельзя. Вместо них стандарт предлагает подходящие элементы или CSS, а для <frame> есть замена <iframe>.

Браузеры по-прежнему показывают такие теги ради старых сайтов, но учить их незачем.

Где освоить HTML системно

Двадцати тегов хватит, чтобы собрать страницу-визитку. Адаптивная вёрстка, формы с проверкой ввода и доступность уже требуют практики с наставником и проверкой домашних заданий. Если хотите сделать из этого профессию, посмотрите как стать фронтенд-разработчиком, а ниже собраны курсы по HTML и CSS с ценами и отзывами учеников.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	29 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям29 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по HTML