Теги HTML: основные теги страницы с примерами

Открываешь «Просмотреть код страницы» — и видишь сотни строк в угловых скобках. Пугаться не нужно: почти любая страница собрана из пары десятков тегов, и самые нужные из них разобраны ниже.

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

Из чего состоит тег: открывающий, закрывающий и атрибуты

Возьмём ссылку:

<a href="/about">О нас</a>

Здесь <a href="/about"> — открывающий тег, </a> — закрывающий: он повторяет имя тега после косой черты. Между ними лежит содержимое, текст «О нас». Внутри открывающего тега стоит атрибут: имя href и значение "/about", адрес, куда ведёт ссылка. Атрибутов у тега может быть несколько, их разделяют пробелами.

Некоторым тегам нечего оборачивать, и закрывать их не нужно. Это пустые элементы: <img> вставляет картинку, <br> переносит строку, <input> рисует поле ввода, <meta> и <link> сообщают браузеру сведения о странице. Запись <img /> с косой чертой тоже допустима, но браузеру она ничего не добавляет.

Имена тегов браузер читает без учёта регистра: <P> и <p> — один и тот же тег. Принято писать строчными буквами, так выглядят почти все современные страницы.

Каркас HTML-страницы: doctype, html, head и body

У любой страницы один и тот же скелет. Ниже он целиком, вместе с шапкой, основным текстом и подвалом небольшой кофейни. Открой пример в песочнице HTML/CSS ссылкой под вторым блоком: разметка попадёт во вкладку index.html, стили — в styles.css.

HTML — вся страница от первой строки до последней:

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Кофейня «Зерно»</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <p class="logo">Зерно</p>
      <nav>
        <ul>
          <li><a href="#menu">Меню</a></li>
          <li><a href="#route">Как дойти</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Кофейня у метро</h1>
      <p>Варим кофе с <strong>семи утра</strong>, по выходным — с девяти.</p>
      <img src="coffee.jpg" alt="Чашка капучино на деревянном столе" width="320" height="200">
      <h2 id="menu">Меню</h2>
      <ul>
        <li>Эспрессо</li>
        <li>Капучино</li>
        <li>Какао с корицей</li>
      </ul>
      <h2 id="route">Как дойти</h2>
      <ol>
        <li>Выйди из метро к торговому центру.</li>
        <li>Поверни направо и пройди двести метров.</li>
        <li>Ищи вывеску с зерном над дверью.</li>
      </ol>
    </main>
    <footer>
      <p>Кофейня «Зерно» · открыто каждый день</p>
    </footer>
  </body>
</html>

CSS — немного оформления, чтобы шапка встала в строку:

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #2b211b;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #3b2a20;
  color: #fff8ef;
}

.logo {
  margin: 0;
  font-weight: 700;
}

