СПРАВОЧНИК

HTML-теги

Справочник элементов HTML

Полный справочник основных HTML-тегов с назначением, ключевыми атрибутами и рабочими примерами разметки. Теги сгруппированы по разделам: структура документа, текст и заголовки, списки, ссылки и медиа, таблицы, формы, семантика HTML5 и встраивание.

Встраивание 4

<canvas></canvas>Холст для рисования графики через JavaScript.

<iframe src="..."></iframe>Встраивание другой страницы внутрь текущей.

<svg>...</svg>Векторная графика прямо в разметке.

<template>...</template>Скрытый шаблон разметки для клонирования через JavaScript.

Семантика HTML5 12

<address>...</address>Контактная информация автора или владельца документа.

<article>...</article>Самостоятельный блок контента: статья, пост, карточка.

<aside>...</aside>Второстепенное содержимое: сайдбар, врезка, реклама.

<details>...</details>Раскрывающийся блок с дополнительной информацией.

<dialog>...</dialog>Диалоговое окно или модальное всплывающее окно.

<footer>...</footer>Подвал страницы или раздела: копирайт, ссылки, контакты.

<header>...</header>Шапка страницы или раздела: логотип, навигация, заголовок.

<main>...</main>Основное уникальное содержимое страницы.

<nav>...</nav>Блок основной навигации по сайту.

<section>...</section>Тематический раздел страницы с заголовком.

<summary>текст</summary>Видимый заголовок раскрывающегося блока details.

<time datetime="...">текст</time>Дата или время в машиночитаемом формате.

Списки 6

<dd>описание</dd>Описание термина в списке определений.

<dl>...</dl>Список определений: пары «термин — описание».

<dt>термин</dt>Термин в списке определений.

<li>пункт</li>Элемент (пункт) списка ul или ol.

<ol>...</ol>Нумерованный (упорядоченный) список.

<ul>...</ul>Маркированный (неупорядоченный) список.

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

<a href="...">текст</a>Гиперссылка на другую страницу, файл или место на странице.

<audio src="..." controls></audio>Встраивание аудиозаписи с панелью управления.

<figcaption>подпись</figcaption>Подпись к содержимому figure.

<figure>...</figure>Самостоятельная иллюстрация с возможной подписью.

<img src="..." alt="...">Вставка изображения на страницу.

<picture>...</picture>Адаптивные изображения: разные файлы под разные условия.

<source src="..." type="...">Альтернативный медиа-источник для audio, video, picture.

<video src="..." controls></video>Встраивание видеозаписи с панелью управления.

Структура документа 8

<body>...</body>Видимое содержимое страницы: текст, изображения, ссылки и прочее.

<head>...</head>Контейнер метаданных документа: заголовок, кодировка, стили, скрипты.

<html lang="ru">...</html>Корневой элемент страницы, контейнер для всего документа.

<link rel="stylesheet" href="...">Подключение внешних ресурсов: стилей, иконок, шрифтов.

<meta name="..." content="...">Метаданные страницы: кодировка, описание, viewport.

<script src="..."></script>Подключение или встраивание JavaScript-кода.

<style>...</style>Встраивание CSS-стилей прямо в документ.

<title>Текст</title>Заголовок страницы во вкладке браузера и в результатах поиска.

Таблицы 9

<caption>название</caption>Заголовок (название) таблицы.

<colgroup>...</colgroup>Группа столбцов таблицы для общего оформления.

<table>...</table>Таблица — контейнер для строк и ячеек с данными.

<tbody>...</tbody>Группа основных строк с данными таблицы.

<td>данные</td>Обычная ячейка таблицы с данными.

<tfoot>...</tfoot>Группа строк-итогов в подвале таблицы.

<thead>...</thead>Группа строк-заголовков таблицы.

<th>заголовок</th>Заголовочная ячейка таблицы (жирная, по центру).

<tr>...</tr>Строка таблицы — контейнер для ячеек.

Текст и заголовки 18

<b>текст</b>Визуально жирный текст без дополнительной смысловой важности.

<blockquote>...</blockquote>Блочная цитата с отступом, обычно из внешнего источника.

<br>Перенос строки внутри текста без создания нового абзаца.

<code>текст</code>Фрагмент программного кода моноширинным шрифтом.

<div>...</div>Блочный контейнер общего назначения для группировки элементов.

<em>акцент</em>Смысловой акцент в тексте (обычно курсивом).

<h1>Заголовок</h1>Заголовки шести уровней — от h1 (главный) до h6 (мелкий).

<hr>Горизонтальная линия — тематический разделитель содержимого.

<i>текст</i>Курсивный текст для терминов, названий, иностранных слов.

<mark>текст</mark>Выделение текста маркером (подсветка фоном).

<p>Текст абзаца.</p>Абзац текста — базовый блок для оформления контента.

<pre>...</pre>Текст с сохранением пробелов и переносов как в исходнике.

<small>текст</small>Мелкий текст для примечаний, оговорок, копирайтов.

<span>текст</span>Строчный контейнер без собственного оформления — для стилей и скриптов.

<strong>важно</strong>Выделение текста с повышенной важностью (обычно жирным).

<sub>текст</sub>Подстрочный текст — для химических формул и индексов.

<sup>текст</sup>Надстрочный текст — для степеней и сносок.

<u>текст</u>Подчёркнутый текст (например, для пометки опечаток).

Формы 11

<button>текст</button>Кнопка — отправка формы, сброс или произвольное действие.

<datalist>...</datalist>Список подсказок-автодополнений для поля ввода.

<fieldset>...</fieldset>Группировка связанных полей формы с рамкой.

<form action="..." method="post">...</form>Форма для сбора и отправки данных пользователя.

<input type="..." name="...">Поле ввода: текст, число, чекбокс, кнопка и др.

<label for="...">текст</label>Подпись к полю формы, связанная с ним.

<legend>заголовок</legend>Заголовок группы полей fieldset.

<optgroup label="...">...</optgroup>Группировка вариантов внутри select.

<option value="...">текст</option>Вариант выбора в списке select или datalist.

<select>...</select>Выпадающий список вариантов.

<textarea>...</textarea>Многострочное текстовое поле ввода.

Поддержать проект