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