nav ul {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav a {
  color: inherit;
}

main {
  max-width: 40rem;
  padding: 0 1rem 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  padding: 1rem;
  border-top: 1px solid #e3d6c8;
  color: #6b5b4e;
}

Разберём каркас сверху вниз.

doctype. Первая строка <!doctype html> сообщает браузеру, что перед ним современный HTML. Без неё страница откроется в режиме совместимости со старыми сайтами, и часть стилей поведёт себя иначе.

html. Корень документа, в нём лежит всё остальное. Атрибут lang="ru" говорит, на каком языке текст: по нему программа чтения с экрана выбирает произношение, а браузер — правила переноса слов.

head. Служебная часть, на самой странице её не видно. <meta charset="utf-8"> задаёт кодировку: без неё кириллица может превратиться в набор непонятных символов. Ставь эту строку первой в <head>, браузер ищет кодировку в самом начале файла. <meta name="viewport"> подгоняет страницу под ширину телефона, <title> — название во вкладке браузера и обычно заголовок страницы в поиске, <link> подключает файл стилей.

body. Всё, что видно: шапка, текст, картинки и подвал.

Порядок здесь не выбирают: <!doctype html> — первой строкой, внутри <html> сначала <head>, потом <body>. Вложенные теги закрываются в обратном порядке: <p><strong>…</strong></p>, а не <p><strong>…</p></strong>.

Заголовки h1–h6: уровни, а не размеры

Шесть тегов заголовков, от <h1> до <h6>, задают уровни, как пункты оглавления. <h1> называет всю страницу, <h2> — её разделы, <h3> — части внутри разделов:

<h1>Кофейня у метро</h1>
<h2>Меню</h2>
<h3>Горячие напитки</h3>
<h3>Десерты</h3>
<h2>Как дойти</h2>

Один h1 на страницу. Стандарт разрешает несколько, но обычно <h1> один: он называет страницу так же, как <title>, только на самой странице.

Уровни не пропускают. После <h2> идёт <h3>, а не <h4>. По заголовкам программы чтения с экрана строят оглавление, и пропущенный уровень выглядит в нём как потерянный раздел.

Размер задаёт CSS. Нужен заголовок помельче — не бери <h5> ради размера. Оставь правильный уровень и поменяй font-size в стилях.

Текст, ссылки, картинки и списки

Абзацы и выделение. <p> — абзац. <strong> отмечает важное, браузер покажет его жирным. <em> — смысловое ударение, по умолчанию курсив. У <b> и <i> вид тот же, но значения «важно» у них нет: это жирный текст и курсив без дополнительного смысла. <br> переносит строку внутри абзаца, например в адресе или стихах. Отступы между блоками делай стилями, а не цепочкой <br>.

Ссылки. <a href="…"> ведёт на другую страницу (href="/about"), на раздел этой же (href="#menu" — к элементу с id="menu") или открывает почту (href="mailto:…"). Атрибут target="_blank" открывает ссылку в новой вкладке. В шапке примера ссылки «Меню» и «Как дойти» как раз прокручивают страницу к своим разделам.

Картинки. <img src="…" alt="…"> — пустой элемент. В src пишут адрес файла, в alt — текст вместо картинки: его прочитает программа чтения с экрана и покажет браузер, если файл не загрузился. В примере файла coffee.jpg нет, поэтому в песочнице на месте картинки видно как раз этот текст. У картинки-украшения без смысла alt оставляют пустым: alt="". Атрибуты width и height заранее держат место под картинку, и текст не прыгает, когда она догрузится.

Списки. <ul> — маркированный список, <ol> — нумерованный, где важен порядок. Пункты обоих — <li>. Прямо внутри <ul> и <ol> лежат только <li>, а уже в пункт можно положить что угодно, даже вложенный список. Меню сайта тоже обычно список: так устроена навигация в шапке примера.

Семантические теги: header, nav, main, article, footer

Сверстать страницу можно из одних <div>. Это блок без смысла, просто коробка для группировки и стилей; его строчный собрат — <span>. Но по <div> браузер, поисковик и программа чтения с экрана не поймут, где шапка, а где главное. Для этого есть семантические теги: по виду такие же блоки, только у каждого есть роль.

Программы чтения с экрана умеют прыгать между этими областями, а поисковику проще отделить основной текст от меню и подвала. Если ни одна роль блоку не подходит, <div> — правильный выбор.

Таблица основных тегов HTML

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

Три правки, чтобы закрепить

Открой каркас кофейни в песочнице и перед каждой правкой предскажи результат:

1. Поменяй <h2 id="menu"> на <h4 id="menu">. Заголовок станет мельче, а оглавление страницы сломается: после <h1> сразу четвёртый уровень. Верни <h2> и уменьши заголовок через font-size в styles.css.
2. Замени <ol> в разделе «Как дойти» на <ul>. Номера пропадут, а вместе с ними и смысл: шаги маршрута идут по порядку, поэтому здесь нужен нумерованный список.
3. Сотри у картинки атрибут alt. На месте картинки останется только значок незагруженного файла, без подписи. Программа чтения с экрана в таком случае назовёт разве что имя файла, а coffee.jpg ничего не говорит о том, что на снимке.

Когда каркас станет привычным, переходи к раскладке. Flexbox выстраивает элементы шапки в строку, а CSS Grid собирает карточки в сетку. Задания на разметку с автопроверкой ждут в тренажёре HTML и CSS.