mitorun studio

Памятка по тегам 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;
}
<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;
}

Глобальные атрибуты(на MDN).




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