HTML

Теги HTML

Шестьдесят с лишним тегов: что делает, когда применять, как пишется.

Найдено: 101 из 101

Скелет документа

Тег Что делает Пример
<!DOCTYPE html> Объявление типа документа. Всегда первой строкой файла 
<!DOCTYPE html>
html Корень документа. Атрибут lang задаёт язык 
<html lang="ru"> … </html>
head Служебная часть: ничего из неё не видно на странице 
<head> … </head>
meta Кодировка, описание, настройки для телефонов 
<meta charset="UTF-8">
title Название страницы: вкладка, закладки, выдача поиска 
<title>Кофейня «Полка»</title>
link Подключение файла: стилей, фавикона, шрифтов 
<link rel="stylesheet" href="style.css">
style Стили прямо в документе 
<style> h1 { color: red } </style>
script Подключение или вставка скрипта 
<script src="app.js" defer></script>
body Всё содержимое страницы, видимое человеку 
<body> … </body>

Смысловые области

Тег Что делает Пример
header Шапка сайта или вводная часть блока 
<header> … </header>
nav Блок навигации: меню, оглавление, крошки 
<nav> … </nav>
main Главное содержимое. Ровно один на страницу 
<main> … </main>
section Смысловой раздел с заголовком 
<section> <h2>…</h2> </section>
article Самостоятельная единица: статья, карточка, отзыв 
<article> … </article>
aside Побочное: врезка, «читайте также» 
<aside> … </aside>
footer Подвал сайта или блока 
<footer> … </footer>
div Блок без смысла. Последнее средство, только для оформления 
<div class="wrap"> … </div>
span То же, но строчный: внутри текста 
цена <span class="rub">240</span>

Текст

Тег Что делает Пример
h1 – h6 Заголовки шести уровней. Иерархия, а не размер 
<h2>Наше меню</h2>
p Абзац 
<p>Варим кофе с 8 утра.</p>
strong Важный кусок текста. Не «жирный», а «важный» 
Работаем <strong>до полуночи</strong>
em Смысловое ударение 
Это <em>очень</em> вкусно
b Просто жирный, без смысла 
<b>Латте</b>
i Просто курсив: термин, иностранное слово 
<i>affogato</i>
mark Подсветка найденного или важного 
<mark>кофе</mark>
small Мелкий текст: сноски, оговорки 
<small>Цены указаны за 200 мл</small>
s Зачёркнутый: неактуальное 
<s>240 ₽</s> 180 ₽
br Перенос строки внутри абзаца. Одиночный 
ул. Гоголя, 12<br>второй этаж
hr Тематический разделитель. Одиночный 
<hr>
blockquote Цитата отдельным блоком 
<blockquote> … </blockquote>
q Короткая цитата внутри строки 
Он сказал <q>приходи</q>
code Кусок кода моноширинным шрифтом 
тег <code>&lt;p&gt;</code>
pre Текст с сохранением пробелов и переносов 
<pre> … </pre>
kbd Нажатие клавиши 
<kbd>Ctrl</kbd>+<kbd>S</kbd>
abbr Аббревиатура с расшифровкой 
<abbr title="Каскадные таблицы стилей">CSS</abbr>
time Дата или время в машиночитаемом виде 
<time datetime="2026-09-07">7 сентября</time>
address Контакты автора или организации 
<address> … </address>

Списки

Тег Что делает Пример
ul Маркированный список: порядок не важен 
<ul><li>Кофе</li></ul>
ol Нумерованный список: порядок важен 
<ol><li>Насыпь</li></ol>
li Пункт списка 
<li>Капучино</li>
dl Список определений 
<dl> … </dl>
dt Термин в списке определений 
<dt>Раф</dt>
dd Описание термина 
<dd>Кофе со сливками</dd>

Ссылки и медиа

