В 2024 году набор основных HTML-тегов, которые должен знать каждый верстальщик, остается во многом похожим на предыдущие годы, поскольку они формируют каркас любой веб-страницы и обеспечивают её структуру и семантику. Вот основные теги и их назначение:
Структурные и семантические теги
<!DOCTYPE html>— указывает тип документа и версию HTML.<html>— корневой элемент, который обрамляет всю HTML-страницу.<head>— содержит метаинформацию о документе, такую как кодировка, заголовок страницы, ссылки на стили и скрипты.<title>— определяет заголовок веб-страницы, отображаемый в заголовке вкладки браузера.<meta>— используется для задания кодировки документа, а также для определения метаданных, таких как автор документа, описание страницы и ключевые слова для поисковых систем.<body>— содержит все содержимое страницы, видимое пользователю.<header>,<footer>— определяют шапку и подвал документа или раздела.<nav>— предназначен для размещения навигационных ссылок.<main>— представляет основное содержимое документа.<section>— определяет раздел документа, обычно с заголовком.<article>— предназначен для размещения независимого содержимого, например, статьи или блога.<aside>— для контента, слабо связанного с основным содержимым страницы.
Текстовые и форматирующие теги
<h1>–<h6>— заголовки разных уровней.<p>— абзац текста.<br>— перенос строки.<hr>— горизонтальная линия, разделитель.<strong>и<b>— выделение текста жирным.<em>и<i>— выделение текста курсивом.<u>— подчеркивание текста.<mark>— выделение текста маркером.<small>— уменьшение размера текста.<blockquote>— блок цитаты.<q>— встроенная цитата.<pre>— предварительно форматированный текст.<code>— фрагмент программного кода.
Ссылки и изображения
<a>— определяет гиперссылку, позволяющую переходить от одного документа к другому. Атрибутhrefуказывает на URL, на который следует перейти.<img>— встраивает изображение в документ. Атрибутыsrc(путь к изображению) иalt(альтернативный текст) являются ключевыми для этого элемента.
Списки
<ul>— неупорядоченный список (с маркерами).<ol>— упорядоченный список (нумерованный).<li>— элемент списка, используется внутри<ul>или<ol>.
Таблицы
<table>— определяет таблицу.<tr>— строка таблицы.<th>— ячейка таблицы, предназначенная для заголовка (по умолчанию отображается жирным шрифтом и выравнивается по центру).<td>— стандартная ячейка таблицы.
Формы и элементы ввода
<form>— определяет форму для сбора пользовательских данных. Атрибутыaction(куда отправляются данные формы) иmethod(как отправляются данные, например, GET или POST) контролируют поведение формы.<input>— поле для ввода данных пользователем. Атрибутtypeопределяет вид поля (текст, пароль, чекбокс и т.д.).<textarea>— многострочное текстовое поле для ввода.<button>— кнопка, по умолчанию отправляет данные формы на сервер.<select>и<option>— создают выпадающий список выбора.
Семантические теги HTML5
<figure>и<figcaption>— для встраивания иллюстраций или графиков с подписями.<details>и<summary>— создают виджет, который позволяет скрывать и отображать дополнительную информацию.<mark>— выделяет текст, который имеет важное значение.
Мультимедиа
<audio>и<video>— для встраивания звуковых и видеофайлов соответственно. Атрибуты какcontrolsпозволяют отобразить управляющие элементы воспроизведения.
Это лишь основные элементы, но они формируют каркас для большинства веб-страниц. Владение этим набором тегов и понимание их применения позволяет верстальщикам создавать структурно и семантически правильные веб-документы, адаптированные под разнообразные потребности пользователей и требования поисковых систем.
