HTML: Теги

Всем тегам HTML в браузерах, по умолчанию, присвоено свойство display:, результатом чего существует разделение элементов на блочные и встроенные или строчные.

Каркас HTML документа по версии HTML5:

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="utf-8" />
    <title>Документ без названия</title>
</head>

<body>
    Контент
</body>

</html>

Служебные теги

Синтаксис	Описание	display
`<!DOCTYPE>`	Определяет тип документа	none
`<head></head>`	Контейнер в начале страницы для служебных тегов и подгружаемых функций	none
`<title></title>`	Заголовок документа отображаемый во вкладке браузера	none
`<meta>`	Метаданные страницы	none
`<link>`	Подключает внешние сервисы и таблицы стилей	none
`<script></script>`	Подключает скрипты к станице	none
`<style></style>`	Подключает глобальные стили к странице	none
`<base>`	Базовый URL-адрес — домен	none
`<noscript></noscrip>`	Блок не поддерживающий скрипты	block

Структурные блоки

Синтаксис	Описание	display
`<body></body>`	Тело html документа	block
`<main><main>`	Контейнер для всего содержимого страницы	block
`<nav></nav>`	Контейнер для навигационного меню	block
`<header><header>`	Шапка сайта	block
`<article></article>`	Блок основного контента, обычно статья	block
`<section></section>`	Часть контента с заголовком	block
`<aside></aside>`	Часть контента, имеющая косвенное отношение к основному	block
`<footer></footer>`	Подвал страницы	block
`<div>`	Применяется для создания блочных контейнеров	block
`<span></span>`	Применяется для создания встроенных контейнеров	block
`<figure></figure>`	Независимый контейнер. Преимущественно для изображений	block
`<figcaption></figcaption>`	Заголовок для figure	block
`<details></details>`	Контейнер с дополнительной информацией, который можно свернуть или развернуть	block
`<summary></summary>`	Заголовок для details, по которому можно щёлкать, чтоб свернуть или развернуть блок	block

Текст

Синтаксис	Описание	display
`<h1></h1>…<h6></h6>`	Заголовки шесть уровней	block
`<p></p>`	Абзац	block
`<br>`	Перенос строки	block
`<wbr>`	Возможное место разрыва строки	none
`<hr>`	Прямая линия	none
`<blockquote></blockquote>`	Цитата	block
`<q></q>`	Краткая цитата	inline
`<cite></cite>`	Источник цитирования	inline
`<code></code>`	Фрагмент кода	inline
`<pre></pre>`	Неформатированнй код	block
`<kbd></kbd>`	Текст моноширным шрифтом	inline
`<samp></samp>`	Результат выполнения скрипта	inline
`<var></var>`	Выделяет переменные из программ	inline
`<del></del>`	Зачёркнутый текст помечается как удалённый	inline
`<s></s>`	Зачёркнутый текст	block
`<ins><ins>`	Подчёркивает изменения в тексте	inline
`<u></u>`	Подчёркнутый текст	inline
`<dfn></dfn>`	Выделяет термин курсивом	inline
`<em></em>`	Выделяет курсивом важные фрагменты текста	inline
`<i></i>`	Выделяет текст курсивом	inline
`<strong></strong>`	Выделяет важный текст полужирным	inline
`<b></b>`	Выделяет текст полужирным	inline
`<mark></mark>`	Выделяет фрагмент текста жёлтым фоном	inline
`<small></small>`	Уменьшает размер шрифта	inline
`<sub></sub>`	Подстрочное написание H₂O	inline
`<sup></sup>`	Надстрочное написание R²	inline
`<time><time>`	Дата, время выпуска статьи	inline
`<abbr></abbr>`	Аббревиатура	inline
`<address></address>`	Адрес автора статьи	inline
`<bdi></bdi>`	Изолирует текст читаемый справа на лево, для текста написанного на двух языках	inline
`<bdo></bdo>`	Задаёт направление написания текста	inline
`<ruby></ruby>`	Контейнер для Восточно-Азиатских символов	inline
`<rp></rp>`	Используется для вывода текста в браузерах, которые не поддерживают тег	none
`<rt></rt>`	Расшифровка символов	block

Таблицы

Синтаксис	Описание	display
`<table></table>`	Таблица HTML	table
`<tr></tr>`	Строка таблицы	table-row
`<th></th>`	Ячейки заголовков столбцов таблицы	table-cell
`<td></td>`	Ячейки таблицы	table-cell
`<thead></thead>`	Группа верхних строк таблицы. Применяется для общего оформления	table-header-group
`<tfoot></tfoot>`	Группа нижних строк таблицы. Применяется для общего оформления	table-footer-group
`<tbody></tbody>`	Группа строк в середине таблицы. Применяется для общего оформления	table-row-group
`<col>`	Выделяет столбец таблицы	table-column
`<colgroup></colgroup>`	Группирует несколько столбцов таблицы для общего оформления	table-column-group
`<caption></caption>`	Описание таблицы	table-caption

Списки

Синтаксис	Описание	display
`<ol></ol>`	Упорядоченный нумерованный список	block
`<ul></ul>`	Маркированный список	block
`<li></li>`	Элемент списка	list-item
`<dl></dl>`	Список с описаниями	block
`<dt></dt>`	Строка списка с описаниями	block
`<dd></dd>`	Описание строки, списка с описаниями	block

Изображения

Синтаксис	Описание	display
`<img>`	Изображение html	inline
`<map></map>`	Активные области на карте	inline
`<area></area>`	Активная область с гиперссылкой на карте	inline
`<canvas></canvas>`	Контейнер для динамического отображения изображений созданных с помощью JavaScript	inline-block

Формы HTML

Синтаксис	Описание	display
`<form></form>`	Формы HTML	block
`<input></input>`	Многофункциональные поля формы	inline-block
`<textarea></textarea>`	Многострочное поле формы	inline-block
`<label></label>`	Обычно текст формы	inline
`<datalist></datalist>`	Создаёт список вариантов, из которых можно сделать выбор	none
`<option></option>`	Опция в раскрывающемся списке	block
`<optgroup></optgroup>`	Контейнер с заголовком для группы `<option>`	block
`<select></select>`	Контейнер для создания раскрывающегося списка	inline-block
`<fieldset></fieldset>`	Группирует связанные элементы формы	block
`<legend></legend>`	Заголовок элементов формы, связанных `<fieldset>`	block
`<button></button>`	Интерактивная кнопка	inline-block
`<keygen></keygen>`	Генератор ключей	inline-block
`<progress></progress>`	Отображает процесс выполнения в числовых значениях	inline-block
`<meter></meter>`	Используется для отображения числовых значений и величин	inline-block
`<output></output>`	Поле для вывода результатов вычислений	inline

Встраиваемые элементы

Синтаксис	Описание	display
`<audio></audio>`	Аудио файл	inline-block
`<video></video>`	Видео файл	inline-block
`<source></source>`	указывает местоположение и тип альтернативных файлов для `<video>` и `<audio>`	none
`<track></track>`	Субтитры	none
`<embed></embed>`	Встроенный внешний элемент	inline-block
`<object></object>`	Контейнер для встраиваемого внешнего элемента	inline-block
`<param>`	Параметры встраиваемого внешнего элемента	none
`<iframe></iframe>`	Встроенный фрейм	block

Ссылки

Синтаксис	Описание	display
`<a></a>`	Гипер ссылка	inline

Прокомментируйте первым...

Обратная связь