#12-Правка текста поста

'#8. Посты : posts';

'Blog_PostController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

Понимание полного спектра HTML-тегов полезно не только для расширения ваших технических знаний &ndash; оно имеет основополагающее значение для обеспечения хорошего пользовательского опыта, улучшения доступности и достижения положительных результатов SEO.
К концу этого поста вы получите полное представление о тегах HTML, которые вы можете использовать на своем веб-сайте.
Но давайте сначала рассмотрим основы.&nbsp;
<h2>Что такое HTML-теги?</h2>
HTML-теги &ndash; это основные строительные блоки веб-страниц, которые сообщают веб-браузерам, как отображать и форматировать контент.
Например, приведенный ниже тег сообщает браузеру о необходимости включить ссылку на статью, объясняющую SEO, и разместить ее над текстом &laquo;поисковая оптимизация (SEO)&raquo;.
<code>&lt;a href="<a href="https://shopnseo.ru/posts/sayty/hosting/">https://shopnseo.ru/posts/sayty/hosting/</a>"&gt;Что такое хостинг&lt;/a&gt;</code>
Вот как будет выглядеть эта ссылка в опубликованном сообщении в блоге:
<img class="img-fluid" src="https://static.shopnseo.ru/uploads/tags.webp" alt="Выделенная ссылка в статье блога, показывающая, как тег-анкор используется в активном сообщении блога." title="Выделенная ссылка в статье блога, показывающая, как тег-анкор используется в активном сообщении блога." width="631" height="81" loading="lazy">
В этом примере:
<ul>
<li>&laquo;&lt;a&gt;&raquo; &ndash; это элемент, т. е. фундаментальный строительный блок, включающий сам тег и заключенное в нем содержимое.&nbsp;</li>
<li>&laquo;href&raquo; &ndash; атрибут , указывающий место назначения ссылки.</li>
<li>&laquo;<code>Что такое хостинг</code>&raquo; &ndash; это содержимое тега.&nbsp;</li>
</ul>
В случае ссылки, как в этом примере, она будет отображаться как текст якоря . HTML-теги всегда имеют элемент. Они могут иметь один или несколько атрибутов. Некоторые, например элементы &lt;a&gt;, имеют содержимое.
<h2>Наиболее распространенные и полезные теги HTML</h2>
<div class="table-container">
<h2 class="section-title">Семантические HTML-теги для передачи структуры</h2>
Следующая таблица содержит набор семантических тегов, которые описывают смысловое значение содержимого, которое они заключают в себе.
Используйте эту семантическую разметку для улучшения доступности и предоставления дополнительного контекста для поисковых систем.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;article&gt;</code></td>
<td>Представьте этот тег как контейнер для самостоятельного фрагмента контента (например, записи блога или новостной статьи), который имеет смысл даже если его отделить от остальной части страницы</td>
</tr>
<tr>
<td><code>&lt;aside&gt;</code></td>
<td>Обозначает контент, который косвенно связан с окружающим его содержимым и часто отображается как боковая панель</td>
</tr>
<tr>
<td><code>&lt;figcaption&gt;</code></td>
<td>Представляет подпись или легенду, описывающую содержимое элемента <code>&lt;figure&gt;</code></td>
</tr>
<tr>
<td><code>&lt;figure&gt;</code></td>
<td>Обозначает самостоятельное содержимое, на которое ссылаются в основной части документа. Это может быть изображение, иллюстрация, диаграмма, фрагмент кода и т.д.</td>
</tr>
<tr>
<td><code>&lt;footer&gt;</code></td>
<td>Обозначает подвал, который обычно содержит информацию об авторе, авторских правах, правовых уведомлениях и связанных ссылках</td>
</tr>
<tr>
<td><code>&lt;header&gt;</code></td>
<td>Указывает на вводное содержимое для страницы или раздела. Обычно содержит логотип, заголовок и потенциально навигацию</td>
</tr>
<tr>
<td><code>&lt;main&gt;</code></td>
<td>Представляет доминирующее содержимое. На странице должен быть только один элемент <code>&lt;main&gt;</code></td>
</tr>
<tr>
<td><code>&lt;nav&gt;</code></td>
<td>Содержит навигационные ссылки. Предназначен для основных навигационных разделов</td>
</tr>
<tr>
<td><code>&lt;section&gt;</code></td>
<td>Представляет тематическую группу контента, обычно с заголовком. Это общий элемент для разделения, который следует использовать, когда более специфический семантический элемент не подходит</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Базовые структурные теги для установления общей конструкции</h2>
Следующие базовые структурные теги необходимы для установления фундаментального каркаса любого HTML-документа.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;!DOCTYPE&gt;</code></td>
<td>Объявляет тип документа (например, HTML5), чтобы обеспечить правильное отображение страницы современными веб-браузерами</td>
</tr>
<tr>
<td><code>&lt;base&gt;</code></td>
<td>Указывает базовый URL для всех относительных URL в HTML-документе. Этот тег полезен, когда многие ссылки на странице имеют общий путь</td>
</tr>
<tr>
<td><code>&lt;body&gt;</code></td>
<td>Содержит весь видимый контент HTML-документа. Включает текст, изображения, ссылки и все другие элементы, которые увидят пользователи</td>
</tr>
<tr>
<td><code>&lt;html&gt;</code></td>
<td>Представляет корневой элемент HTML-документа. Он инкапсулирует весь остальной HTML-контент на странице</td>
</tr>
<tr>
<td><code>&lt;head&gt;</code></td>
<td>Содержит метаданные о HTML-документе. Включает заголовок документа, кодировку символов, ссылки на таблицы стилей и другие метаданные, используемые браузерами и поисковыми системами</td>
</tr>
<tr>
<td><code>&lt;link&gt;</code></td>
<td>Устанавливает связь между текущим HTML-документом и внешним ресурсом. Чаще всего используется для ссылки на внешние CSS-таблицы стилей, которые контролируют визуальное представление</td>
</tr>
<tr>
<td><code>&lt;meta&gt;</code></td>
<td>Предоставляет структурированные метаданные о HTML-документе, такие как краткое описание содержимого страницы, которое может использоваться поисковыми системами в сниппетах результатов поиска</td>
</tr>
<tr>
<td><code>&lt;noscript&gt;</code></td>
<td>Определяет контент, который будет отображаться, если браузеры пользователей не поддерживают скрипты или если скрипты отключены. Это обеспечивает доступ к базовому контенту для пользователей без рендеринга JavaScript</td>
</tr>
<tr>
<td><code>&lt;style&gt;</code></td>
<td>Содержит CSS-правила, которые применяются непосредственно к HTML-документу. Ссылка на внешние таблицы стилей часто предпочтительна для больших проектов и лучшей организации</td>
</tr>
<tr>
<td><code>&lt;script&gt;</code></td>
<td>Используется для встраивания или ссылки на исполняемые скрипты, такие как JavaScript, который добавляет интерактивность и динамичное поведение веб-страницам</td>
</tr>
<tr>
<td><code>&lt;title&gt;</code></td>
<td>Определяет заголовок HTML-документа. Этот заголовок появляется во вкладке браузера и может отображаться на страницах результатов поисковых систем (SERP). Это фактор ранжирования для Google Search</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Теги контента и форматирования текста для определения общего вида</h2>
Эти теги контента и форматирования текста устанавливают основную структуру и стиль контента, чтобы сделать его легким для чтения и взаимодействия.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;a&gt;</code></td>
<td>Создает гиперссылку на другие веб-страницы, файлы, местоположения в пределах той же страницы или адреса электронной почты. Атрибут "href" указывает назначение ссылки</td>
</tr>
<tr>
<td><code>&lt;br&gt;</code></td>
<td>Вставляет одинарный разрыв строки</td>
</tr>
<tr>
<td><code>&lt;div&gt;</code></td>
<td>Определяет раздел или секцию. Часто используется как контейнер для группировки других HTML-элементов для стилизации с помощью CSS</td>
</tr>
<tr>
<td><code>&lt;em&gt;</code></td>
<td>Представляет подчеркнутый текст, обычно отображается курсивом</td>
</tr>
<tr>
<td><code>&lt;h1&gt;</code> до <code>&lt;h6&gt;</code></td>
<td>Определяют заголовки, где <code>&lt;h1&gt;</code> представляет самый важный заголовок, а <code>&lt;h6&gt;</code> - наименее важный. Эти теги критически важны для создания иерархии контента и сигнализирования важности пользователям и поисковым системам</td>
</tr>
<tr>
<td><code>&lt;hr&gt;</code></td>
<td>Представляет тематический разрыв в контенте, часто отображается как горизонтальная линия</td>
</tr>
<tr>
<td><code>&lt;img&gt;</code></td>
<td>Встраивает изображение в документ. Атрибут "src" указывает путь к изображению, а атрибут "alt" предоставляет альтернативный текст, который кратко описывает изображение</td>
</tr>
<tr>
<td><code>&lt;p&gt;</code></td>
<td>Представляет абзац текста. Используется для разделения блоков текста для улучшения читаемости</td>
</tr>
<tr>
<td><code>&lt;span&gt;</code></td>
<td>Встроенный контейнер, используемый для разметки части HTML-документа. Часто используется для стилизации определенных частей текста с помощью CSS</td>
</tr>
<tr>
<td><code>&lt;strong&gt;</code></td>
<td>Создает сильно выделенный текст, обычно отображается жирным шрифтом</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Теги изображений и мультимедиа для включения визуальных элементов</h2>
Используйте теги изображений и мультимедиа в следующей таблице для встраивания и управления визуальным и звуковым контентом на веб-странице.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;area&gt;</code></td>
<td>Определяет кликабельную область в карте изображения</td>
</tr>
<tr>
<td><code>&lt;audio&gt;</code></td>
<td>Используется для встраивания звукового контента в HTML-документ. Может включать атрибуты для элементов управления (воспроизведение, пауза, громкость и т.д.), автовоспроизведения и зацикливания</td>
</tr>
<tr>
<td><code>&lt;img&gt;</code></td>
<td>Встраивает изображение в HTML-документ. Атрибут "src" указывает путь к изображению, а атрибут "alt" предоставляет краткое описание изображения</td>
</tr>
<tr>
<td><code>&lt;map&gt;</code></td>
<td>Определяет карту изображения, которая представляет собой изображение с кликабельными областями</td>
</tr>
<tr>
<td><code>&lt;picture&gt;</code></td>
<td>Предоставляет контейнер для нескольких элементов <code>&lt;source&gt;</code> и одного элемента <code>&lt;img&gt;</code> для предложения различных версий изображений для различных сценариев отображения (например, для разных размеров экрана или разрешений)</td>
</tr>
<tr>
<td><code>&lt;source&gt;</code></td>
<td>Указывает несколько медиа-ресурсов для элементов <code>&lt;audio&gt;</code>, <code>&lt;video&gt;</code> или <code>&lt;picture&gt;</code>. Этот тег позволяет браузеру выбрать первый поддерживаемый им формат</td>
</tr>
<tr>
<td><code>&lt;track&gt;</code></td>
<td>Указывает временные текстовые дорожки (субтитры, подписи, описания, главы или метаданные) для элементов <code>&lt;video&gt;</code> или <code>&lt;audio&gt;</code></td>
</tr>
<tr>
<td><code>&lt;video&gt;</code></td>
<td>Встраивает видеоплеер для отображения видеоконтента. Атрибуты могут контролировать воспроизведение, размеры и многое другое</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Теги списков для организации контента</h2>
Теги списков используются для представления информации в структурированном виде, что облегчает пользователям чтение и понимание контента.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;dd&gt;</code></td>
<td>Описывает термин в списке определений (<code>&lt;dl&gt;</code>)</td>
</tr>
<tr>
<td><code>&lt;dl&gt;</code></td>
<td>Создает список определений, который представляет собой список терминов и соответствующих им описаний</td>
</tr>
<tr>
<td><code>&lt;dt&gt;</code></td>
<td>Определяет термин в списке определений (<code>&lt;dl&gt;</code>)</td>
</tr>
<tr>
<td><code>&lt;li&gt;</code></td>
<td>Представляет элемент списка в упорядоченном (<code>&lt;ol&gt;</code>) или неупорядоченном (<code>&lt;ul&gt;</code>) списке</td>
</tr>
<tr>
<td><code>&lt;ol&gt;</code></td>
<td>Создает упорядоченный (нумерованный) список</td>
</tr>
<tr>
<td><code>&lt;ul&gt;</code></td>
<td>Создает неупорядоченный (маркированный) список</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Теги таблиц для представления данных</h2>
Теги таблиц могут использоваться для структурирования и отображения данных в табличном формате со строками и столбцами.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;caption&gt;</code></td>
<td>Определяет заголовок или подпись для таблицы</td>
</tr>
<tr>
<td><code>&lt;col&gt;</code></td>
<td>Определяет свойства для каждого столбца таблицы в элементе <code>&lt;colgroup&gt;</code>. Например, чтобы сделать весь текст в первом столбце таблицы жирным, а текст во втором столбце выровненным по правому краю</td>
</tr>
<tr>
<td><code>&lt;colgroup&gt;</code></td>
<td>Указывает группу из одного или нескольких столбцов в таблице для форматирования. Например, установка определенного цвета фона для всех ячеек в конкретном столбце таблицы с использованием <code>&lt;col&gt;</code> внутри <code>&lt;colgroup&gt;</code></td>
</tr>
<tr>
<td><code>&lt;table&gt;</code></td>
<td>Создает таблицу в HTML-документе</td>
</tr>
<tr>
<td><code>&lt;tbody&gt;</code></td>
<td>Группирует основное содержимое в таблице. Рассматривайте <code>&lt;tbody&gt;</code> как основную часть вашей таблицы, содержащую фактические строки данных</td>
</tr>
<tr>
<td><code>&lt;td&gt;</code></td>
<td>Определяет стандартную ячейку данных в строке таблицы</td>
</tr>
<tr>
<td><code>&lt;tfoot&gt;</code></td>
<td>Группирует содержимое подвала в таблице. Представьте этот тег как маркер нижней секции вашей таблицы, часто используемой для резюме или общих итогов</td>
</tr>
<tr>
<td><code>&lt;th&gt;</code></td>
<td>Определяет ячейку заголовка в строке таблицы. Обычно используется для первой строки или столбца для указания заголовков</td>
</tr>
<tr>
<td><code>&lt;thead&gt;</code></td>
<td>Группирует содержимое заголовка в таблице. Представьте <code>&lt;thead&gt;</code> как верхнюю секцию вашей таблицы, обычно содержащую заголовки столбцов</td>
</tr>
<tr>
<td><code>&lt;tr&gt;</code></td>
<td>Определяет строку в таблице</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Теги форм для обеспечения взаимодействия с пользователем</h2>
Теги форм используются для создания интерактивных форм, которые позволяют пользователям вводить и отправлять данные.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;button&gt;</code></td>
<td>Определяет кликабельную кнопку в форме или на веб-странице</td>
</tr>
<tr>
<td><code>&lt;datalist&gt;</code></td>
<td>Предлагает список тегов <code>&lt;option&gt;</code> как варианты для полей ввода. Часто используется для функциональности автозаполнения</td>
</tr>
<tr>
<td><code>&lt;fieldset&gt;</code></td>
<td>Создает визуальную группировку для связанных полей ввода в форме</td>
</tr>
<tr>
<td><code>&lt;form&gt;</code></td>
<td>Создает HTML-форму, которую заполняют пользователи</td>
</tr>
<tr>
<td><code>&lt;input&gt;</code></td>
<td>Создает место на форме, где пользователи могут что-то вводить или делать выбор. Атрибут "type" тега сообщает браузеру, какой это тип ввода - текстовое поле, поле пароля или кнопка</td>
</tr>
<tr>
<td><code>&lt;label&gt;</code></td>
<td>Связывает метку с элементом ввода. Например, клик по тексту "Адрес электронной почты" сфокусирует соответствующее поле ввода email</td>
</tr>
<tr>
<td><code>&lt;legend&gt;</code></td>
<td>Представляет подпись для содержимого элемента <code>&lt;fieldset&gt;</code></td>
</tr>
<tr>
<td><code>&lt;meter&gt;</code></td>
<td>Показывает значение на шкале, например, индикатор топлива или насколько релевантен результат поиска</td>
</tr>
<tr>
<td><code>&lt;optgroup&gt;</code></td>
<td>Визуально организует связанные опции в выпадающем списке (<code>&lt;select&gt;</code>). Облегчает пользователям навигацию по длинным спискам, например, выпадающий список для выбора автомобиля с заголовками для разных производителей</td>
</tr>
<tr>
<td><code>&lt;option&gt;</code></td>
<td>Определяет элемент, содержащийся в <code>&lt;select&gt;</code>, <code>&lt;optgroup&gt;</code> или <code>&lt;datalist&gt;</code>, представляющий выбираемую опцию</td>
</tr>
<tr>
<td><code>&lt;output&gt;</code></td>
<td>Контейнерный элемент для отображения результатов вычисления или действия пользователя</td>
</tr>
<tr>
<td><code>&lt;progress&gt;</code></td>
<td>Отображает индикатор, показывающий прогресс выполнения задачи</td>
</tr>
<tr>
<td><code>&lt;select&gt;</code></td>
<td>Определяет выпадающий список, который позволяет выбирать из меню опций</td>
</tr>
<tr>
<td><code>&lt;textarea&gt;</code></td>
<td>Создает многострочное поле формы, которое позволяет пользователям вводить более длинные сообщения</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="table-container">
<h2 class="section-title">Другие важные HTML-теги</h2>
Эта таблица включает дополнительные HTML-теги, которые служат различным целям в веб-разработке и структурировании контента.
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
<th scope="col">Тег</th>
<th scope="col">Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>&lt;abbr&gt;</code></td>
<td>Представляет сокращение или акроним. Часто имеет атрибут title, предоставляющий полную форму</td>
</tr>
<tr>
<td><code>&lt;address&gt;</code></td>
<td>Указывает контактную информацию для лица или организации, ответственной за документ</td>
</tr>
<tr>
<td><code>&lt;blockquote&gt;</code></td>
<td>Указывает на расширенную цитату и часто отображается с отступом</td>
</tr>
<tr>
<td><code>&lt;canvas&gt;</code></td>
<td>Предоставляет контейнер для рисования графики и анимации с использованием JavaScript</td>
</tr>
<tr>
<td><code>&lt;cite&gt;</code></td>
<td>Используется для разметки названия творческого произведения (например, книги, фильма или песни)</td>
</tr>
<tr>
<td><code>&lt;code&gt;</code></td>
<td>Отображает свое содержимое как короткий фрагмент компьютерного кода</td>
</tr>
<tr>
<td><code>&lt;del&gt;</code></td>
<td>Представляет текст, который был удален из документа</td>
</tr>
<tr>
<td><code>&lt;details&gt;</code></td>
<td>Создает виджет раскрытия, где информация видна только при переключении в открытое состояние</td>
</tr>
<tr>
<td><code>&lt;dialog&gt;</code></td>
<td>Представляет диалоговое окно или другой интерактивный компонент</td>
</tr>
<tr>
<td><code>&lt;ins&gt;</code></td>
<td>Представляет текст, который был вставлен в документ</td>
</tr>
<tr>
<td><code>&lt;kbd&gt;</code></td>
<td>Представляет пользовательский ввод с клавиатуры, голосовой ввод или другое устройство ввода текста</td>
</tr>
<tr>
<td><code>&lt;math&gt;</code></td>
<td>Элемент верхнего уровня для контента MathML, который используется для отображения математических формул. MathML - это язык разметки, позволяющий браузерам отображать уравнения и формулы на веб-страницах</td>
</tr>
<tr>
<td><code>&lt;pre&gt;</code></td>
<td>Представляет предварительно отформатированный текст, который отображается точно так, как написан в HTML-файле, для сохранения пробелов и разрывов строк</td>
</tr>
<tr>
<td><code>&lt;q&gt;</code></td>
<td>Указывает на короткую встроенную цитату</td>
</tr>
<tr>
<td><code>&lt;samp&gt;</code></td>
<td>Используется для заключения встроенного текста, представляющего образец вывода компьютерной программы</td>
</tr>
<tr>
<td><code>&lt;slot&gt;</code></td>
<td>Заполнитель внутри веб-компонента, который разработчики могут заполнить своим собственным HTML. Это делает компонент высоко адаптируемым и многоразовым в различных контекстах</td>
</tr>
<tr>
<td><code>&lt;small&gt;</code></td>
<td>Представляет побочные комментарии и мелкий шрифт. Например, авторские права и правовой текст</td>
</tr>
<tr>
<td><code>&lt;sub&gt;</code></td>
<td>Указывает встроенный текст, который должен отображаться как подстрочный индекс. Вы можете использовать тег <code>&lt;sub&gt;</code> для отображения химических формул как "H₂O" или математических подстрочных индексов как "2" в "log₂x"</td>
</tr>
<tr>
<td><code>&lt;summary&gt;</code></td>
<td>Указывает резюме или заголовок для поля раскрытия элемента <code>&lt;details&gt;</code></td>
</tr>
<tr>
<td><code>&lt;sup&gt;</code></td>
<td>Указывает встроенный текст, который должен отображаться как надстрочный индекс. Используйте тег <code>&lt;sup&gt;</code> для отображения порядковых индикаторов как "й" в "1-й", степеней как "2" в "x&sup2;", или ссылок на сноски в вашем тексте</td>
</tr>
<tr>
<td><code>&lt;svg&gt;</code></td>
<td>Определяет контейнер для встраивания масштабируемой векторной графики (SVG) - формата векторных изображений на основе XML для двумерной графики - непосредственно в HTML-документы</td>
</tr>
<tr>
<td><code>&lt;template&gt;</code></td>
<td>Механизм для хранения HTML, который не отображается немедленно, но может быть создан позже с использованием JavaScript</td>
</tr>
<tr>
<td><code>&lt;time&gt;</code></td>
<td>Представляет определенный период времени. Используется для семантической разметки дат и времени на веб-странице, что облегчает поисковым системам их понимание</td>
</tr>
<tr>
<td><code>&lt;var&gt;</code></td>
<td>Указывает текст, представляющий переменную. Например, для математических уравнений или в примерах кода</td>
</tr>
<tr>
<td><code>&lt;wbr&gt;</code></td>
<td>Представляет возможность разрыва слова, которая позволяет браузеру разделить длинное слово на несколько строк, если это необходимо для размещения в контейнере</td>
</tr>
</tbody>
</table>
</div>
</div>
Прежде чем погрузиться в наш полный список HTML-тегов, давайте познакомимся с ними и рассмотрим несколько вариантов их использования.
На рисунке ниже показаны наиболее распространенные и полезные HTML-теги, которые могут появляться на трех различных типах страниц:
<ul>
<li>Домашняя страница: в основном ориентирована на навигацию и выделение ключевых частей бизнеса.</li>
<li>Запись в блоге: нацелена на представление записи в блоге в ясной и логичной форме.</li>
<li>Целевая страница: направлена на передачу преимуществ и конвертацию пользователей.</li>
</ul>
Вы увидите некоторые теги, которые используются во всех трех, но для разных целей (указаны в скобках). И вы увидите некоторые теги, которые специфичны для каждого типа страницы.
Поэтому в следующий раз, когда вы соберетесь опубликовать домашнюю страницу, запись в блоге или целевую страницу, проверьте, присутствуют ли на вашей странице все важные теги.
<img src="https://static.shopnseo.ru/uploads/mceu_85143430011748609284586.webp" loading="lazy">
Инфографика, сравнивающая основные теги HTML для маркетологов. Показывает ключевые теги для домашних страниц, сообщений в блогах и целевых страниц.
&nbsp;
&nbsp;
Семантические HTML-теги для передачи структуры В следующей таблице представлен набор семантических тегов, описывающих значение содержащегося в них содержимого.&nbsp;
Используйте эту семантическую разметку для улучшения доступности и предоставления дополнительного контекста для поисковых систем.
Ярлык
Описание
&lt;статья&gt;
Думайте об этом теге как о контейнере для отдельного фрагмента контента (например, записи в блоге или новостной статьи), который имеет смысл, даже если он отделен от остальной части страницы.
&lt;в сторону&gt;
Обозначает контент, который косвенно связан с окружающим его контентом и часто отображается в виде боковой панели.
&lt;figcaption&gt;
Представляет собой заголовок или легенду, описывающую содержимое элемента &lt;figure&gt;
&lt;рисунок&gt;
Обозначает самостоятельный контент, на который есть ссылка в основной части документа. Это может быть изображение, иллюстрация, диаграмма, фрагмент кода и т. д.
&lt;нижний колонтитул&gt;
Обозначает нижний колонтитул, который обычно содержит информацию об авторе, авторских правах, юридических уведомлениях и связанных ссылках.
&lt;заголовок&gt;
Указывает на вводный контент страницы или раздела. Обычно содержит логотип, заголовок и потенциально навигацию.
&lt;главный&gt;
Представляет доминирующее содержимое. На странице должен быть только один элемент &lt;main&gt;.
&lt;нав&gt;
Содержит навигационные ссылки. Предназначен для основных навигационных разделов.
&lt;раздел&gt;
Представляет тематическую группу контента, обычно с заголовком. Это общий элемент секционирования, который следует использовать, когда более конкретный семантический элемент не подходит.
Базовые структурные теги для создания общей конструкции Следующие основные структурные теги необходимы для создания фундаментальной основы любого HTML-документа.&nbsp;
Ярлык
Описание
&lt;!DOCTYPE&gt;
Объявляет тип документа (например, HTML5), чтобы гарантировать, что современные веб-браузеры визуализируют (т. е. отображают) страницу так, как задумано
&lt;база&gt;
Указывает базовый URL для всех относительных URL в документе HTML. Этот тег полезен, когда многие ссылки на странице имеют общий путь.
&lt;тело&gt;
Содержит весь видимый контент в документе HTML. Включает текст, изображения, ссылки и все другие элементы, которые увидят пользователи.
&lt;html&gt;
Представляет корневой элемент HTML-документа. Он инкапсулирует все остальное HTML-содержимое на странице.
&lt;голова&gt;
Содержит метаданные о документе HTML. Сюда входят заголовок документа, набор символов, ссылки на таблицы стилей и другие метаданные, используемые браузерами и поисковыми системами.
&lt;ссылка&gt;
Устанавливает связь между текущим HTML-документом и внешним ресурсом. Чаще всего используется для ссылки на внешние таблицы стилей CSS, которые управляют визуальным представлением.
&lt;мета&gt;
Предоставляет структурированные метаданные о HTML-документе, такие как краткое описание содержимого страницы, которое может использоваться поисковыми системами в фрагментах результатов поиска.
&lt;нет скрипта&gt;
Определяет контент, который будет отображаться, если браузеры пользователей не поддерживают скрипты или скрипты отключены. Это гарантирует, что пользователи без рендеринга JavaScript смогут получить доступ к базовому контенту.
&lt;стиль&gt;
Содержит правила CSS, которые применяются непосредственно к HTML-документу. Ссылки на внешние таблицы стилей часто предпочтительны для более крупных проектов и лучшей организации.
&lt;скрипт&gt;
Используется для встраивания или ссылки на исполняемые скрипты, такие как JavaScript . Что добавляет интерактивность и динамическое поведение веб-страницам.
&lt;название&gt;
Определяет заголовок HTML-документа. Этот заголовок отображается на вкладке браузера и может отображаться на страницах результатов поисковой системы (SERP) . Это фактор ранжирования для поиска Google.
Теги форматирования контента и текста для определения общего вида Эти теги форматирования контента и текста устанавливают основную структуру и стиль контента, чтобы его было легко читать и с ним было удобно работать.
Ярлык
Описание
&lt;а&gt;
Создает гиперссылку на другие веб-страницы, файлы, местоположения на той же странице или адреса электронной почты. Атрибут &laquo;href&raquo; указывает место назначения ссылки.
&lt;br&gt;
Вставляет одиночный перенос строки
&lt;div&gt;
Определяет раздел или секцию. Часто используется как контейнер для группировки других элементов HTML для стилизации с помощью CSS.
&lt;эм&gt;
Представляет собой выделенный текст, обычно отображается курсивом.
&lt;h1&gt; - &lt;h6&gt;
Определите заголовки, где &lt;h1&gt; представляет наиболее важный заголовок, а &lt;h6&gt; &ndash; наименее. Эти теги имеют решающее значение для создания иерархии контента и сигнализации важности для пользователей и поисковых систем.
&lt;ч&gt;
Представляет собой тематический разрыв в содержании, часто отображается в виде горизонтальной линии.
&lt;имг&gt;
Встраивает изображение в документ. Атрибут &laquo;src&raquo; указывает путь к изображению, а атрибут &laquo;alt&raquo; предоставляет альтернативный текст, который кратко описывает изображение.
&lt;р&gt;
Представляет собой абзац текста. Используется для разделения блоков текста с целью улучшения читаемости.
&lt;протяженность&gt;
Встроенный контейнер, используемый для разметки части HTML-документа. Часто используется для стилизации определенных частей текста с помощью CSS.
&lt;strong&gt;
Создает сильно выделенный текст, обычно отображается жирным шрифтом
Теги изображений и мультимедиа для включения визуальных элементов Используйте теги изображений и мультимедиа в следующей таблице для встраивания и управления визуальным и аудиоконтентом на веб-странице.
Ярлык
Описание
&lt;область&gt;
Определяет кликабельную область на карте изображения.
&lt;аудио&gt;
Используется для встраивания звукового контента в HTML-документ. Может включать атрибуты для управления (воспроизведение, пауза, громкость и т. д.), автовоспроизведение и зацикливание.
&lt;имг&gt;
Встраивает изображение в HTML-документ. Атрибут &laquo;src&raquo; указывает путь к изображению, а атрибут &laquo;alt&raquo; предоставляет краткое описание изображения.
&lt;карта&gt;
Определяет карту изображения, которая представляет собой изображение с интерактивными областями.
&lt;картинка&gt;
Предоставляет контейнер для нескольких элементов &lt;source&gt; и одного элемента &lt;img&gt;, чтобы предлагать различные версии изображений для различных сценариев отображения (например, для различных размеров экрана или разрешений)
&lt;источник&gt;
Указывает несколько медиаресурсов для элементов &lt;audio&gt;, &lt;video&gt; или &lt;picture&gt;. Этот тег позволяет браузеру выбрать первый поддерживаемый им формат.
&lt;трек&gt;
Указывает синхронизированные текстовые дорожки (субтитры, титры, описания, главы или метаданные) для элементов &lt;video&gt; или &lt;audio&gt;
&lt;видео&gt;
Встраивает видеоплеер для отображения видеоконтента. Атрибуты могут управлять воспроизведением, размерами и т. д.
Список тегов для организации контента Теги списков используются для представления информации в структурированном виде, что облегчает пользователям чтение и понимание контента.
Ярлык
Описание
&lt;дд&gt;
Описывает термин в списке описаний (&lt;dl&gt;)
&lt;дл&gt;
Создает список описаний, представляющий собой список терминов и соответствующих им описаний.
&lt;дт&gt;
Определяет термин в списке описаний (&lt;dl&gt;)
&lt;ли&gt;
Представляет элемент списка в упорядоченном (&lt;ol&gt;) или неупорядоченном (&lt;ul&gt;) списке.
&lt;ол&gt;
Создает упорядоченный (нумерованный) список
&lt;ул&gt;
Создает неупорядоченный (маркированный) список
Теги таблиц для представления данных Теги таблиц можно использовать для структурирования и отображения данных в табличном формате со строками и столбцами.
Ярлык
Описание
&lt;подпись&gt;
Определяет заголовок или подпись для таблицы.
&lt;кол&gt;
Определяет свойства для каждого столбца таблицы в элементе &lt;colgroup&gt;. Например, чтобы сделать весь текст в первом столбце таблицы жирным, а текст во втором столбце выровнять по правому краю.
&lt;colgroup&gt;
Указывает группу из одного или нескольких столбцов в таблице для форматирования. Например, установка определенного цвета фона для всех ячеек в определенном столбце таблицы с использованием &lt;col&gt; в &lt;colgroup&gt;.
&lt;таблица&gt;
Создает таблицу в HTML-документе
&lt;тело&gt;
Группирует содержимое тела в таблице. Рассматривайте &lt;tbody&gt; как основную часть вашей таблицы, содержащую фактические строки данных.
&lt;тд&gt;
Определяет стандартную ячейку данных в строке таблицы.
&lt;tfoot&gt;
Группирует содержимое нижнего колонтитула в таблице. Думайте об этом теге как о маркировке нижней части вашей таблицы, часто используемой для сводок или общих итогов.
&lt;й&gt;
Определяет ячейку заголовка в строке таблицы. Обычно используется для первой строки или столбца для указания заголовков.
&lt;заголовок&gt;
Группирует содержимое заголовка в таблице. Представьте &lt;thead&gt; в качестве верхней части таблицы, обычно содержащей заголовки столбцов.
&lt;тр&gt;
Определяет строку в таблице.
Теги форм для обеспечения взаимодействия с пользователем Теги форм используются для создания интерактивных форм, которые позволяют пользователям вводить и отправлять данные.
Ярлык
Описание
&lt;кнопка&gt;
Определяет кнопку, на которую можно нажать, в форме или на веб-странице.
&lt;список_данных&gt;
Предлагает список тегов &lt;option&gt; в качестве вариантов для полей ввода. Это часто используется для автозаполнения.
&lt;набор_полей&gt;
Создает визуальную группировку для связанных полей ввода в форме.
&lt;форма&gt;
Создает HTML-форму, которую заполняют пользователи
&lt;вход&gt;
Создает место на форме, где пользователи могут вводить данные или делать выбор. &laquo;Тип&raquo; тега сообщает браузеру, какой это тип ввода, например текстовое поле, поле пароля или кнопка.
&lt;метка&gt;
Связывает метку с элементом ввода. Например, нажатие на текст &laquo;Адрес электронной почты&raquo; переведет фокус на соответствующее поле ввода электронной почты.
&lt;легенда&gt;
Представляет заголовок для содержимого элемента &lt;fieldset&gt;.
&lt;метр&gt;
Показывает значение на шкале, например, уровень топлива или релевантность результата поиска.
&lt;optgroup&gt;
Визуально организует связанные параметры в раскрывающемся списке (&lt;select&gt;). Что облегчает пользователям навигацию по длинным спискам, таким как раскрывающийся список для выбора автомобиля с заголовками для разных производителей.
&lt;вариант&gt;
Определяет элемент, содержащийся в элементе &lt;select&gt;, &lt;optgroup&gt; или &lt;datalist&gt;, представляющий выбираемый параметр.
&lt;выход&gt;
Элемент-контейнер для отображения результатов расчета или действия пользователя.
&lt;прогресс&gt;
Отображает индикатор, показывающий прогресс в выполнении задачи
&lt;выбрать&gt;
Определяет раскрывающийся список, позволяющий выбирать из меню вариантов
&lt;текстовая область&gt;
Создает многострочное поле формы, позволяющее пользователям вводить более длинные сообщения.
Другие важные теги HTML В эту таблицу включены дополнительные HTML-теги, которые служат различным целям при веб-разработке и структурировании контента.
Ярлык
Описание
&lt;аббр&gt;
Представляет собой аббревиатуру или акроним. Часто имеет атрибут title, предоставляющий полную форму.
&lt;адрес&gt;
Указывает контактную информацию лица или организации, ответственной за документ.
&lt;блокцитата&gt;
Обозначает расширенную цитату и часто отображается с отступом.
&lt;холст&gt;
Предоставляет контейнер для рисования графики и анимации с использованием JavaScript.
&lt;цитата&gt;
Используется для разметки названия творческого произведения (например, книги, фильма или песни)
&lt;код&gt;
Отображает свое содержимое как короткий фрагмент компьютерного кода.
&lt;дел&gt;
Представляет текст, удаленный из документа.
&lt;подробности&gt;
Создает виджет раскрытия информации, в котором информация видна только в открытом состоянии.
&lt;диалог&gt;
Представляет собой диалоговое окно или другой интерактивный компонент.
&lt;ins&gt;
Представляет текст, вставленный в документ.
&lt;КБД&gt;
Представляет собой пользовательский ввод с клавиатуры, голосовой ввод или другое устройство ввода текста.
&lt;математика&gt;
Элемент верхнего уровня для контента MathML, который используется для отображения математических формул. MathML &ndash; это язык разметки, позволяющий браузерам отображать уравнения и формулы на веб-страницах.
&lt;пред&gt;
Представляет собой предварительно отформатированный текст, который отображается точно так же, как он написан в HTML-файле, с сохранением пробелов и переносов строк.
&lt;q&gt;
Указывает на короткую встроенную цитату.
&lt;сэмплер&gt;
Используется для включения встроенного текста, представляющего пример выходных данных компьютерной программы.
&lt;слот&gt;
Заполнитель внутри веб-компонента, который разработчики могут заполнить собственным HTML. Это делает компонент высокоадаптируемым и повторно используемым в различных контекстах.
&lt;маленький&gt;
Представляет собой побочные комментарии и мелкий шрифт. Как авторские права и юридический текст.
&lt;sub&gt;
Указывает встроенный текст, который должен отображаться как подстрочный индекс. Вы можете использовать тег &lt;sub&gt; для отображения химических формул, таких как "H₂O", или математических подстрочных индексов, таких как "2" в "log₂x".
&lt;резюме&gt;
Указывает краткое содержание или заголовок для поля раскрытия элемента &lt;details&gt;
&lt;sup&gt;
Указывает встроенный текст, который должен отображаться как верхний индекс. Используйте тег &lt;sup&gt; для отображения порядковых указателей, таких как "st" в "1st", показателей степени, таких как "2" в "x&sup2;", или ссылок на сноски в тексте.
&lt;свг&gt;
Определяет контейнер для встраивания масштабируемой векторной графики (SVG) &ndash; векторного формата изображений на основе XML для двухмерной графики &ndash; непосредственно в HTML-документы.
&lt;шаблон&gt;
Механизм для хранения HTML, который не отображается немедленно, но может быть создан позже с помощью JavaScript.
&lt;время&gt;
Представляет определенный период времени. Вы можете использовать этот тег для семантической разметки дат и времени на своей веб-странице, что упрощает их понимание поисковыми системами
&lt;вар&gt;
Указывает текст, представляющий переменную. Например, для математических уравнений или в примерах кода.
&lt;вбр&gt;
Представляет возможность переноса слов, которая позволяет браузеру разбить длинное слово на несколько строк, если это необходимо для его размещения в контейнере.
Как проверить HTML-теги ваших страниц Вот пошаговое руководство по проверке HTML-тегов с помощью Google Chrome (процесс очень похож в других популярных браузерах):
Откройте веб-страницу, которую вы хотите проверить, в Google Chrome. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите в меню &laquo; Проверить &raquo;. Это вызовет инструменты разработчика Chrome с открытой вкладкой &laquo;Элементы&raquo;. Нажмите &laquo;Ctrl + F&raquo; (в Windows) или &laquo;Cmd + F&raquo; (в Mac), чтобы открыть строку поиска, затем введите имя тега (например, &laquo;&lt;title&gt;&raquo;) или атрибута (например, class="item", id="main"), который вы ищете. Имейте в виду, что поиск может также выделить поисковый термин в текстовом содержимом. Панель инструментов разработчика, на которой отображается HTML-тег заголовка для записи в блоге с использованием инструмента поиска. Этот метод полезен, если вы знаете, что ищете.
Если вы новичок в работе с HTML-тегами или просто хотите упростить аудит, попробуйте воспользоваться инструментом аудита сайта Semrush, чтобы убедиться, что основные HTML-теги и атрибуты настроены правильно.
Следуйте инструкциям по настройке проекта, а затем откройте его и перейдите к отчету &laquo;Обзор&raquo;.
Обзор полного отчета по аудиту сайта, показывающий общее состояние сайта, общее количество просканированных страниц, количество ошибок и предупреждений, а также оценки по ключевым категориям SEO, таким как возможность сканирования и производительность. Теперь нажмите на вкладку &laquo; Проблемы &raquo; и введите &laquo;тег&raquo; в поле поиска.
Инструмент аудита сайта со стрелкой, указывающей на открытие вкладки &laquo;Проблемы&raquo;, и фильтром поиска, примененным к &laquo;тегу&raquo;, показывающим критические ошибки SEO, включая дублирующиеся теги заголовков и метаописания. После этого вы сможете увидеть, есть ли на вашем сайте важные HTML-теги и атрибуты, которые необходимо учесть.
Нажмите &laquo; Почему и как это исправить &raquo; рядом с любой проблемой, чтобы узнать о ней больше и получить советы по ее решению.
В Semrush Site Audit открыто поле с пояснениями по проблемам с дублированием тегов заголовков, слева подробно описывается проблема, а справа предлагаются советы по оптимизации заголовков на основе ключевых слов. Попробуйте Site Audit бесплатно уже сегодня.

Краткое название: Полный список HTML-тегов

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

Активен Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!