Полный список HTML-тегов + бесплатный контрольный список

Понимание полного спектра HTML-тегов полезно не только для расширения ваших технических знаний — оно имеет основополагающее значение для обеспечения хорошего пользовательского опыта, улучшения доступности и достижения положительных результатов SEO.

К концу этого поста вы получите полное представление о тегах HTML, которые вы можете использовать на своем веб-сайте.

Но давайте сначала рассмотрим основы. 

Что такое HTML-теги?

HTML-теги — это основные строительные блоки веб-страниц, которые сообщают веб-браузерам, как отображать и форматировать контент.

Например, приведенный ниже тег сообщает браузеру о необходимости включить ссылку на статью, объясняющую SEO, и разместить ее над текстом «поисковая оптимизация (SEO)».

<a href="https://shopnseo.ru/posts/sayty/hosting/">Что такое хостинг</a>

Вот как будет выглядеть эта ссылка в опубликованном сообщении в блоге:

В этом примере:

• «<a>» — это элемент, т. е. фундаментальный строительный блок, включающий сам тег и заключенное в нем содержимое. 
• «href» — атрибут , указывающий место назначения ссылки.
• «Что такое хостинг» — это содержимое тега. 

В случае ссылки, как в этом примере, она будет отображаться как текст якоря .
HTML-теги всегда имеют элемент. Они могут иметь один или несколько атрибутов. Некоторые, например элементы <a>, имеют содержимое.

Наиболее распространенные и полезные теги HTML

Прежде чем погрузиться в наш полный список HTML-тегов, давайте познакомимся с ними и рассмотрим несколько вариантов их использования.

На рисунке ниже показаны наиболее распространенные и полезные HTML-теги, которые могут появляться на трех различных типах страниц:

• Домашняя страница: в основном ориентирована на навигацию и выделение ключевых частей бизнеса.
• Запись в блоге: нацелена на представление записи в блоге в ясной и логичной форме.
• Целевая страница: направлена ​​на передачу преимуществ и конвертацию пользователей.

Вы увидите некоторые теги, которые используются во всех трех, но для разных целей (указаны в скобках). И вы увидите некоторые теги, которые специфичны для каждого типа страницы.

Поэтому в следующий раз, когда вы соберетесь опубликовать домашнюю страницу, запись в блоге или целевую страницу, проверьте, присутствуют ли на вашей странице все важные теги.

Инфографика, сравнивающая основные теги HTML для маркетологов. Показывает ключевые теги для домашних страниц, сообщений в блогах и целевых страниц.

Семантические HTML-теги для передачи структуры
В следующей таблице представлен набор семантических тегов, описывающих значение содержащегося в них содержимого. 

Используйте эту семантическую разметку для улучшения доступности и предоставления дополнительного контекста для поисковых систем.

Ярлык

Описание

<статья>

Думайте об этом теге как о контейнере для отдельного фрагмента контента (например, записи в блоге или новостной статьи), который имеет смысл, даже если он отделен от остальной части страницы.

<в сторону>

Обозначает контент, который косвенно связан с окружающим его контентом и часто отображается в виде боковой панели.

<figcaption>

Представляет собой заголовок или легенду, описывающую содержимое элемента <figure>

<рисунок>

Обозначает самостоятельный контент, на который есть ссылка в основной части документа. Это может быть изображение, иллюстрация, диаграмма, фрагмент кода и т. д.

<нижний колонтитул>

Обозначает нижний колонтитул, который обычно содержит информацию об авторе, авторских правах, юридических уведомлениях и связанных ссылках.

<заголовок>

Указывает на вводный контент страницы или раздела. Обычно содержит логотип, заголовок и потенциально навигацию.

<главный>

Представляет доминирующее содержимое. На странице должен быть только один элемент <main>.

<нав>

Содержит навигационные ссылки. Предназначен для основных навигационных разделов.

<раздел>

Представляет тематическую группу контента, обычно с заголовком. Это общий элемент секционирования, который следует использовать, когда более конкретный семантический элемент не подходит.

Базовые структурные теги для создания общей конструкции
Следующие основные структурные теги необходимы для создания фундаментальной основы любого HTML-документа. 

Ярлык

Описание

<!DOCTYPE>

Объявляет тип документа (например, HTML5), чтобы гарантировать, что современные веб-браузеры визуализируют (т. е. отображают) страницу так, как задумано

<база>

Указывает базовый URL для всех относительных URL в документе HTML. Этот тег полезен, когда многие ссылки на странице имеют общий путь.

<тело>

