Основные теги HTML, которые должен знать любой верстальщик : Code4Web

Содержание статьи

В 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 позволяют отобразить управляющие элементы воспроизведения.

Это лишь основные элементы, но они формируют каркас для большинства веб-страниц. Владение этим набором тегов и понимание их применения позволяет верстальщикам создавать структурно и семантически правильные веб-документы, адаптированные под разнообразные потребности пользователей и требования поисковых систем.