Имя | Описание | Значение свойства display |
<!—…—> | комментарий | none |
<!DOCTYPE> | объявление типа документа | none |
<head></head> | контейнер для метаданных html-документа | none |
<title></title> | заголовок / имя html-документа | none |
<meta> | мета-данные веб-страницы | none |
<link> | подключает внешние таблицы стилей | none |
<script></script> | подключает сценарии к странице | none |
<style></style> | подключает встраиваемые таблицы стилей | none |
<base> | базовый url-адрес, относительно которого вычисляются относительные адреса | none |
<noscript></noscript> | секция, не поддерживающая скрипт | block |
Здесь расположены основные html теги для работы с текстом на странице. Как правило, это различные выделения, подчеркивания, вставка заголовков и так далее.
Такие элементы делают текст наиболее приятным для восприятия. Обязательно используйте такие команды для форматирования текста.
Имя | Описание | Значение свойства display |
<h1></h1> — <h6></h6> | заголовки шести уровней | block |
<p></p> | параграфы в тексте | block |
<br> | перенос текста на новую строку | none |
<hr> | горизонтальная линия | block |
<wbr> | возможное место разрыва длинной строки | none |
<blockquote></blockquote> | большая цитата | block |
<cite></cite> | источник цитирования | inline |
<q></q> | краткая цитата | inline |
<code></code> | фрагмент программного кода | inline |
<kbd></kbd> | текст, вводимый пользователем с клавиатуры | inline |
<pre></pre> | выводит текст с пробелами и переносами | block |
<samp></samp> | результат выполнения сценария | inline |
<var></var> | выделяет переменные из программ | inline |
<del></del> | перечёркивает текст, помечая как удаленный | inline |
<s></s> | перечёркивает неактуальный текст | inline |
<dfn></dfn> | выделяет термин курсивом | inline |
<em></em> | выделяет важные фрагменты текста курсивом | inline |
<i></i> | выделяет текст курсивом без акцента | inline |
<strong></strong> | выделяет полужирным важный текст | inline |
<b></b> | задает полужирное начертание отрывка текста, без дополнительного акцента | inline |
<ins></ins> | подчёркивает изменения в тексте | inline |
<u></u> | выделяет отрывок текста подчёркиванием, без дополнительного акцента | inline |
<mark></mark> | выделяет фрагменты текста желтым фоном | inline |
<small></small> | отображает текст шрифтом меньшего размера | inline |
<sub></sub> | подстрочное написание символов | inline |
<sup></sup> | надстрочное написание символов | inline |
<time></time> | дата / время документа или статьи | inline |
<abbr></abbr> | аббревиатура или акроним | none |
<address></address> | контактные данные автора документа или статьи | block |
<bdi></bdi> | изолирует текст, читаемый справа налево | inline |
<bdo></bdo> | задаёт направление написания текста | inline |
<ruby></ruby> | контейнер для Восточно-Азиатских символов и их расшифровки | inline |
<rp></rp> | тег для скобок вокруг символов | none |
<rt></rt> | расшифровка символов | block |
Здесь расположены html теги для создания таблиц. Такие элементы тоже рекомендую использовать на странице. Особенно в аналитических каких-то материалах. Так пользователи могут быстро сориентироваться в ваших данных.
Имя | Описание | Значение свойства display |
<table></table> | html-таблица | table |
<tr></tr> | строка таблицы | table-row |
<th></th> | заголовок столбца таблицы | table-cell |
<td></td> | ячейка таблицы | table-cell |
<thead></thead> | блок заголовков таблицы | table-header-group |
<tbody></tbody> | тело таблицы | table-row-group |
<tfoot></tfoot> | нижний колонтитул таблицы | table-footer-group |
<caption></caption> | подпись к таблице | table-caption |
<col> | выбирает для форматирования столбцы | table-column |
<colgroup></colgroup> | контейнер для одного или нескольких <col> | table-column-group |
Обязательно используйте тег картинки в html-документе. Тоже полезно при восприятии и усвоения информации. Еще полезно и в SEO. Можно получать трафик с поиска по картинкам. И стоит отметить, что материал без изображений очень плохо ранжируется в поиске.
Имя | Описание | Значение свойства display |
<img> | html-изображения | inline |
<map></map> | активные области на карте-изображении | inline |
<area> | гиперссылка с текстом или активная область внутри карты-изображения | inline |
<canvas></canvas> | холст-контейнер для динамического отображения изображений | inline-block |
Теги списка тоже рекомендую использовать. Очень полезно при каком-то перечислении или создании пошаговой инструкции. Информацию в списке старайтесь давать максимально коротко и понятно. То есть не делать длинных предложений.
Название | Описание | Значение свойства display |
<ol></ol> | упорядоченный нумерованный список | block |
<ul></ul> | маркированный список | block |
<li></li> | элемент списка | list-item |
<dl></dl> | контейнер для термина и его описания | block |
<dt></dt> | задаёт термин | block |
<dd></dd> | расшифровывает термин | block |
Тег ссылки в html всегда один. Будьте осторожны при его использовании. Всегда проверяйте, куда вы ссылаетесь. То есть, что это за сайт и релевантен ли он данной теме. Также в атрибуте данного тега внимательно прописывайте адрес перехода.
Если что-то сделаете не так, то вас перебросит на страницу с 404 ошибкой. Это плохо для юзабилити и продвижения сайта в целом. Также обращайте на количество линков. Ссылайтесь только тогда, когда это необходимо!
Название | Описание | Значение свойства display |
<a></a> | гиперссылка | inline |
Контент, который можно встроить в основное тело страницы. Также полезно для восприятия информации. Например, вы сначала написали текстовую инструкцию. После этого в самом конце можно вставить видео с наглядной демонстрацией работы.
Имя | Описание | Значение свойства display |
<audio></audio> | добавляет аудио-файлы | inline-block |
<video></video> | добавляет видео-файлы | inline-block |
<source> | указывает местоположение и тип альтернативных файлов для <audio> и <video> | none |
<track> | субтитры для элементов <audio> и <video> | none |
<embed> | встраивает внешний интерактивный контент или плагин | inline-block |
<object></object> | контейнер для встраивания мультимедиа | inline-block |
<param> | задаёт параметры для плагинов, встраиваемых с помощью элемента <object> | none |
<iframe></iframe> | создаёт встроенный фрейм | block |
Дополнительная группировка контента по различным секциям страницы. Своего рода семантическая структура страницы. Очень полезно для юзабилити сайта.
К примеру, постраничная навигация позволяет разбивать длинные страницы архивов на несколько подстраниц. Это улучшает как удобство пользования, так и скорость загрузки страницы.
Имя | Описание | Значение свойства display |
<body></body> | тело html-документа | block |
<div></div> | контейнер для разделов html-документа, группирует блочные элементы | block |
<span></span> | контейнер для строчных элементов | inline |
<header></header> | секция для вводной информации сайта или группы навигационных ссылок | block |
<footer></footer> | секция для нижнего колонтитула документа или раздела | block |
<section></section> | логическая область (раздел) страницы, обычно с заголовком | block |
<article></article> | раздел контента, образующий независимую часть документа или сайта | block |
<aside></aside> | контент страницы, имеющий косвенное отношение к основному контенту | block |
<nav></nav> | раздел документа, содержащий навигационные ссылки по сайту | block |
<figure></figure> | независимый контейнер для такого контента как изображения, диаграммы и т.п. | block |
<figcaption></figcaption> | заголовок для элемента <figure> | block |
<details></details> | контейнер с дополнительными сведениями, который можно открыть или закрыть | block |
<summary></summary> | видимый заголовок для элемента <details> | block |
<main></main> | контейнер для уникального основного содержимого в пределах одной страницы сайта | block |
Они тоже частенько используются на сайтах. Самая главная и обязательная из них, это форма поиска по сайту. Если это многостраничник, то такой элемент должен присутствовать. Также сюда можно отнести формы подписки, обратной связи, регистрации и так далее.
Название | Описание | Значение свойства display |
<form></form> | html-форма | block |
<input> | многофункциональные поля формы | inline-block |
<textarea> | многострочное поле формы | inline-block |
<label></label> | текстовая метка для элемента <input> | inline |
<datalist></datalist> | контейнер для выпадающего списка элемента <input> с <option>-значениями | none |
<select></select> | элемент управления с выбором значений из предложенных вариантов <option> | inline-block |
<optgroup></optgroup> | контейнер с заголовком для группы элементов <option> | block |
<option></option> | вариант (опция) в раскрывающемся списке | block |
<fieldset></fieldset> | группирует связанные элементы в форме | block |
<legend></legend> | заголовок элементов формы, сгруппированных с помощью <fieldset> | block |
<button></button> | интерактивная кнопка | inline-block |
<keygen> | генерирует закрытый и открытый ключи | inline-block |
<progress></progress> | индикатор выполнения задачи | inline-block |
<meter></meter> | индикатор измерения в заданном диапазоне | inline-block |
<output></output> | поле для вывода результата вычисления | inline |
На этом все!
Мы рассмотрели html теги и их значение. Используйте данную справку, как шпаргалку при создании сайтов. Однако желательно, чтобы вы наизусть знали хотя бы основные команды. Если с кодом будете часто работать, то с этим проблем не будет. Запомнить можно быстро.