Содержит весь видимый контент в документе HTML. Включает текст, изображения, ссылки и все другие элементы, которые увидят пользователи.

<html>

Представляет корневой элемент HTML-документа. Он инкапсулирует все остальное HTML-содержимое на странице.

<голова>

Содержит метаданные о документе HTML. Сюда входят заголовок документа, набор символов, ссылки на таблицы стилей и другие метаданные, используемые браузерами и поисковыми системами.

<ссылка>

Устанавливает связь между текущим HTML-документом и внешним ресурсом. Чаще всего используется для ссылки на внешние таблицы стилей CSS, которые управляют визуальным представлением.

<мета>

Предоставляет структурированные метаданные о HTML-документе, такие как краткое описание содержимого страницы, которое может использоваться поисковыми системами в фрагментах результатов поиска.

<нет скрипта>

Определяет контент, который будет отображаться, если браузеры пользователей не поддерживают скрипты или скрипты отключены. Это гарантирует, что пользователи без рендеринга JavaScript смогут получить доступ к базовому контенту.

<стиль>

Содержит правила CSS, которые применяются непосредственно к HTML-документу. Ссылки на внешние таблицы стилей часто предпочтительны для более крупных проектов и лучшей организации.

<скрипт>

Используется для встраивания или ссылки на исполняемые скрипты, такие как JavaScript . Что добавляет интерактивность и динамическое поведение веб-страницам.

<название>

Определяет заголовок HTML-документа. Этот заголовок отображается на вкладке браузера и может отображаться на страницах результатов поисковой системы (SERP) . Это фактор ранжирования для поиска Google.

Теги форматирования контента и текста для определения общего вида
Эти теги форматирования контента и текста устанавливают основную структуру и стиль контента, чтобы его было легко читать и с ним было удобно работать.

Ярлык

Описание

<а>

Создает гиперссылку на другие веб-страницы, файлы, местоположения на той же странице или адреса электронной почты. Атрибут «href» указывает место назначения ссылки.

<br>

Вставляет одиночный перенос строки

<div>

Определяет раздел или секцию. Часто используется как контейнер для группировки других элементов HTML для стилизации с помощью CSS.

<эм>

Представляет собой выделенный текст, обычно отображается курсивом.

<h1> - <h6>

Определите заголовки, где <h1> представляет наиболее важный заголовок, а <h6> — наименее. Эти теги имеют решающее значение для создания иерархии контента и сигнализации важности для пользователей и поисковых систем.

<ч>

Представляет собой тематический разрыв в содержании, часто отображается в виде горизонтальной линии.

<имг>

Встраивает изображение в документ. Атрибут «src» указывает путь к изображению, а атрибут «alt» предоставляет альтернативный текст, который кратко описывает изображение.

<р>

Представляет собой абзац текста. Используется для разделения блоков текста с целью улучшения читаемости.

<протяженность>

Встроенный контейнер, используемый для разметки части HTML-документа. Часто используется для стилизации определенных частей текста с помощью CSS.

<strong>

Создает сильно выделенный текст, обычно отображается жирным шрифтом

Теги изображений и мультимедиа для включения визуальных элементов
Используйте теги изображений и мультимедиа в следующей таблице для встраивания и управления визуальным и аудиоконтентом на веб-странице.

Ярлык

Описание

<область>

Определяет кликабельную область на карте изображения.

<аудио>

Используется для встраивания звукового контента в HTML-документ. Может включать атрибуты для управления (воспроизведение, пауза, громкость и т. д.), автовоспроизведение и зацикливание.

<имг>

Встраивает изображение в HTML-документ. Атрибут «src» указывает путь к изображению, а атрибут «alt» предоставляет краткое описание изображения.

<карта>

Определяет карту изображения, которая представляет собой изображение с интерактивными областями.

<картинка>

Предоставляет контейнер для нескольких элементов <source> и одного элемента <img>, чтобы предлагать различные версии изображений для различных сценариев отображения (например, для различных размеров экрана или разрешений)

<источник>

Указывает несколько медиаресурсов для элементов <audio>, <video> или <picture>. Этот тег позволяет браузеру выбрать первый поддерживаемый им формат.

<трек>

Указывает синхронизированные текстовые дорожки (субтитры, титры, описания, главы или метаданные) для элементов <video> или <audio>

<видео>

Встраивает видеоплеер для отображения видеоконтента. Атрибуты могут управлять воспроизведением, размерами и т. д.

Список тегов для организации контента
Теги списков используются для представления информации в структурированном виде, что облегчает пользователям чтение и понимание контента.

