HTML-теги: что это, какие бывают и как правильно использовать

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

Для начинающего это различие не критично, но важно понимать современную модель: одни элементы содержат текст или другие элементы, другие являются void-элементами без содержимого, а выбор семантического тега должен зависеть от назначения блока, а не от того, как он выглядит по умолчанию.

Из чего состоит HTML-элемент

Большинство элементов имеют открывающий тег, содержимое и закрывающий тег. Например:

Наглядный пример. Здесь несколько распространённых HTML-тегов работают вместе в небольшом фрагменте страницы.

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

<p>Обычный абзац текста.</p>

Внутри открывающего тега могут находиться атрибуты:

<a href="https://example.com" class="external-link">
  Пример ссылки
</a>

Здесь href задаёт адрес ссылки, а class позволяет обратиться к элементу из CSS или JavaScript. Атрибуты не следует придумывать произвольно: у HTML есть глобальные атрибуты и атрибуты, разрешённые конкретным элементам.

Парные и void-элементы

Условное деление на «парные» и «одиночные» теги удобно для обучения, но современная терминология точнее говорит об обычных и void-элементах. Void-элемент не может содержать дочерние узлы и не должен иметь закрывающий тег.

К распространённым void-элементам относятся:

• <img> — изображение;
• <br> — перенос строки;
• <hr> — тематический разрыв;
• <input> — поле формы;
• <meta> — метаданные документа;
• <link> — связь документа с внешним ресурсом.

Запись <br /> или <img ... /> встречается часто и допустима как синтаксический стиль, но слэш не превращает элемент в «самозакрывающийся» в XML-смысле и в обычном HTML не нужен.

Семантические элементы структуры

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

Часто встречаются следующие элементы:

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

Семантический элемент не выбирают из-за внешнего вида: браузерные стили можно полностью изменить CSS. Например, section не является универсальной заменой каждому div, если у блока нет собственного смыслового раздела.

Текстовые элементы и заголовки.

Для текста используются p, заголовки h1–h6, ссылки a, элементы важности strong, смыслового акцента em, цитаты, код и другие элементы.

Уровни заголовков формируют структуру документа. H1 обычно обозначает главный заголовок страницы, H2 — крупные разделы, H3 — подразделы внутри H2. Не стоит выбирать H3 вместо H2 только потому, что он меньше: размер задаётся CSS, а уровень — логикой документа.

Правильная вложенность элементов.

Элементы должны корректно вкладываться друг в друга. Если сначала открывается p, затем strong, закрывать их нужно в обратном порядке.

<p>Это <strong>важный</strong> текст.</p>

Пересекающиеся теги заставляют браузер исправлять разметку на своё усмотрение и могут приводить к неожиданному DOM. Особенно заметно это в таблицах, списках, формах и вложенных интерактивных элементах.

Какие старые теги больше не стоит использовать

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

При модернизации старой страницы полезно придерживаться нескольких правил:

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

Поддержка браузером и корректность по современному стандарту — не одно и то же. Устаревший элемент может продолжать работать ради совместимости со старым вебом, но это не делает его хорошим выбором для нового кода.

HTML, CSS и JavaScript: разделение ролей

Упрощённо HTML задаёт структуру и смысл, CSS — внешний вид, JavaScript — поведение. Граница не всегда абсолютна, но это полезная модель для начинающего. Например, ссылка создаётся элементом a, её цвет меняется CSS, а сложная логика открытия модального окна может добавляться JavaScript.

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

Как проверить HTML.

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

Для учебной практики полезно не просто копировать готовый код, а открыть инструменты разработчика и посмотреть, какой DOM построил браузер. Это особенно наглядно, когда исходная разметка содержит ошибку и браузер автоматически её исправляет.

Атрибуты и данные для скриптов.

Помимо стандартных атрибутов вроде id, class, title и lang, в HTML существуют глобальные data-*-атрибуты. Они позволяют хранить небольшие значения, связанные с конкретным элементом, которые затем может прочитать JavaScript. Например, data-product-id="42" лучше передаёт назначение значения, чем попытка прятать служебную информацию в нестандартном атрибуте.

При этом не нужно превращать HTML в хранилище больших JSON-структур только потому, что data-* доступны. Атрибуты удобны для компактных параметров компонента, а большие наборы данных обычно лучше хранить там, где ими управляет приложение.

Класс и id решают разные задачи.

class можно повторять у множества элементов и использовать для общих CSS-правил. id должен быть уникальным в документе и часто нужен для якорной навигации, привязки label к полю формы или точного обращения из JavaScript. Привычка назначать каждому блоку случайный id не делает разметку лучше: идентификатор нужен там, где есть конкретная причина.

Итог

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

Более общий контекст разобран в статье «Что такое HTML», а практические примеры есть в материалах о списках и якорном оглавлении.