Основные HTML-теги: практический справочник для начинающего верстальщика

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

Тег выбирают по содержимому, а не по стандартному оформлению браузера. Внешний вид задаёт CSS, поведение — JavaScript.

Каркас 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="/assets/css/main.css"></head><body>  <header>...</header>  <main>...</main>  <footer>...</footer>  <script type="module" src="/assets/js/main.js"></script></body></html>​

• <!doctype html> включает стандартный режим отображения.
• <html lang="ru"> задаёт язык документа.
• <head> содержит метаданные, а не видимый текст страницы.
• <title> формирует название вкладки и часто используется в поисковой выдаче.
• <body> содержит то, что отображается пользователю.

Структура содержимого

Основные семантические контейнеры:

• <header> — вводная часть страницы или раздела;
• <nav> — крупная навигация;
• <main> — уникальное основное содержимое;
• <article> — самостоятельная публикация или карточка материала;
• <section> — тематический раздел с заголовком;
• <aside> — косвенно связанное дополнение;
• <footer> — завершающая информация страницы или раздела;
• <div> — нейтральная обёртка без собственной роли.

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

Заголовки и текст

<article>  <h1>Как приготовить фильтр-кофе</h1>  <p>Начните со свежего зерна и чистой воды.</p>​  <h2>Пропорции</h2>  <p>На 250 мл воды возьмите примерно 15 г кофе.</p>​  <blockquote cite="https://example.com/source">    <p>Точная пропорция зависит от зерна и способа заваривания.</p>  </blockquote></article>​

• <h1>–<h6> задают уровни заголовков;
• <p> обозначает абзац;
• <strong> подчёркивает важность, <em> — смысловое ударение;
• <blockquote> используется для развёрнутой цитаты, <q> — для короткой внутри строки;
• <code> обозначает фрагмент кода, <pre> сохраняет пробелы и переносы;
• <br> создаёт перенос строки внутри одного смыслового фрагмента, например в адресе или стихотворении. Для отступов нужен CSS.

Элементы <b> и <i> не являются просто «жирным» и «курсивом»: у них есть свои семантические случаи. В обычном учебном тексте чаще подходят <strong> и <em>.

Ссылки

<a href="/html/forms">Руководство по HTML-формам</a><a href="mailto:editor@example.com">Написать редакции</a>​

Текст ссылки должен объяснять назначение без соседнего абзаца. Формулировка «руководство по HTML-формам» полезнее, чем «нажмите здесь».

Для внешней ссылки, которую намеренно открывают в новой вкладке, сообщите об этом пользователю. Современные браузеры обычно защищают window.opener, но явное rel="noopener" остаётся понятной защитной мерой:

<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">  MDN (откроется в новой вкладке)</a>​

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

<figure>  <img    src="/images/devtools.webp"    alt="Панель Elements с выделенным заголовком h1"    width="1200"    height="675"  >  <figcaption>Проверка структуры документа в инструментах разработчика.</figcaption></figure>​

alt передаёт назначение содержательного изображения. У чисто декоративного изображения используйте пустой alt="". Размеры помогают браузеру заранее зарезервировать место и уменьшить сдвиги макета.

Списки

<ul>  <li>HTML</li>  <li>CSS</li>  <li>JavaScript</li></ul>​<ol>  <li>Создайте файл.</li>  <li>Добавьте разметку.</li>  <li>Откройте страницу в браузере.</li></ol>​

<ul> подходит, когда порядок неважен, <ol> — для последовательности или рейтинга. Непосредственными дочерними элементами обоих списков должны быть <li>.

Для пар «термин — определение» есть <dl>, <dt> и <dd>:

<dl>  <dt>DOM</dt>  <dd>Объектное представление HTML-документа.</dd></dl>​

Таблицы

Таблица предназначена для данных, а не для раскладки страницы:

<table>  <caption>Поддержка форматов изображений</caption>  <thead>    <tr>      <th scope="col">Формат</th>      <th scope="col">Прозрачность</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">JPEG</th>      <td>Нет</td>    </tr>    <tr>      <th scope="row">WebP</th>      <td>Да</td>    </tr>  </tbody></table>​

<caption> называет таблицу, а scope связывает заголовочные ячейки с данными.

Формы

<form action="/subscribe" method="post">  <label for="email">Email</label>  <input id="email" name="email" type="email" autocomplete="email" required>  <button type="submit">Подписаться</button></form>​

Для отправки значения элементу управления нужен name. Видимая подпись <label> связывается с полем через for и id. У кнопки всегда явно указывайте type, особенно внутри формы.

Для группы связанных полей используйте <fieldset> и <legend>.

Раскрывающийся блок

Нативные <details> и <summary> создают доступный раскрывающийся блок без JavaScript:

<details>  <summary>Что понадобится для урока</summary>  <p>Редактор кода и современный браузер.</p></details>​

Не стоит собирать такой контрол из кликабельных <div>: придётся самостоятельно реализовывать клавиатуру, фокус и состояния доступности.

Пустые элементы и закрывающие теги

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

Что изучать дальше

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

report Сообщить об ошибке в статье