Тег Что делает Пример
a Ссылка. href — куда ведёт 
<a href="/menu.html">Меню</a>
a target Открыть в новой вкладке. Обязательно с rel="noopener" 
<a href="…" target="_blank" rel="noopener">
a mailto Открыть почтовую программу 
<a href="mailto:hi@polka.ru">Написать</a>
a tel Позвонить с телефона 
<a href="tel:+79000000000">Позвонить</a>
img Картинка. alt обязателен. Одиночный тег 
<img src="cup.svg" alt="Чашка" width="60" height="60">
picture Выбор формата или кадра из нескольких 
<picture><source …><img …></picture>
figure Иллюстрация как самостоятельная единица 
<figure> … </figure>
figcaption Подпись к иллюстрации 
<figcaption>Наш раф</figcaption>
video Видео с панелью управления 
<video controls src="brew.mp4"></video>
audio Звук 
<audio controls src="jazz.mp3"></audio>
source Вариант источника внутри picture, video или audio 
<source src="cup.webp" type="image/webp">
iframe Встроенная страница: карта, видео с сервиса 
<iframe src="…" title="Карта"></iframe>
svg Векторная графика прямо в разметке 
<svg viewBox="0 0 24 24"> … </svg>
use Вставка фигуры из спрайта по id 
<svg><use href="#i-cart"/></svg>
img srcset Несколько размеров одной картинки на выбор браузеру 
<img srcset="cup-480.jpg 480w, cup-960.jpg 960w" sizes="(min-width: 700px) 50vw, 100vw" src="cup-960.jpg" alt="Чашка">
img loading lazy — грузить, когда подъедет к экрану. Не для первого экрана 
<img loading="lazy" decoding="async" …>
link preload Загрузить важный ресурс раньше очереди 
<link rel="preload" href="onest.woff2" as="font" crossorigin>

Таблицы

Тег Что делает Пример
table Таблица. Только для данных, не для вёрстки 
<table> … </table>
caption Название таблицы. Первым внутри table 
<caption>Цены на кофе</caption>
thead Шапка таблицы 
<thead><tr> … </tr></thead>
tbody Тело таблицы 
<tbody> … </tbody>
tfoot Итоговая строка 
<tfoot> … </tfoot>
tr Строка 
<tr> … </tr>
th Ячейка-заголовок. scope связывает её с данными 
<th scope="col">Напиток</th>
td Обычная ячейка 
<td>190 ₽</td>
colspan Объединить ячейки по горизонтали 
<td colspan="2">Марина</td>
rowspan Объединить по вертикали 
<td rowspan="2">Костя</td>

Формы

Тег Что делает Пример
form Форма: собирает и отправляет данные 
<form action="/send" method="post">
label Подпись поля. for совпадает с id поля 
<label for="name">Имя</label>
input Поле ввода. Поведение задаёт type 
<input type="email" id="mail" name="mail">
textarea Многострочное поле. Текст между тегами 
<textarea rows="4"></textarea>
select Выпадающий список 
<select><option>Латте</option></select>
option Пункт списка 
<option value="raf">Раф</option>
button Кнопка. type="submit" отправляет форму 
<button type="submit">Записаться</button>
fieldset Группа полей одного вопроса 
<fieldset> … </fieldset>
legend Название группы полей 
<legend>Размер стакана</legend>
required Обязательное поле. Логический атрибут 
<input type="text" required>
pattern Свой формат проверки. Пиши вместе с title 
<input pattern="[0-9]{4}" title="Четыре цифры">
placeholder Пример ввода. Не заменяет label 
<input placeholder="+7 900 000-00-00">
autocomplete Подсказывает браузеру, что подставить 
<input autocomplete="email">

Интерактив и доступность

Тег Что делает Пример
details Раскрывающийся блок без JavaScript 
<details> … </details>
summary Видимый заголовок раскрывающегося блока 
<summary>Частые вопросы</summary>
dialog Модальное окно средствами браузера 
<dialog open> … </dialog>
progress Индикатор выполнения 
<progress value="70" max="100"></progress>
aria-label Невидимая подпись для кнопок-иконок 
<button aria-label="Закрыть">×</button>
aria-hidden Скрыть декоративный элемент от голосовых программ 
<svg aria-hidden="true"> … </svg>
aria-expanded Состояние раскрывающей кнопки 
<button aria-expanded="false">Меню</button>
aria-current Текущая страница в меню 
<a href="/" aria-current="page">Главная</a>
tabindex 0 — включить в обход Tab, −1 — убрать. Положительные не используй 
<div tabindex="0"> … </div>
hidden Скрыть элемент полностью 
<p hidden>Не видно</p>
data-* Свои данные в разметке 
<button data-id="42"> … </button>
role Роль элемента, если подходящего тега нет. Тег всегда лучше 
<div role="status"> … </div>
aria-live Объявлять изменения текста вслух 
<p aria-live="polite">Товар добавлен</p>
aria-describedby Связать поле с пояснением или ошибкой 
<input aria-describedby="mail-hint">
inert Выключить целую область: ни фокуса, ни кликов 
<main inert> … </main>
output Результат вычисления формы 
<output name="total">4000 ₽</output>
datalist Подсказки к обычному полю ввода 
<input list="cities"><datalist id="cities"><option value="Москва"></datalist>
template Разметка-заготовка: не показывается до вставки скриптом 
<template id="row"> … </template>