Содержание
Самые популярные теги HTML — это структурные элементы, которые используются практически на каждой веб-странице: <html>, <head>, <body>, <div>, <p>, <a>, <img>, заголовки <h1>-<h6>, списки <ul>, <ol>, <li>, а также семантические теги <header>, <nav>, <main>, <footer>. Эти теги составляют фундамент вёрстки — без них не обходится ни один сайт в интернете, от простого блога до сложного веб-приложения.
Базовые теги — скелет любого документа
Каждый HTML-документ начинается с определённой структуры, которая сообщает браузеру, как интерпретировать содержимое.
<!DOCTYPE html>— не совсем тег, а объявление типа документа. Оно сообщает браузеру, что используется современный стандарт HTML5. Должно быть самой первой строкой.<html>— корневой элемент, который оборачивает всё содержимое страницы. Браузер понимает, что внутри начинается HTML-документ.<head>— контейнер для мета-информации: заголовок страницы (отображается во вкладке), подключение CSS и JS, мета-теги для SEO и соцсетей. Содержимое<head>не видно на самой странице.<body>— здесь находится всё видимое содержимое страницы: текст, картинки, кнопки, формы. То, что видит пользователь.<title>— задаёт заголовок вкладки браузера и используется поисковыми системами как основной заголовок сниппета. Критически важен для SEO.
Группировка контента: универсальный div и его друзья
Эти теги отвечают за структуру и расположение блоков на странице.
<div> — универсальный кирпичик
Самый популярный тег в современной вёрстке. <div> не имеет собственного смыслового значения — это просто блок, который используется для группировки других элементов и применения к ним CSS-стилей. Почти каждый элемент на сложном сайте обёрнут в несколько вложенных div.
Семантические блоки (замена вездесущим div)
В HTML5 появились теги, которые несут смысловую нагрузку (семантику) и улучшают доступность и SEO:
<header>— шапка сайта (логотип, навигация).<footer>— подвал (контакты, копирайт).<main>— уникальное содержимое страницы (не повторяющееся на других страницах). Должен быть только один на странице.<section>— логический раздел (например, «Наши услуги», «О компании»).<article>— самостоятельная единица контента (новость, пост блога).<aside>— боковая панель или дополнительный материал (виджеты, цитаты).<nav>— блок навигационных ссылок (меню).
Текстовые теги — форматирование и заголовки
Без них не обходится ни одна страница с текстом.
Заголовки (от <h1> до <h6>)
Иерархия заголовков — основа SEO и читаемости.
<h1>— главный заголовок страницы (один на странице). Поисковые системы придают ему наибольший вес.<h2>— подзаголовки разделов.<h3>— подпункты внутри<h2>.<h4>,<h5>,<h6>— редко используются, но нужны для глубокой вложенности.
Абзацы, ссылки, изображения и списки
| Тег | Название | Назначение | Пример использования | |
|---|---|---|---|---|
<p> |
Абзац (paragraph) | Оборачивает текстовый блок, автоматически добавляя отступы сверху и снизу. | <p>Это обычный текст.</p> |
|
<a> |
Ссылка (anchor) | Создаёт гиперссылку на другую страницу, раздел или файл. Обязательный атрибут href. |
<a href="https://example.com">Текст ссылки</a> |
|
<img> |
Изображение (image) | Вставляет картинку. Самозакрывающийся тег. Атрибуты: src (путь к файлу), alt (альтернативный текст для SEO и скринридеров). |
<img src="/photo.jpg" alt="Описание фото"> |
|
<ul>, <li> |
Маркированный список и его элемент | Создаёт список с маркерами. Каждый пункт — <li>. |
<ul><li>Пункт 1</li><li>Пункт 2</li></ul> |
|
<ol>, <li> |
Нумерованный список и его элемент | Создаёт список с цифрами (1, 2, 3). | <ol><li>Первый</li><li>Второй</li></ol> |
Таблицы и формы — сбор данных и представление информации
Теги таблиц
Хотя раньше таблицы использовали для вёрстки, теперь их применяют по прямому назначению — для отображения структурированных данных.
<table>— контейнер для таблицы.<tr>— table row, строка таблицы.<td>— table data, ячейка данных.<th>— table header, заглавная ячейка (обычно жирный шрифт и центрирование).<thead>,<tbody>,<tfoot>— смысловые блоки для головы, тела и подвала таблицы.
Теги форм (взаимодействие с пользователем)
Формы — это способ отправить данные на сервер (обратная связь, регистрация, заказ).
<form>— обёртка для всей формы.<input>— самое популярное поле. Типы: text (текст), email (почта), password (пароль), checkbox (флажок), radio (переключатель), submit (кнопка отправки).<label>— текстовое описание к полю (повышает кликабельность и доступность).<textarea>— многострочное поле ввода (например, для сообщения).<select>+<option>— выпадающий список.<button>— кнопка (может быть не только в форме).
Мультимедиа и современные возможности
В HTML5 появились нативные теги для видео и аудио, что позволило отказаться от Flash.
<video>— вставка видеофайла (MP4, WebM). Атрибуты: controls (панель управления), autoplay, loop, poster (превью).<audio>— вставка аудио (MP3, OGG).<canvas>— рисование 2D-графики и анимации через JavaScript (игры, графики).<svg>— вставка масштабируемой векторной графики прямо в HTML (иконки, логотипы).
Несколько советов от эксперта по использованию популярных тегов
Семантическая вёрстка: почему это важно
Используйте семантические теги (<header>, <nav>, <main>, <footer>) вместо повсеместных <div>. Это даёт четыре преимущества:
- SEO: поисковые роботы лучше понимают структуру страницы.
- Доступность (a11y): скринридеры помогают незрячим пользователям навигировать по сайту.
- Читаемость кода: другой разработчик сразу поймёт, где шапка, а где основной контент.
- Будущее: HTML постоянно эволюционирует, и семантические теги — это стандарт, который не устареет.
Распространённые ошибки с популярными тегами
- Несколько
<h1>на странице: путает поисковики. Оставьте один главный заголовок. - Пропущенный атрибут alt у
<img>: ухудшает SEO и доступность. Всегда пишите осмысленный alt. - Вложение блочных элементов в строчные: например, нельзя положить
<div>внутрь<a>(хотя в HTML5 это стало допускаться, но с осторожностью). - Кнопка отправки формы без
<input type="submit">или<button type="submit">: форма не отправится.
Сравнение с альтернативами
Если вы используете CMS, например Joomla, вам не обязательно писать HTML вручную — система генерирует его сама. Но для тонкой настройки шаблонов знание популярных тегов необходимо. Конструкторы вроде SitePro.by позволяют избежать работы с кодом вообще, но вы всё равно столкнётесь с блоками, которые соответствуют тем же <div> и <section>.
Знание этих 15-20 популярных тегов покрывает 90% повседневной вёрстки. Остальное — это редкие или специфические теги, которые можно подсмотреть в документации по мере необходимости.
