HTML LIVING STANDARD

Все 113 HTML-элементов

Полный перечень действующих HTML-элементов WHATWG (без SVG и MathML). У каждого есть корректный пример исходного кода; где это возможно, показана живая демонстрация. Элементы метаданных отдельно не рендерятся в body. Экспериментальные возможности помечены.

113Современных элементов

9Категорий

23Тега в историческом архиве

Первоисточник WHATWG

Поиск элемента

Поиск по названию тега, русскому описанию и группе. Фильтрация без сервера.

Показано 113 из 113

HTML / 01

Документ и метаданные

10 элементов. Примеры и исходный код каждого тега.

10 тегов

<html>Документ

Корневой элемент HTML-документа

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<!doctype html>
<html lang="ru">
  <head>...</head>
  <body>...</body>
</html>

<head>Документ

Метаданные и подключения ресурсов

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<head>
  <meta charset="utf-8">
  <title>Morlix UI</title>
</head>

<body>Документ

Видимое содержимое документа

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<body>
  <main>Основное содержимое</main>
</body>

<title>Документ

Заголовок вкладки браузера

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<title>Morlix UI — Компоненты</title>

<meta>Документ

Метаинформация и параметры документа

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<meta name="description" content="Библиотека Morlix UI">

<base>Документ

Базовый адрес относительных ссылок

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<base href="https://example.test/">

<link>Документ

Подключение ресурсов и связей

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<link rel="stylesheet" href="css/system.css">

<style>Документ