Ярлык

Описание

<дд>

Описывает термин в списке описаний (<dl>)

<дл>

Создает список описаний, представляющий собой список терминов и соответствующих им описаний.

<дт>

Определяет термин в списке описаний (<dl>)

<ли>

Представляет элемент списка в упорядоченном (<ol>) или неупорядоченном (<ul>) списке.

<ол>

Создает упорядоченный (нумерованный) список

<ул>

Создает неупорядоченный (маркированный) список

Теги таблиц для представления данных
Теги таблиц можно использовать для структурирования и отображения данных в табличном формате со строками и столбцами.

Ярлык

Описание

<подпись>

Определяет заголовок или подпись для таблицы.

<кол>

Определяет свойства для каждого столбца таблицы в элементе <colgroup>. Например, чтобы сделать весь текст в первом столбце таблицы жирным, а текст во втором столбце выровнять по правому краю.

<colgroup>

Указывает группу из одного или нескольких столбцов в таблице для форматирования. Например, установка определенного цвета фона для всех ячеек в определенном столбце таблицы с использованием <col> в <colgroup>.

<таблица>

Создает таблицу в HTML-документе

<тело>

Группирует содержимое тела в таблице. Рассматривайте <tbody> как основную часть вашей таблицы, содержащую фактические строки данных.

<тд>

Определяет стандартную ячейку данных в строке таблицы.

<tfoot>

Группирует содержимое нижнего колонтитула в таблице. Думайте об этом теге как о маркировке нижней части вашей таблицы, часто используемой для сводок или общих итогов.

<й>

Определяет ячейку заголовка в строке таблицы. Обычно используется для первой строки или столбца для указания заголовков.

<заголовок>

Группирует содержимое заголовка в таблице. Представьте <thead> в качестве верхней части таблицы, обычно содержащей заголовки столбцов.

<тр>

Определяет строку в таблице.

Теги форм для обеспечения взаимодействия с пользователем
Теги форм используются для создания интерактивных форм, которые позволяют пользователям вводить и отправлять данные.

Ярлык

Описание

<кнопка>

Определяет кнопку, на которую можно нажать, в форме или на веб-странице.

<список_данных>

Предлагает список тегов <option> в качестве вариантов для полей ввода. Это часто используется для автозаполнения.

<набор_полей>

Создает визуальную группировку для связанных полей ввода в форме.

<форма>

Создает HTML-форму, которую заполняют пользователи

<вход>

Создает место на форме, где пользователи могут вводить данные или делать выбор. «Тип» тега сообщает браузеру, какой это тип ввода, например текстовое поле, поле пароля или кнопка.

<метка>

Связывает метку с элементом ввода. Например, нажатие на текст «Адрес электронной почты» переведет фокус на соответствующее поле ввода электронной почты.

<легенда>

Представляет заголовок для содержимого элемента <fieldset>.

<метр>

Показывает значение на шкале, например, уровень топлива или релевантность результата поиска.

<optgroup>

Визуально организует связанные параметры в раскрывающемся списке (<select>). Что облегчает пользователям навигацию по длинным спискам, таким как раскрывающийся список для выбора автомобиля с заголовками для разных производителей.

<вариант>

Определяет элемент, содержащийся в элементе <select>, <optgroup> или <datalist>, представляющий выбираемый параметр.

<выход>

Элемент-контейнер для отображения результатов расчета или действия пользователя.

<прогресс>

Отображает индикатор, показывающий прогресс в выполнении задачи

<выбрать>

Определяет раскрывающийся список, позволяющий выбирать из меню вариантов

<текстовая область>

Создает многострочное поле формы, позволяющее пользователям вводить более длинные сообщения.

Другие важные теги HTML
В эту таблицу включены дополнительные HTML-теги, которые служат различным целям при веб-разработке и структурировании контента.

Ярлык

Описание

<аббр>

Представляет собой аббревиатуру или акроним. Часто имеет атрибут title, предоставляющий полную форму.

<адрес>

Указывает контактную информацию лица или организации, ответственной за документ.

<блокцитата>

Обозначает расширенную цитату и часто отображается с отступом.

<холст>

Предоставляет контейнер для рисования графики и анимации с использованием JavaScript.

<цитата>

Используется для разметки названия творческого произведения (например, книги, фильма или песни)

<код>

Отображает свое содержимое как короткий фрагмент компьютерного кода.

<дел>

Представляет текст, удаленный из документа.

<подробности>

Создает виджет раскрытия информации, в котором информация видна только в открытом состоянии.

<диалог>

