Памятка по тегам HTML
?
Особенности шпаргалки:
- Все теги HTML на одной странице в алфавитном порядке — наглядно, быстро найти нужный.
- Есть основная информация чтобы вспомнить что это за тег, скопировать его запись и нужный атрибут.
- В блоке с кодом CSS можно увидеть является элемент блочным или строчным (или ещё каким) и его стили по умолчанию в браузере (как минимум в Chrome).
- При наведении курсора на заголовок элемента можно увидеть тултип с расшифровкой названия тега на английском.
- Если нужно больше информации об элементе — воспользуйтесь ссылками на текущую спецификацию HTML Living Standard (сложно) и на MDN (проще).
<!DOCTYPE>
— тип документа
<!-- -->
— комментарий
<!-- Текст комментария -->
Описание: Вставка комментария в код документа.
Атрибуты: нет.
<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;
}
<search>
— поиск
<search>…</search>
Описание: Раздел для поиска и фильтрации информации.
Атрибуты: глобальные атрибуты.
search {
display: block;
}
<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;
}
<slot>
— заполнитель разметки
<slot>…</slot>
Описание: Заполнитель компонентов для собственной разметки.
Атрибуты: name | глобальные атрибуты.
slot {
display: contents;
}
<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;
}