Шпаргалка по тегам HTML

Особенности данной шпаргалки:

  • Все теги HTML на одной странице в алфавитном порядке – наглядно и быстро найти нужный.
  • Есть основная информация чтобы вспомнить что это за тег, скопировать его запись и нужный атрибут.
  • В блоке с кодом CSS можно увидеть является элемент блочным или строчным (или еще каким) и его стили по умолчанию в браузере (как минимум в Chrome).
  • При наведении курсора на заголовок элемента можно увидеть тултип с расшифровкой названия тега на английском.
  • Если нужно больше информации об элементе – воспльзуйтесь ссылками на текущую спецификацию HTML Living Standard (сложно) и на MDN (проще).




<!doctype> – тип документа

<!doctype html>

Описание: Указание типа документа.

Атрибуты: html.

<!-- --> – комментарий

<!-- Текст комментария -->

Описание: Вставка комментария в код документа.

Атрибуты: нет.

<a> – ссылка

<a target="_blank" href="https://example.com/">ссылка</a>

Описание: Ссылка на элементы, файлы, другие страницы и сайты.

Атрибуты: href | target | download | hreflang | rel | type | глобальные атрибуты.

a, a:-webkit-any-link {
display: inline;
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
<abbr> – аббревиатура

<abbr title="Союз советских социалистических республик">СССР</abbr>

Описание: Аббревиатура и ее расшифровка при наведении.

Атрибуты: глобальные атрибуты.

abbr[title] {
display: inline;
text-decoration: underline dotted;
}
<address> – контакты автора

<address>mail@example.com</address>

Описание: контактная информация автора данной статьи (внутри article) или страницы (внутри body).

Атрибуты: глобальные атрибуты.

address {
display: block;
font-style: italic;
}
<area> – область ссылки

<map><area href="example.com"></map>

Описание: Создает область со ссылкой внутри родительского изображения <map>.

Атрибуты: href | target | hreflang | type | shape | coords | alt | глобальные атрибуты.

area, area:-webkit-any-link {
display: inline;
cursor: pointer;
}
<article> – статья

<article><h1>Заголовок</h1><p>Текст</p></article>

Описание: Независимый информационный раздел (превью статьи, статья, сообщение, комментарий).

Атрибуты: глобальные атрибуты.

article {
display: block;
}
<aside> – сторонний раздел

<aside>…</aside>

Описание: Раздел, который не имеет прямого отношения к главному содержимому страницы (main).

Атрибуты: глобальные атрибуты.

aside {
display: block;
}
<audio> – аудио

<audio type="audio/aac" src="audio.aac" controls></audio>

Описание: Добавление и управление проигрыванием аудиофайлов.

Атрибуты: src | controls | autoplay | preload | loop | muted | глобальные атрибуты.

audio {
display: inline;
width: 300px;
height: 54px;/*Chrome*/
height: 40px;/*Firefox*/
}
<b> – жирный шрифт

<b>текст</b>

Описание: Выделение текста жирным начертанием для привлечения внимания.

Атрибуты: глобальные атрибуты.

b {
display: inline;
font-weight: bold;/*700*/
}
<base> – базовый адрес страницы

<head><base href="https://example.com/en/" target="_blank"></head>

Описание: Задает базовый адрес текущей страницы (относительные ссылки будут работать от этого базового адреса) и куда будут открываться ссылки.

Атрибуты: href | target | глобальные атрибуты.

base {
display: none;
}
<bdi> – запрет изменения направления текста

<bdi>текст</bdi>

Описание: Запрещает изменять направление вывода текста.

Атрибуты: глобальные атрибуты.

bdi {
display: inline;
unicode-bidi: isolate;
}
<bdo> – изменение направления текста

<bdo>тскет</bdo>

Описание: Устанавливает направление вывода текста.

Атрибуты: глобальные атрибуты.

bdo {
display: inline;
unicode-bidi: bidi-override;
}
<blockquote> – блок с цитатой

<blockquote cite="https://example.com/">Цитата</blockquote>

Описание: Блок (абзац) с цитатой.

Атрибуты: cite | глобальные атрибуты.

blockquote {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}
<body> – весь контент

<body>…</body>

Описание: Главный блок-контейнер, в котором располагаются все остальные видимые элементы страницы.

Атрибуты: глобальные атрибуты.

body {
display: block;
margin: 8px;
}
<br> – перенос строки

<br>

Описание: Создает перенос на следующую строку в том месте где он находится.

Атрибуты: глобальные атрибуты.

br {
display: inline;
}
<button> – кнопка

<button type="button">Кнопка</button>

Описание: Кнопка для совершения различных действий.

Атрибуты: autofocus | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | name | type | value | глобальные атрибуты.

button {
appearance: auto;
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
background-color: -internal-light-dark(rgb(239, 239, 239), rgb(59, 59, 59));
box-sizing: border-box;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
}
<canvas> – область для рисования

<canvas id="id"></canvas>

Описание: Область для рисования и вывода изображений с помощью JavaScript.

Атрибуты: width | height | глобальные атрибуты.

br {
display: inline;
width: 300px;
height: 150px;
}
<caption> – заголовок таблицы

<table><caption>Заголовок</caption></table>

Описание: Заголовок таблицы, используется внутри тега table.

Атрибуты: глобальные атрибуты.

caption {
display: table-caption;
text-align: -webkit-center;
}
<cite> – название произведения

<cite>Название</cite>

Описание: Название творческой работы, произведения.

Атрибуты: глобальные атрибуты.

cite {
display: inline;
font-style: italic;
}
<code> – код

<code>код</code>

Описание: Отображение программного кода.

Атрибуты: глобальные атрибуты.

code {
display: inline;
font-size: 13px;
font-family: monospace;
}
<col> – колонки таблицы

<table><col></table>

Описание: Задает характеристики колонок таблицы, внутри table.

Атрибуты: span | глобальные атрибуты.

col {
display: table-column;
}
<colgroup> – группа колонок

<table><colgroup></table>

Описание: Настройка оформления для нескольких колонок таблицы, внутри table.

Атрибуты: span | глобальные атрибуты.

colgroup {
display: table-column-group;
}
<data> – данные

<data value="12345">…</data>

Описание: Данные для скриптов.

Атрибуты: value (req) | глобальные атрибуты.

data {
display: inline;
}
<datalist> – список данных

<input list="id"><datalist id="id"><option value="Текст"></datalist>

Описание: Список вариантов для выбора в текстовом поле.

Атрибуты: глобальные атрибуты.

datalist {
display: none;
}
<dd> – описание термина

<dl><dt>Термин</dt><dd>описание термина(</dd>)</dl>

Описание: Описывает термин dt внутри списка описания dd.

Атрибуты: глобальные атрибуты.

dd {
display: block;
margin-inline-start: 40px;
}
<del> – удаленный текст

<del>удаленный текст</del>

Описание: Выделение удаленного текста.

Атрибуты: cite | datetime | глобальные атрибуты.

del {
display: inline;
text-decoration: line-through;
}
<details> – спойлер

<details><summary>Спойлер</summary>Текст</details>

Описание: Скрытый контент, который раскрывается по клику.

Атрибуты: open | глобальные атрибуты.

details {
display: block;
}
<dfn> – определение термина

<dfn title="описание термина">термин</dfn>

Описание: Описание нового термина при его первом упоминании в тексте.

Атрибуты: глобальные атрибуты.

dfn {
display: inline;
font-style: italic;
}
<dialog> – диалоговое окно

<dialog open>Текст</dialog>

Описание: Всплывающее диалоговое (модальное) окно.

Атрибуты: open | глобальные атрибуты.

dialog:not([open]) {
display: none;
}
dialog {
display: block;
position: absolute;
left: 0px;
right: 0px;
width: fit-content;
height: fit-content;
color: -internal-light-dark(black, white);
margin: auto;
border-width: initial;
border-style: solid;
border-color: initial;
border-image: initial;
padding: 1em;
background: -internal-light-dark(white, black);
}
<div> – раздел

<div>…</div>

Описание: Универсальный элемент для группировки других элементов и изменения их стилей.

Атрибуты: глобальные атрибуты.

div {
display: block;
}
<dl> – список описаний

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

Описание: Список с описанием терминов.

Атрибуты: глобальные атрибуты.

dl {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
<dt> – термин для описания

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

Описание: Термин в списке описаний терминов.

Атрибуты: глобальные атрибуты.

dt {
display: block;
}
<em> – акцент на тексте

<em>текст</em>

Описание: Выделение текста на который нужно сделать акцент, который имеет особое значение.

Атрибуты: глобальные атрибуты.

em {
display: inline;
font-style: italic;
}
<embed> – вставка объектов

<embed>

Описание: Вставка объектов, которые браузер не поддерживает (не читает).

Атрибуты: height | hidden | pluginspage | src | type | width | глобальные атрибуты.

embed {
display: inline;/*?*/
}
<fieldset> – группировка инпутов

<form><fieldset>…</fieldset></form>

Описание: Объединение нескольких полей ввода внутри формы.

Атрибуты: disabled | form | глобальные атрибуты.

fieldset {
display: block;
margin-inline-start: 2px;
margin-inline-end: 2px;
padding-block-start: 0.35em;
padding-inline-start: 0.75em;
padding-inline-end: 0.75em;
padding-block-end: 0.625em;
min-inline-size: min-content;
border-width: 2px;
border-style: groove;
border-color: threedface;
border-image: initial;
}
<figcaption> – подпись к картинке

<figure><figcaption>Текст</figcaption></figure>

Описание: Описание для элемента figure.

Атрибуты: глобальные атрибуты.

figcaption {
display: block;
}
<figure> – картинка с подписью

<figure>…</figure>

Описание: Объединение изображения и подписи к нему (с помощью figcaption).

Атрибуты: глобальные атрибуты.

figure {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 40px;
margin-inline-end: 40px;
}
<footer> – футер

<footer>…</footer>

Описание: Нижний раздел сайта, подвал.

Атрибуты: глобальные атрибуты.

footer {
display: block;
}
<form> – форма

<form>…</form>

Описание: Форма, может содержать множество различных полей ввода.

Атрибуты: accept-charset | action | autocomplete | enctype | method | name | novalidate | target | глобальные атрибуты.

form {
display: block;
margin-top: 0em;/*?*/
}
<h1> – заголовок №1

<h1>Заголовок 1</h1>

Описание: Главный заголовок страницы (первого уровня).

Атрибуты: глобальные атрибуты.

h1 {
display: block;
font-size: 2em;/*32px*/
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<h2> – заголовок №2

<h2>Заголовок 2</h2>

Описание: Заголовок второго уровня.

Атрибуты: глобальные атрибуты.

h2 {
display: block;
font-size: 1.5em;/*24px*/
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<h3> – заголовок №3

<h3>Заголовок 3</h3>

Описание: Заголовок третьего уровня.

Атрибуты: глобальные атрибуты.

h3 {
display: block;
font-size: 1.17em;/*18.72px*/
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<h4> – заголовок №4

<h4>Заголовок 4</h4>

Описание: Заголовок четвертого уровня.

Атрибуты: глобальные атрибуты.

h4 {
display: block;
margin-block-start: 1.33em;
margin-block-end: 1.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<h5> – заголовок №5

<h5>Заголовок 5</h5>

Описание: Заголовок пятого уровня.

Атрибуты: глобальные атрибуты.

h5 {
display: block;
font-size: 0.83em;/*13.28px*/
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<h6> – заголовок №6

<h6>Заголовок 6</h6>

Описание: Заголовок шестого уровня.

Атрибуты: глобальные атрибуты.

h6 {
display: block;
font-size: 0.67em;/*10.72px*/
margin-block-start: 2.33em;
margin-block-end: 2.33em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
<head> – голова

<head>…</head>

Описание: Контейнер для вспомогательных элементов, которые помогают в работе браузеров, но не отображаются на странице.

Атрибуты: глобальные атрибуты.

head {
display: none;
}
<header> – шапка

<header>…</header>

Описание: Верхний раздел сайта, в котором обычно располагаются логотип, ссылки меню, контакты.

Атрибуты: глобальные атрибуты.

header {
display: block;
}
<hgroup> – группировка заголовков

<hgroup>…</hgroup>

Описание: Группировка заголовков h1-h6. Не рекомендуется использовать этот элемент!

Атрибуты: глобальные атрибуты.

hgroup {
display: block;
}
<hr> – горизонтальная линия

<hr>

Описание: Горизонтальная линия для разграничения контента.

Атрибуты: глобальные атрибуты.

hr {
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}
<html> – корневой контейнер

<html lang="ru">…</html>

Описание: Главный элемент, в котором содержатся все остальные элементы страницы.

Атрибуты: xmlns | глобальные атрибуты.

html {
display: block;
/*-webkit-locale: "ru";*/
}
<i> – курсив

<i>текст</i>

Описание: Курсивный текст.

Атрибуты: глобальные атрибуты.

i {
display: inline;
font-style: italic;
}
<iframe> – фрейм

<iframe>…</iframe>

Описание: Фрейм, область для загрузки других документов.

Атрибуты: allowfullscreen | height | name | sandbox | scrolling | seamless | src | srcdoc | width | глобальные атрибуты.

iframe {
display: inline;/*?*/
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
<img> – изображение

<img src="image.png" alt="описание картинки">

Описание: Файл с изображением.

Атрибуты: alt | height | ismap | sizes | src | srcset | width | usemap | глобальные атрибуты.

img {
display: inline;
}
<input> – поле ввода

<input>

Описание: Элемент для взаимодействия с пользователем.

Атрибуты: accept | alt | autocomplete | autofocus | checked | dirname | disabled | form | formaction | formenctype | formmethod | formnovalidate | formtarget | list | max | maxlength | min | minlength | multiple | name | pattern | placeholder | readonly | required | size | src | step | type | value | глобальные атрибуты.

input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 2px;
border-width: 2px;
border-style: inset;
border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
border-image: initial;
}
<ins> – добавленный текст

<ins>текст</ins>

Описание: Выделение текста, который был добавлен в новую версию документа.

Атрибуты: cite | datetime | глобальные атрибуты.

ins {
display: inline;
text-decoration: underline;
}
<kbd> – клавиатура

<kbd>текст</kbd>

Описание: Обозначение клавиш или текста, набранного на клавиатуре.

Атрибуты: глобальные атрибуты.

kbd {
display: inline;
font-size: 13px;
font-family: monospace;
}
<label> – лейбл

<label for="id">Текст</label><input id="id">

Описание: Название для элемента формы.

Атрибуты: for | глобальные атрибуты.

label {
display: inline;
cursor: default;
}
<legend> – надпись

<fieldset><legend>Текст</legend></fieldset>

Описание: Название для группы элементов формы, обернутых в fieldset.

Атрибуты: глобальные атрибуты.

legend {
display: block;
padding-inline-start: 2px;
padding-inline-end: 2px;
border-width: initial;
border-style: none;
border-color: initial;
border-image: initial;
}
<li> – пункт списка

<ol><li>Текст</li></ol>

Описание: Один элемент списка ol или ul.

Атрибуты: value | глобальные атрибуты.

li {
display: list-item;
text-align: -webkit-match-parent;
}
li::marker {
unicode-bidi: isolate;
font-variant-numeric: tabular-nums;
text-transform: none;
text-indent: 0px !important;
text-align: start !important;
text-align-last: start !important;
}
<link> – связь

<head><link href="styles.css"></head>

Описание: Устанавливает связь с внешним документом (стили, шрифты).

Атрибуты: href | media | rel | sizes | type | глобальные атрибуты.

link {
display: none;
}
<main> – главный раздел

<main>…</main>

Описание: Основной раздел, в котором должен располагаться целевой контент страницы.

Атрибуты: глобальные атрибуты.

main {
display: block;
}
<map> – область со ссылками

<map name="name"><area></map>

Описание: Область для элементов area, создающих зоны-ссылки на изображении.

Атрибуты: name | глобальные атрибуты.

map {
display: inline;
}
<mark> – маркированный текст

<mark>текст</mark>

Описание: Выделение текста фоновым цветом для привлечения внимания.

Атрибуты: глобальные атрибуты.

mark {
display: inline;
color: black;
background-color: yellow;
}
<menu> – меню

<menu><li>пункт меню</li></menu>

Описание: Список с пунктами меню. Тег сомнителен для использования.

Атрибуты: label | type | глобальные атрибуты.

menu {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
<meta> – метаданные

<head><meta></head>

Описание: Метатеги для браузеров и поисковиков.

Атрибуты: charset | content | http-equiv | name | глобальные атрибуты.

meta {
display: none;
}
<meter> – счетчик

<meter value="10">10</meter>

Описание: Отображение чисел в некотором диапазоне.

Атрибуты: value | min | max | low | high | optimum | form | глобальные атрибуты.

meter {
-webkit-writing-mode: horizontal-tb !important;
appearance: auto;
box-sizing: border-box;/*box-sizing: content-box; Firefox*/
display: inline-block;
height: 1em;/*16px*/
width: 5em;/*80px*/
vertical-align: -0.2em;
-webkit-user-modify: read-only !important;
}
<nav> – навигация

<nav>…</nav>

Описание: Блок навигации с ссылками по сайту.

Атрибуты: глобальные атрибуты.

nav {
display: block;
}
<noscript> – без скрипта

<noscript>Текст</noscript>

Описание: Сообщение если в браузере не работают скрипты.

Атрибуты: глобальные атрибуты.

noscript {
  display: none;
}
<object> – объект

<object data="flash.swf" type="application/x-shockwave-flash"></object>

Описание: Обработка документов, которые браузер не поддерживает.

Атрибуты: data | form | height | name | type | usemap | width | глобальные атрибуты.

object {
  display: inline;
  width: 300px;/*Chrome*/
  height: 150px;/*Chrome*/
}
<ol> – нумерованный список

<ol><li>текст</li></ol>

Описание: Нумерованный (упорядоченный) список.

Атрибуты: type | reversed | start | глобальные атрибуты.

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
<optgroup> – группа вариантов

<select><optgroup label="текст"><option>текст</option></optgroup></select>

Описание: Контейнер для элементов option.

Атрибуты: disabled | label | глобальные атрибуты.

optgroup {
  display: block;
  font-weight: bolder;
  /*font-style: italic; Firefox*/
}
<option> – вариант выбора

<select><option>Текст</option></select>

Описание: Пункт для выбора в списке select.

Атрибуты: disabled | label | selected | value | глобальные атрибуты.

option {
  display: block;
  min-height: 1.2em;/*19.2px*/
  padding: 0px 2px 1px;
  font-weight: normal;
  white-space: nowrap;
}
<output> – вывод информации

<output></output>

Описание: Область для вывода информации.

Атрибуты: for | form | name | глобальные атрибуты.

output {
  display: inline;
  unicode-bidi: isolate;
}
<p> – абзац

<p>Текст</p>

Описание: Текстовый абзац (параграф).

Атрибуты: глобальные атрибуты.

p {
  display: block;
  margin-block-start: 1em;/*16px*/
  margin-block-end: 1em;/*16px*/
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
<param> – параметр

<param name="name" value="10">

Описание: Для передачи параметров объектам веб-документа.

Атрибуты: name | value | глобальные атрибуты.

param {
  display: none;
}
<picture> – контейнер картинок

<picture><source><img></picture>

Описание: Контейнер для элементов source, для задания разных вариантов картинок img.

Атрибуты: глобальные атрибуты.

param {
  display: inline;/*?*/
}
<pre> – форматированный текст

<pre>текст</pre>

Описание: Отображает текст со всеми пробелами.

Атрибуты: глобальные атрибуты.

pre {
  display: block;
  margin: 1em 0px;/*13px 0px*/
  font-size: 13px;
  font-family: monospace;
  white-space: pre;
}
<progress> – прогресс

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

Описание: Отображение прогресса задачи.

Атрибуты: value | max | глобальные атрибуты.

progress {
  box-sizing: border-box;
  /*box-sizing: content-box; Firefox*/
  display: inline-block;
  width: 10em;/*160px*/
  height: 1em;/*16px*/
  vertical-align: -0.2em;/*-3.2px*/
  -webkit-writing-mode: horizontal-tb !important;
  appearance: auto;
}
<q> – цитата

<q>текст</q>

Описание: Цитата в тексте.

Атрибуты: cite | глобальные атрибуты.

q {
  display: inline;
}
q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}
<rp> – альт. руби-текста

<ruby>текст<rp>текст</rp><rt>аннотация</rt><rp>текст</rp></ruby>

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

Атрибуты: глобальные атрибуты.

rp {
  display: none;
}
<rt> – текст рубина

<ruby>текст<rt>аннотация</rt></ruby>

Описание: Аннотация текста в контейнере ruby.

Атрибуты: глобальные атрибуты.

rt {
  display: inline;/*? Chrome*/
  display: ruby-text;/*Firefox*/
  font-size: 8px;/*Firefox*/
  text-indent: 0px;
  line-height: normal;/*8px*/
  -webkit-text-emphasis: none;
}
ruby > rt {
  display: block;/*Chrome*/
  font-size: 50%;/*8px*/
  text-align: start;
}
<ruby> – рубин

<ruby>текст<rt>аннотация</rt></ruby>

Описание: Текст с аннотацией.

Атрибуты: глобальные атрибуты.

ruby {
  display: ruby;/*Firefox*/
  text-indent: 0px;
}
<s> – зачеркнутый текст

<s>текст</s>

Описание: Перечеркнутый (не точный, не актуальный) текст.

Атрибуты: глобальные атрибуты.

s {
  display: inline;
  text-decoration: line-through;
}
<samp> – пример вывода

<samp>текст</samp>

Описание: Результат вывода текста или скрипта программы.

Атрибуты: глобальные атрибуты.

samp {
  display: inline;
  font-size: 13px;
  font-family: monospace;
}
<script> – скрипт

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

Описание: Код скриптов, встроенный или ссылка на внешний файл.

Атрибуты: async | defer | src | type | глобальные атрибуты.

script {
  display: none;
}
<section> – секция

<section>…</section>

Описание: Секция (раздел) страницы.

Атрибуты: глобальные атрибуты.

section {
  display: block;
}
<select> – список с выбором

<select><option>Текст</option></select>

Описание: Список с возможностью выбора пунктов.

Атрибуты: autofocus | disabled | form | multiple | name | required | size | глобальные атрибуты.

select {
  box-sizing: border-box;
  display: inline-block;
  -webkit-writing-mode: horizontal-tb !important;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-align: start;
  appearance: auto;
  align-items: center;
  white-space: pre;
  -webkit-rtl-ordering: logical;
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  cursor: default;
  margin: 0em;
  font: 400 13.3333px Arial;
  border-radius: 0px;
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
}
select:not(:-internal-list-box) {
  overflow: visible !important;
}
<small> – маленький шрифт

<small>текст</small>

Описание: Сопроводительная информация "мелким текстом".

Атрибуты: глобальные атрибуты.

small {
  display: inline;
  font-size: smaller;/*13.3333px*/
}
<source> – путь к медиафайлу

<picture><source srcset="pic.avif"></picture>

Описание: Содержит путь к медиафайлу в контейнерах picture, audio, video.

Атрибуты: media | sizes | src | srcset | type | глобальные атрибуты.

source {
  display: inline;
}
<span> – универсальный строчный элемент

<span>текст</span>

Описание: Универсальный элемент для изменения оформления строчных элементов.

Атрибуты: глобальные атрибуты.

span {
  display: inline;
}
<strong> – важный текст

<strong>текст</strong>

Описание: Выделяет важный текст, с большим значением.

Атрибуты: глобальные атрибуты.

strong {
  display: inline;
  font-weight: bold;/*700*/
}
<style> – стиль

<head><style>…</style></head>

Описание: Оформление стиля элементов страницы внутри head.

Атрибуты: media | type | глобальные атрибуты.

style {
  display: none;
}
<svg> – векторный рисунок

<svg>…</svg>

Описание: Векторная графика.

Атрибуты: media | type | глобальные атрибуты.

svg {
  display: inline;
  width: 300px;
  height: 150px;
}
svg:not(:root) {
  overflow: hidden;
}
<sub> – нижний индекс

<sub>текст</sub>

Описание: Отображение текста нижним индексом.

Атрибуты: глобальные атрибуты.

sub {
  display: inline;
  vertical-align: sub;
  font-size: smaller;/*13.3333px*/
}
<summary> – заголовок спойлера

<details><summary>Текст</summary>…</details>

Описание: Заголовок для тега details, по клику на который разворачивается информация.

Атрибуты: глобальные атрибуты.

summary {
  display: block;
}
details > summary:first-of-type {
  display: list-item;
  counter-increment: list-item 0;
  list-style: inside disclosure-closed;
}
summary::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}
<sup> – верхний индекс

<sup>текст</sup>

Описание: Отображение текста верхним индексом.

Атрибуты: глобальные атрибуты.

sup {
  display: inline;
  vertical-align: super;
  font-size: smaller;/*13.3333px*/
}
<table> – таблица

<table><tr><td>…</td></tr></table>

Описание: Создание таблицы.

Атрибуты: глобальные атрибуты.

table {
  box-sizing: border-box;
  display: table;
  text-indent: initial;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: grey;
}
<tbody> – тело таблицы

<table><tbody><tr><td>…</td></tr></tbody></table>

Описание: Контейнер для строк таблицы.

Атрибуты: глобальные атрибуты.

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}
<td> – ячейка таблицы

<table><tr><td>…</td></tr></table>

Описание: Ячейка таблицы.

Атрибуты: глобальные атрибуты.

td {
  display: table-cell;
  padding: 1px;/*?*/
  vertical-align: inherit;
}
<template> – шаблон

<template>…</template>

Описание: Шаблон контента для заполнения с помощью JavaScript.

Атрибуты: глобальные атрибуты.

template {
  display: none;
}
<textarea> – область с текстом

<textarea></textarea>

Описание: Блок для ввода текста в форме.

Атрибуты: autocomplete | autofocus | cols | dirname | disabled | form | maxlength | minlength | name | placeholder | readonly | required | rows | wrap | глобальные атрибуты.

textarea {
  display: inline-block;
  flex-direction: column;
  column-count: initial !important;
  margin: 0em;
  padding: 2px;
  font: 400 13.3333px Arial;
  letter-spacing: normal;
  word-spacing: normal;
  text-align: start;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  text-rendering: auto;
  color: -internal-light-dark(black, white);
  background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
  border-width: 1px;
  border-style: solid;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  appearance: auto;
  resize: auto;
  cursor: text;
  -webkit-writing-mode: horizontal-tb !important;
  -webkit-rtl-ordering: logical;
}
<tfoot> – подвал таблицы

<table>…<tfoot>…</tfoot></table>

Описание: Нижняя часть таблицы с информацией о колонках.

Атрибуты: глобальные атрибуты.

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}
<th> – заглавная ячейка таблицы

<table><tr><th>…</th></tr></table>

Описание: Заглавная ячейка таблицы.

Атрибуты: abbr | colspan | headers | rowspan | scope | глобальные атрибуты.

th {
  display: table-cell;
  padding: 1px;/*?*/
  vertical-align: inherit;
  font-weight: bold;
  text-align: -internal-center;
}
<thead> – шапка таблицы

<table><thead>…</thead>…</table>

Описание: Заглавные строки таблицы.

Атрибуты: глобальные атрибуты.

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}
<time> – время

<time datetime="2021-06-26">2021.06.26</time>

Описание: Дата и время.

Атрибуты: datetime | глобальные атрибуты.

time {
  display: inline;
}
<title> – название

<head><title>Название</title></head>

Описание: Название (заголовок) документа в head.

Атрибуты: глобальные атрибуты.

title {
  display: none;
}
<tr> – строка таблицы

<table><tr><td>…</td></tr></table>

Описание: Строка таблицы, которая содержит отдельные ячейки.

Атрибуты: глобальные атрибуты.

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}
<track> – дорожка

<audio><track></audio>

Описание: Текстовые данные для медиафайлов.

Атрибуты: kind | src | srclang | label | default | глобальные атрибуты.

track {
  display: inline;/*?*/
}
<u> – невнятный текст

<u>текст</u>

Описание: Выделение текста подчеркиванием.

Атрибуты: глобальные атрибуты.

u {
  display: inline;
  text-decoration: underline;
}
<ul> – неупорядоченный список

<ul><li>Текст</li></ul>

Описание: Маркированный список.

Атрибуты: глобальные атрибуты.

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;/*16px*/
  margin-block-end: 1em;/*16px*/
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}
<var> – переменная

<var>текст</var>

Описание: Переменная из программы.

Атрибуты: глобальные атрибуты.

var {
  display: inline;
  font-style: italic;
}
<video> – видео

<video src="video.webm"></video>

Описание: Вставка видеофайла.

Атрибуты: autoplay | controls | height | loop | poster | preload | src | width | глобальные атрибуты.

video {
  display: inline;
  width: 300px;
  height: 150px;
  object-fit: contain;
}
<wbr> – перенос слов

<p>Хлор<wbr>гексидин</p>

Описание: Указывает где в слове допустимо перенести строку.

Атрибуты: глобальные атрибуты.

wbr {
  display: inline;
}

Автор: Олег Миторун