Представляет собой диалоговое окно или другой интерактивный компонент.

<ins>

Представляет текст, вставленный в документ.

<КБД>

Представляет собой пользовательский ввод с клавиатуры, голосовой ввод или другое устройство ввода текста.

<математика>

Элемент верхнего уровня для контента MathML, который используется для отображения математических формул. MathML — это язык разметки, позволяющий браузерам отображать уравнения и формулы на веб-страницах.

<пред>

Представляет собой предварительно отформатированный текст, который отображается точно так же, как он написан в HTML-файле, с сохранением пробелов и переносов строк.

<q>

Указывает на короткую встроенную цитату.

<сэмплер>

Используется для включения встроенного текста, представляющего пример выходных данных компьютерной программы.

<слот>

Заполнитель внутри веб-компонента, который разработчики могут заполнить собственным HTML. Это делает компонент высокоадаптируемым и повторно используемым в различных контекстах.

<маленький>

Представляет собой побочные комментарии и мелкий шрифт. Как авторские права и юридический текст.

<sub>

Указывает встроенный текст, который должен отображаться как подстрочный индекс. Вы можете использовать тег <sub> для отображения химических формул, таких как "H₂O", или математических подстрочных индексов, таких как "2" в "log₂x".

<резюме>

Указывает краткое содержание или заголовок для поля раскрытия элемента <details>

<sup>

Указывает встроенный текст, который должен отображаться как верхний индекс. Используйте тег <sup> для отображения порядковых указателей, таких как "st" в "1st", показателей степени, таких как "2" в "x²", или ссылок на сноски в тексте.

<свг>

Определяет контейнер для встраивания масштабируемой векторной графики (SVG) — векторного формата изображений на основе XML для двухмерной графики — непосредственно в HTML-документы.

<шаблон>

Механизм для хранения HTML, который не отображается немедленно, но может быть создан позже с помощью JavaScript.

<время>

Представляет определенный период времени. Вы можете использовать этот тег для семантической разметки дат и времени на своей веб-странице, что упрощает их понимание поисковыми системами

<вар>

Указывает текст, представляющий переменную. Например, для математических уравнений или в примерах кода.

<вбр>

Представляет возможность переноса слов, которая позволяет браузеру разбить длинное слово на несколько строк, если это необходимо для его размещения в контейнере.

Как проверить HTML-теги ваших страниц
Вот пошаговое руководство по проверке HTML-тегов с помощью Google Chrome (процесс очень похож в других популярных браузерах):

Откройте веб-страницу, которую вы хотите проверить, в Google Chrome.
Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите в меню « Проверить ». Это вызовет инструменты разработчика Chrome с открытой вкладкой «Элементы».
Нажмите «Ctrl + F» (в Windows) или «Cmd + F» (в Mac), чтобы открыть строку поиска, затем введите имя тега (например, «<title>») или атрибута (например, class="item", id="main"), который вы ищете. Имейте в виду, что поиск может также выделить поисковый термин в текстовом содержимом.
Панель инструментов разработчика, на которой отображается HTML-тег заголовка для записи в блоге с использованием инструмента поиска.
Этот метод полезен, если вы знаете, что ищете.

Если вы новичок в работе с HTML-тегами или просто хотите упростить аудит, попробуйте воспользоваться инструментом аудита сайта Semrush, чтобы убедиться, что основные HTML-теги и атрибуты настроены правильно.

Следуйте инструкциям по настройке проекта, а затем откройте его и перейдите к отчету «Обзор».

Обзор полного отчета по аудиту сайта, показывающий общее состояние сайта, общее количество просканированных страниц, количество ошибок и предупреждений, а также оценки по ключевым категориям SEO, таким как возможность сканирования и производительность.
Теперь нажмите на вкладку « Проблемы » и введите «тег» в поле поиска.

Инструмент аудита сайта со стрелкой, указывающей на открытие вкладки «Проблемы», и фильтром поиска, примененным к «тегу», показывающим критические ошибки SEO, включая дублирующиеся теги заголовков и метаописания.
После этого вы сможете увидеть, есть ли на вашем сайте важные HTML-теги и атрибуты, которые необходимо учесть.

Нажмите « Почему и как это исправить » рядом с любой проблемой, чтобы узнать о ней больше и получить советы по ее решению.

В Semrush Site Audit открыто поле с пояснениями по проблемам с дублированием тегов заголовков, слева подробно описывается проблема, а справа предлагаются советы по оптимизации заголовков на основе ключевых слов.
Попробуйте Site Audit бесплатно уже сегодня.