CSS, встроенный в документ

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<style>
  .demo { color: #0d6efd; }
</style>

<script>Документ

Подключение и выполнение JavaScript

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<script src="js/app.js" defer></script>

<noscript>Документ

Контент при отключённом JavaScript

Работает в контексте документа, отдельного визуального представления нет.

Не визуализируется отдельно — см. корректную HTML-разметку.

<noscript>Для интерактивности включите JavaScript.</noscript>

HTML / 02

Семантика и разделы

16 элементов. Примеры и исходный код каждого тега.

16 тегов

<header>HTML

Шапка страницы или секции

Шапка продукта

<header><strong>Шапка продукта</strong></header>

<main>HTML

Основное содержимое страницы

Основное содержимое

<main><h2>Основное содержимое</h2></main>

<nav>HTML

Область навигации

<nav aria-label="Пример"><a href="#">Главная</a> · <a href="#">Разделы</a></nav>

<section>HTML

Тематический раздел

Секция

Содержимое

<section aria-label="Раздел"><h3>Секция</h3><p>Содержимое</p></section>

<article>HTML

Самостоятельная статья или публикация

Статья

Анонс статьи.

<article><h3>Статья</h3><p>Анонс статьи.</p></article>

<aside>HTML

Дополнительная боковая информация

<aside><strong>Совет</strong><p>Контекстная информация.</p></aside>

<address>HTML

Контактные сведения

Контакты: hello@example.test

<address>Контакты: hello@example.test</address>

<search>HTML

Семантическая область поиска

<search><form data-demo-form><input type="search" placeholder="Поиск..." aria-label="Поиск"><button type="submit">Найти</button></form></search>

<hgroup>HTML

Группа заголовка и подзаголовка

Заголовок

Описание заголовка

<hgroup><h3>Заголовок</h3><p>Описание заголовка</p></hgroup>

<h1>HTML

Главный заголовок

Заголовок уровня 1

<h1>Заголовок уровня 1</h1>

<h2>HTML

Заголовок второго уровня

Заголовок уровня 2

<h2>Заголовок уровня 2</h2>

<h3>HTML

Заголовок третьего уровня

Заголовок уровня 3

<h3>Заголовок уровня 3</h3>

<h4>HTML

Заголовок четвёртого уровня

Заголовок уровня 4

<h4>Заголовок уровня 4</h4>

<h5>HTML

Заголовок пятого уровня

Заголовок уровня 5

<h5>Заголовок уровня 5</h5>

<h6>HTML

Заголовок шестого уровня

Заголовок уровня 6

<h6>Заголовок уровня 6</h6>

HTML / 03

Группировка контента

14 элементов. Примеры и исходный код каждого тега.

14 тегов

<p>HTML

Абзац текста

Обычный абзац интерфейса Morlix.

<p>Обычный абзац интерфейса Morlix.</p>

<div>HTML

Нейтральный блочный контейнер

Контейнер DIV

<div class="mx-badge">Контейнер DIV</div>

<hr>HTML

Тематический разделитель

Выше

Ниже

<p>Выше</p><hr><p>Ниже</p>

<pre>HTML

Текст с сохранением пробелов

Пробелы   и
переносы строк

<pre>Пробелы   и
переносы строк</pre>

<blockquote>HTML

Развёрнутая цитата

«Единая система интерфейсов Morlix»

<blockquote>«Единая система интерфейсов Morlix»</blockquote>

<ol>HTML

Нумерованный список

Шаг первый
Шаг второй

<ol><li>Шаг первый</li><li>Шаг второй</li></ol>

<ul>HTML

Ненумерованный список

CMS
Account Center

<ul><li>CMS</li><li>Account Center</li></ul>

<li>HTML

Элемент списка

Первый элемент
Второй элемент

<ul><li>Первый элемент</li><li>Второй элемент</li></ul>

<dl>HTML

Список определений или пар термин–значение

Версия: Beta

<dl><dt>Версия</dt><dd>Beta</dd></dl>

<dt>HTML

Термин в списке определений

Термин: Описание

<dl><dt>Термин</dt><dd>Описание</dd></dl>

<dd>HTML

Описание термина

Статус: Активен

<dl><dt>Статус</dt><dd>Активен</dd></dl>

<figure>HTML

Самостоятельная иллюстрация или пример

Абстракция — Подпись

<figure><img src="assets/morlix-abstract.webp" alt="Абстракция"><figcaption>Подпись</figcaption></figure>

<figcaption>HTML

Подпись к figure

Абстракция — Иллюстрация 1

<figure><img src="assets/morlix-abstract.webp" alt="Абстракция"><figcaption>Иллюстрация 1</figcaption></figure>

HTML / 04

Текстовая семантика

31 элементов. Примеры и исходный код каждого тега.

31 тегов

<a>HTML

Гиперссылка

Текстовая ссылка

<a href="#text-elements">Текстовая ссылка</a>

<abbr>HTML

Аббревиатура и раскрытие термина

CMS

<abbr title="Content Management System">CMS</abbr>

<b>HTML

Визуальное выделение без дополнительной важности

Выделенный фрагмент

<b>Выделенный фрагмент</b>

<bdi>HTML

Изоляция направления письма

Аккаунт: مستخدم (автор)

<span>Аккаунт: <bdi>مستخدم</bdi> (автор)</span>

<bdo>HTML

Явное направление текста

Morlix CMS

<bdo dir="rtl">Morlix CMS</bdo>

<br>HTML

Перенос строки

Первая строка
Вторая строка

<span>Первая строка<br>Вторая строка</span>

<cite>HTML

Название произведения или публикации

HTML Living Standard

<cite>HTML Living Standard</cite>

<code>HTML

Фрагмент компьютерного кода

document.querySelector(".mx-btn")

<code>document.querySelector(".mx-btn")</code>

<data>HTML

Человекочитаемое значение с машинным эквивалентом

Morlix CMS

<data value="product-42">Morlix CMS</data>

<dfn>HTML

Определяемый термин

Компонент — повторно используемый элемент.

<p><dfn>Компонент</dfn> — повторно используемый элемент.</p>

<em>HTML

Логическое акцентирование

Акцентированный фрагмент

<em>Акцентированный фрагмент</em>

<i>HTML

Альтернативный голос или термин

Термин в альтернативной форме

<i>Термин в альтернативной форме</i>

<kbd>HTML

Клавиша или пользовательский ввод

Ctrl + S

<kbd>Ctrl</kbd> + <kbd>S</kbd>

<mark>HTML

Подсветка участка текста

Найденный фрагмент

<mark>Найденный фрагмент</mark>

<q>HTML

Короткая встроенная цитата

Короткая цитата

<q>Короткая цитата</q>

<ruby>HTML

Аннотация произношения

漢(kan)

<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>

<rp>HTML

Скобки для ruby при отсутствии поддержки

字(ji)

<ruby>字<rp>(</rp><rt>ji</rt><rp>)</rp></ruby>

<rt>HTML

Текст аннотации ruby

字ji

<ruby>字<rt>ji</rt></ruby>

<s>HTML

Неактуальный или неточный текст

~~Старая версия~~ Новая версия

<s>Старая версия</s> Новая версия

<samp>HTML

Пример вывода программы

HTTP 200 OK

<samp>HTTP 200 OK</samp>

<small>HTML

Мелкий вспомогательный текст

Дополнительная информация

<small>Дополнительная информация</small>

<span>HTML

Нейтральный строчный контейнер

Строчный фрагмент

<span style="color:#135cbc">Строчный фрагмент</span>

<strong>HTML

Высокая значимость

Важная информация

<strong>Важная информация</strong>

<sub>HTML

Нижний индекс

H₂O

H<sub>2</sub>O

<sup>HTML

Верхний индекс

10³

10<sup>3</sup>

<time>HTML

Дата или время с machine-readable значением

1 ноября 2026

<time datetime="2026-11-01">1 ноября 2026</time>

<u>HTML

Невербальная аннотация (подчёркивание)

Подчёркнутая аннотация

<u>Подчёркнутая аннотация</u>

<var>HTML

Переменная или параметр

x = 42

<var>x</var> = 42

<wbr>HTML

Допустимое место переноса строки

morlix–verylongdomain–example.test

<span>morlix–verylongdomain<wbr>–example.test</span>

<ins>HTML

Вставка в документ

Добавленный текст

<ins datetime="2026-11-01">Добавленный текст</ins>

<del>HTML

Удаление из документа

~~Удалённый текст~~

<del datetime="2026-10-01">Удалённый текст</del>

HTML / 05

Медиа и графика

12 элементов. Примеры и исходный код каждого тега.

12 тегов

<img>HTML

Изображение

Абстрактная композиция

<img src="assets/morlix-abstract.webp" alt="Абстрактная композиция">

<picture>HTML

Адаптивный выбор изображения

Медиа

<picture><source srcset="assets/morlix-abstract.webp" type="image/webp"><img src="assets/morlix-abstract.webp" alt="Медиа"></picture>

<source>HTML

Источник изображения, аудио или видео

Резервный источник

<picture><source srcset="assets/morlix-abstract.webp" type="image/webp"><img src="assets/morlix-abstract.webp" alt="Резервный источник"></picture>

<audio>HTML

Встроенный аудиоплеер

<audio controls preload="none"><source src="assets/sample-tone.mp3" type="audio/mpeg"></audio>

<video>HTML

Встроенный видеоплеер

<video controls playsinline preload="metadata" poster="assets/morlix-abstract.webp"><source src="assets/sample-video.mp4" type="video/mp4"></video>

<track>HTML

Субтитры или текстовая дорожка

<video controls playsinline preload="metadata" poster="assets/morlix-abstract.webp"><source src="assets/sample-video.mp4" type="video/mp4"><track kind="captions" src="assets/sample.vtt" srclang="ru" label="Русский" default></video>

<iframe>HTML

Вложенный документ

<iframe title="Встроенная страница" sandbox="" srcdoc="<p style='font:14px Arial;padding:8px'>Встроенный документ</p>" width="270" height="100"></iframe>

<embed>HTML

Встраивание внешнего ресурса

<embed src="assets/morlix-abstract.webp" type="image/webp" width="220" height="123">

<object>HTML

Внешний объект или документ

<object data="assets/morlix-abstract.webp" type="image/webp" width="220" height="124">Ресурс недоступен.</object>

<map>HTML

Карта кликабельных областей изображения

Карта областей

<img src="assets/morlix-abstract.webp" width="280" height="158" usemap="#demo-map" alt="Карта областей"><map name="demo-map"><area shape="rect" coords="0,0,140,158" href="#media-elements" alt="Левая половина"></map>

<area>HTML

Интерактивная область карты изображения

Нажмите слева

<img src="assets/morlix-abstract.webp" width="280" height="158" usemap="#demo-map2" alt="Нажмите слева"><map name="demo-map2"><area shape="rect" coords="0,0,140,158" href="#media-elements" alt="Левая часть"></map>

<canvas>HTML

Холст рисования с JavaScript

<canvas width="260" height="100" data-demo-canvas aria-label="График на canvas">Canvas недоступен.</canvas>

HTML / 06

Таблицы

10 элементов. Примеры и исходный код каждого тега.

10 тегов

<table>HTML

Таблица данных

Сайт	Статус
CMS	Активен

<table><tr><th>Сайт</th><th>Статус</th></tr><tr><td>CMS</td><td>Активен</td></tr></table>

<caption>HTML

Заголовок таблицы

Подключённые продукты
CMS

<table><caption>Подключённые продукты</caption><tr><td>CMS</td></tr></table>

<colgroup>HTML

Группа столбцов

Сайт

CMS

<table><colgroup><col style="background:#e0efff"><col></colgroup><tr><td>Сайт</td><td>CMS</td></tr></table>

<col>HTML

Столбец таблицы

Левый

Правый

<table><colgroup><col style="background:#e0efff"><col></colgroup><tr><td>Левый</td><td>Правый</td></tr></table>

<thead>HTML

Шапка таблицы

Наименование
CMS

<table><thead><tr><th>Наименование</th></tr></thead><tbody><tr><td>CMS</td></tr></tbody></table>

<tbody>HTML

Основная часть таблицы

Строка данных

<table><tbody><tr><td>Строка данных</td></tr></tbody></table>

<tfoot>HTML

Итоги таблицы

Итого: 12
12

<table><tbody><tr><td>12</td></tr></tbody><tfoot><tr><th>Итого: 12</th></tr></tfoot></table>

<tr>HTML

Строка таблицы

Ячейка 1

Ячейка 2

<table><tr><td>Ячейка 1</td><td>Ячейка 2</td></tr></table>

<th>HTML

Заголовочная ячейка

Заголовок	Значение

<table><tr><th scope="col">Заголовок</th><td>Значение</td></tr></table>

<td>HTML

Обычная ячейка

Обычная ячейка

<table><tr><td>Обычная ячейка</td></tr></table>

HTML / 07

Формы и значения

15 элементов. Примеры и исходный код каждого тега.

15 тегов

<form>HTML

Контейнер полей формы

<form data-demo-form><input type="text" required placeholder="Название"><button type="submit">Сохранить</button></form>

<label>HTML

Подпись и связь с полем

Название проекта

<label for="elem-label-input">Название проекта</label><input id="elem-label-input" placeholder="Morlix">

<input>HTML

Универсальное поле ввода

<input type="text" placeholder="Текстовое поле">

<button>HTML

Кнопка

<button type="button" data-toast="Нажата HTML-кнопка">Нажать</button>

<select>HTML

Выпадающий список или список выбора

<select aria-label="Пример select"><option>Free</option><option>Pro</option><option>Business</option></select>

<selectedcontent>Экспериментальный

Отображение выбранного содержимого в настраиваемом select

Новый элемент. Отображение зависит от поддержки браузера.

<select aria-label="Современный select"><button><selectedcontent></selectedcontent></button><option value="free">Free</option><option value="pro">Pro</option></select>

<option>HTML

Вариант выбора

<select aria-label="Список"><option>Первый</option><option>Второй</option></select>

<optgroup>HTML

Группа вариантов

<select aria-label="Группы"><optgroup label="Тарифы"><option>Pro</option><option>Business</option></optgroup></select>

<datalist>HTML

Рекомендуемые значения поля

<input list="elem-suggest" placeholder="Название"><datalist id="elem-suggest"><option value="Morlix CMS"><option value="SEO Center"></datalist>

<textarea>HTML

Многострочное поле

<textarea rows="3" placeholder="Многострочный текст"></textarea>

<fieldset>HTML

Группа полей формы

Разрешения Читать

<fieldset><legend>Разрешения</legend><label><input type="checkbox" checked> Читать</label></fieldset>

<legend>HTML

Заголовок fieldset

Группа полей

<fieldset><legend>Группа полей</legend><input placeholder="Значение"></fieldset>

<output>HTML

Вычисленный результат

<form oninput="demoResult.value=Number(demoA.value)+Number(demoB.value)" data-demo-form><input type="number" id="demoA" value="2" style="width:65px"> + <input type="number" id="demoB" value="3" style="width:65px"> = <output name="demoResult" for="demoA demoB">5</output></form>

<progress>HTML

Ход выполнения операции

65%

<progress value="65" max="100">65%</progress>

<meter>HTML

Измеряемое значение в диапазоне

76%

<meter min="0" max="100" value="76">76%</meter>

HTML / 08

Интерактивные элементы

3 элементов. Примеры и исходный код каждого тега.

3 тегов

<details>HTML

Раскрываемый блок

Показать подробнее

Скрытая информация.

<details><summary>Показать подробнее</summary><p>Скрытая информация.</p></details>

<summary>HTML

Заголовок раскрываемого блока

Краткий заголовок

Подробное содержимое.

<details><summary>Краткий заголовок</summary><p>Подробное содержимое.</p></details>

<dialog>HTML

Модальное или немодальное окно

<dialog id="elem-dialog"><p>Текст диалога</p><button data-close-element-dialog>Закрыть</button></dialog><button data-open-element-dialog>Открыть диалог</button>

HTML / 09

Web Components

2 элементов. Примеры и исходный код каждого тега.

2 тегов

<template>HTML

Отложенный DOM-шаблон

<template id="elem-template"><p>Этот фрагмент создан из template.</p></template><button data-clone-template>Добавить из шаблона</button><div id="elem-template-dest"></div>

<slot>HTML

Место вставки содержимого Shadow DOM

Контент слота

<template id="slot-template"><span><slot name="title">Заголовок</slot></span></template><mx-slot-demo><strong slot="title">Контент слота</strong></mx-slot-demo>

HISTORICAL HTML

Устаревшие и нестандартные элементы

Это не часть 113 действующих стандартных HTML-элементов. Не использовать в новых интерфейсах Morlix.

Архив

<acronym><big><center><content><dir><fencedframe><font><frame><frameset><image><marquee><menuitem><nobr><noembed><noframes><param><plaintext><rb><rtc><shadow><strike><tt><xmp>

Дополнительные исторические и специфичные для старых браузеров конструкции:

<applet><basefont><bgsound><blink><isindex><keygen><listing><multicol><nextid><spacer><layer><ilayer>

SVG и MathML допускаются внутри HTML-документа, но являются отдельными языками разметки. Пользовательские Web Components не имеют конечного перечня.