HTML теги h2, h3, h4, h5, h5 и h6. Создаем правильные заголовки

• Что такое html тег h2?
  • Пример заголовка h2
  • Пример заголовков h3…h6
• Роль тегов h2…h6 в SEO
• Правильно прописываем заголовок h2
  • Ошибки при написании h2
• Правильно прописываем h3…h6
• h2, h3…h6 для WordPress
• h2, h3…h6 для Joomla!
• h2, h3…h6 для Opencart

Что такое html тег h2…h6?

Теги h2, h3, h4, h5, h5 и h6 представляют из себя заголовки с первого по шестой уровень. Они определяют важность сегмента, который озаглавливают. Градация начинается от h2 — самого приоритетного, и заканчивается h6, который имеет низший приоритет из всех.

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

Заголовков h3…h6 в документе может быть сколько угодно.

Все они имеют крайне простой синтаксис. Начинается заголовок с тега <h2>, далее следует текстовое описание, которое обрамляется закрывающим тегом </h2>.

Вот так: <h2>Тут находится текст заголовка</h2>

На рисунке ниже представлен заголовок внутри HTML страницы.

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

Пример заголовка h2

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

Его синтаксис крайне прост: <h2>Заголовки страницы h2, h3, h4 … h6</h2>

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

Пример заголовков h3…h6

Наглядный пример вложенных заголовков h3 и h4 можно увидеть на странице https://dh-agency. ru/title/ (Для удобства, на рисунке мы убрали текст статьи)

Заголовок <h3></h3> имеет больший размер и содержит описание раздела, в том числе обобщающее подзаголовки <h4></h4>. Во все теги добавлены ключевые слова. При этом h3 имеет более частотный ключевик, чем h4.

Роль тегов h2…h6 в SEO

В SEO продвижении заголовок первого уровня h2 занимает особую роль. Он описывает содержимое всего документа и в отличии от <title> отображается на странице. По сути, это второй по важности тег для поисковой системы после title. Именно в h2 заключается самый частотный запрос, который озаглавливает содержимое всей продвигаемой страницы. Пишется данный тег с учетом множества требований, которые крайне важны для SEO.

Подзаголовки h3, h4, h5, h5 и h6 структурируют документ разбивая его на блоки различной степени вложенности. Опираясь именно на данные теги поисковая система определяет важность того или иного отрывка текста. Не стоит весь материал озаглавливать тегом h2 или h3. От этого он не станет «весомее». Вы просто потеряете возможность «расставлять» приоритетность внутри статьи. В таком случае, робот самостоятельно определит приоритетные и второстепенные отрывки, которые в итоге могут не совпадать с Вашим видением ситуации.

Правильно прописываем h2

Качественный заголовок h2 должен соответствовать ряду серьезных требований.

1. Кратко и понятно описывать содержимое всей страницы;

2. Легко читаться;

3. Быть написан на том же языке, что и весь материал страницы;

4. Не содержать в себе сложных аббревиатур, технических параметров и сокращений;

5. Быть длинной не более 60 символов, при этом располагаться на странице в одну строку;

   (Длинные заголовки неудобны для чтения и плохо воспринимаются поисковыми системами.

   )

6. Содержать самые важные ключевые слова страницы;

7. Не содержать в себе SEO СПАМа и не быть похожим на тег keywords;

8. Не вводить пользователей в заблуждение;

9. Иметь уникальное содержимое;

10. Быть одним на странице;

11. Внутри <h2></h2> не должно быть сторонних тегов разметки и форматирования, таких как <i>, <b>, <strong>, <span>, <div> и других.

Ошибки при написании h2

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

1. Слишком длинный заголовок;

   Заголовки имеющие длину более 70-100 символов плохо читаются, к тому же поисковой системе сложнее почерпнуть из них суть статьи.

2. Заголовки состоящие из ключевых слов;

   Наличие SEO СПАМа может повлечь за собой исключение из поисковой выдачи. Не стоит превращать содержимое тегов <h2></h2> в семантическое ядро.

3. Наличие бренда;

   Если Ваша фирма недостаточно известна, наличие ее названия в h2 повлечет за собой потерю драгоценного места.

4. Заголовки, которые не описывают суть статьи.

   В первую очередь, h2 должен описывать суть страницы, а уже потом быть привлекательным и продающим.

5. Наличие множества h2 в статье.

   Если на Вашей странице находится несколько h2, это введет поискового робота в заблуждение.

Правильно прописываем h3…h6

Для заголовков h3…h6 требования немного мягче. Для них справедливо все указанное выше, но при этом:

1. Тегов одного уровня на странице может быть несколько; (К примеру, можно иметь 3 тега h3 в одном документе)

2. Они должны описывать только тот блок, который озаглавливают;

3. Могут иметь длину до 80 символов;

4. Содержание технических параметров, аббревиатур и сокращений допускается; (Допускается, но не приветствуется)

5. Должны содержать в себе менее частотные ключевые слова; (В сравнении с тегом h2)

Ошибки при написании тегов h3, h4, h5, h5 и h6 очень схожи с теми, что допускают при создании h2.

Поэтому, мы не будем уделять им внимание.

Заголовки h2, h3,…h6 для WordPress

В WordPress нет никаких сложностей с созданием заголовка первого уровня, так как на страницу он выводится автоматически. Достаточно добавить основное название статьи и оно сразу отобразится в тегах <h2></h2>. Пример заголовка представлен на рисунке ниже.

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

Символьного ограничения данное поле в WordPress не имеет, поэтому придерживайтесь основных требований написания.

Заголовки второго, третьего, четвертого, пятого и шестого уровня — h3, h4, h5, h5 и h6 прописываются в теле статьи напрямую в HTML разметке или при помощи визуального редактора.

Заголовки h2, h3,…h6 для Joomla!

Так же, как и в WordPress, в Joomla! заголовок выводится из названия статьи. Данное поле не имеет ограничений по количеству символов, поэтому ориентируйтесь на допустимые размеры заголовков.

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

Принцип создания вложенных заголовков при помощи тегов h3, h4, h5, h5 и h6 схож с WordPress. Их так же можно добавить через редактор HTML кода или с помощью визуального оформления.

(Вид редактора может отличаться в зависимости от версии Joomla! или установленных модулей и настроек.)

Заголовки h2, h3,…h6 для Opencart

В Opencart для заголовка отведено отдельное поле, которое так и называется «HTML-тег h2». Это достаточно удобно, так как название может отличаться от фактически выводимого h2.

Как и в других CMS, никаких ограничений внутри поля тут нету.

Заголовки второго, третьего и т.д. уровней (h3, h4, h5, h5 и h6) прописываются в статье самостоятельно. Делается это так же, как и в других системах управления при помощи HTML разметки или редактора.

HTML тег

onplay	Скрипт викликається коли медіа дані готові почати відтворення.
onafterprint	Скрипт виконується тільки після як документ надрукований.
onbeforeprint	Скрипт виконується перед тим, як документ надрукований.
onbeforeunload	Скрипт виконується коли документ ось-ось буде вивантажений
onhashchange	Скрипт виконується коли там відбулися зміни до частини якоря в URL
onload	Викликається після того як завантаження елемента завершене.
onmessage	Скрипт виконується коли викликане повідомлення.
onoffline	Спрацьовує коли браузер починає працювати в автономному режимі
ononline	Спрацьовує коли браузер починає працювати в режимі онлай.
onpagehide	Скрипт виконується коли користувач переходить на іншу сторінку сторінку.
onpageshow	Скрипт виконується коли користувач заходить на сторінку.
onpopstate	Скрипт виконується коли змінено історію одного вікна.
onresize	Скрипт виконується, коли розмір вікна браузера змінюється.
onstorage	Скрипт виконується, коли вміст Web Storage оновлюється.
onunload	Викликається, коли сторінка розвантажена, або вікно браузера було зачинено.
onblur	Скрипт виконується, коли елемент втрачає фокус.
onchange	Викликається в той момент, коли значення елемента змінюється.
oncontextmenu	Скрипт виконується коли викликається контекстне меню.
onfocus	Викликається в той момент, коли елемент отримує фокус.
oninput	Скрипт викликається коли користувач вводить дані поле.
oninvalid	Скрипт виконується, коли елемент недійсний.
onreset	Викликається, коли натискається у формі кнопка типу Reset.
onsearch	Викликається, коли користувач щось пише в поле пошуку (для <input type="search">)
onselect	Викликаєтсья після того як будь-який текст був обраний в елементі.
onsubmit	Викликається при відправленні форми.
onkeydown	Подія викликається, коли користувач затис (натиснув та не відпускає) клавішу.
onkeypress	Викликається коли корисрувач натиснув на клавішу.
onkeyup	Викликається коли користувач відпускає клавішу.
ondblclick	Виникає при подвійному клацанні ЛКМ на елементі.
ondrag	Періодично викликається при операції перетягування.
ondragend	Викликається коли користувач відпускає перелягуваний елемент.
ondragenter	Викликається, коли перетягуваний елемент входить в цільову зону.
ondragleave	Викликається, коли перетягуваний елемент виходть з зони призначення.
ondragover	Викликається, коли перетягуваний елемент знаходиться в зоні призначення.
ondragstart	Викликається, коли користувач починає перетягувати елемент, або виділений текст.
ondrop	Викликається, коли перетягуваний елемент падає до зони призначення.
onmousedown	Викликається, коли користувач затискає ЛКМ на елементі.
onmousemove	Викликається, коли курсор миші переміщається над елементом.
onmouseout	Викликається, коли курсор виходить за межі елемента.
onmouseover	Виконується, коли курсор наводиться на елемент.
onmouseup	Викликається, коли користувач відпускає кнопку миші.
onscroll	Викликається при прокручуванні вмісту елемента (чи веб-сторінки).
onwheel	Викликається, коли користувач прокручує коліщатко миші.
oncopy	Викликається, коли користувач копіює вміст елемента.
oncut	Викликається, коли користувач вирізає вміст елемента.
onpaste	Викликається, коли користувач вставляє вміст в елемент.
onabort	Виконується при перериванні якоїсь події.
oncanplay	Скрипт виконується коли файл готовий, для початку відтворення (коли він буферизований достатньо, щоб почати відтворення)
oncanplaythrough	Скрипт виконується, коли контент вже може бути відтворений без переривання на буферизацію.
oncuechange	Скрипт виконується коли змінюється кий в <track> елемента
ondurationchange	Викликається коли змінюється довжина медіа файлу.
onemptied	Викликається коли доступ до медіа контенту обривається (зникло з’єднання з мережею).
onended	Викликається коли медіа елемент повністю відтворив свій зміст.
onshow	Викликається, коли елемент <menu> буде відображено як контекстне меню.
onloadedmetadata	Скрипт виконується коли метадані (розміри чи тривалість) завантажуються.
onloadeddata	Викликається коли медіа данні завантажено.
onloadstart	Викликається коли браузер тільки починає завантажувати медіа дані з сервера.
onpause	Викликається коли відтворення медіа даних призупинено.
onplaying	Викликається коли розпочато відтворення медіа даних.
onprogress	Подія onprogress відбувається, коли браузер завантажує вказане аудіо / відео.
onratechange	Викликається коли змінюється швидкість відтворення медіа даних.
onseeked	Викликається коли атрибут seeked у тега audio або video змінює значення з true на false.
onseeking	Викликається коли атрибут seeking у тегів audio або video змінює значення з false на true
onstalled	Скрипт виконується коли браузер з будь-якої причини не може отримати медіа дані.
onsuspend	Скрипт виконується коли з будь-якої причини завантаження данних призупинено до його повного завантаження.
ontimeupdate	Викликається коли змінилася позиція відтворення елемента <audio> або <video>.
onvolumechange	Викликається коли змінюється гучність звуку.
onwaiting	Викликається коли наступний кадр при відтворенні медіа даних недоступний, але браузер очікує що він незабаром завантажиться.
ontoggle	Викликається, коли користувач відкриває або закриває елемент <details>.
onerror	Викликається якщо при завантаженні елемента сталася помилка.
onclick	Подія викликається коли користувач клацає ЛКМ по елементу.

HTML-тег

Тег HTML

представляет заголовок уровня 2 в документе HTML.

HTML включает 6 уровней заголовков, ранжированных по важности. Это

,

,

,

,

и

.

Ранг указан в названии рубрики;

имеет самый высокий ранг, а

— самый низкий. Два заголовка с одинаковым названием имеют одинаковый ранг.

Браузеры обычно отображают различные заголовки разных размеров:

— самый большой, а

— самый маленький.

Синтаксис

Тег

записывается как

с текстом заголовка, вставленным между начальным и конечным тегами.

Вот так:

Заголовок

Примеры

Базовое использование тега

В сравнении с другими товарными позициями

Вот как выглядят все шесть уровней заголовков.

Заголовок 1

Текст абзаца….

Заголовок 2

Текст абзаца. …

Заголовок 3

Текст абзаца….

Заголовок 4

Текст абзаца….

Заголовок 5

Текст абзаца….

Заголовок 6

Текст абзаца….

Атрибуты

Атрибуты могут быть добавлены к элементу HTML, чтобы предоставить больше информации о том, как элемент должен выглядеть или вести себя.

Элемент

принимает следующие атрибуты.

Атрибут	Описание
Нет

Глобальные атрибуты

Следующие атрибуты являются стандартными для всех элементов HTML. Следовательно, вы можете использовать эти атрибуты с 9Тег 0003

, а также со всеми другими тегами HTML.

• ключ доступа
• автокапитализация
• класс
• редактируемый контент
• данные-*
• директор
• перетаскиваемый
• скрытый
• идентификатор
• режим ввода
• это
• ид
• элементпроп
• Артикул
• предметная область
• тип изделия
• язык
• часть
• слот
• проверка правописания
• стиль
• tabindex
• Название
• перевод

Полное объяснение этих атрибутов см. в разделе Глобальные атрибуты HTML 5.

Обработчики событий

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

• прерывание
• onauxclick
• размытие
• при отмене
• онканплей
• oncanplaythrough
• при обмене
• по клику
• при закрытии
• в контекстном меню
• онкопия
• при обмене
• врезной
• ondblclick
• ондраг
• ондрагенд
• Драгентер
• выход на драге
• на накладке
• ондраговер
• ондрагстарт
• ondurationchange
• при опорожнении
• одноконтурный
• при ошибке
• онфокус
• данные формы
• на входе
• недействительный
• нажатие клавиши
• нажатие клавиши
• onkeyup
• при смене языка
• под нагрузкой
• загруженные данные
• загруженные метаданные
• запуск при загрузке
• ввод с помощью мыши
• для мышей
• перемещение мыши
• onmouseout
• при наведении мыши
• на мышке вверх
• на пасте
• при паузе
• в игре
• в игре
• в процессе
• при изменении скорости
• при сбросе
• при изменении размера
• при прокрутке
• нарушение политики безопасности
• запрос
• поиск
• по выбору
• onslotchange
• установлен
• при отправке
• приостановить
• своевременное обновление
• нагрудник
• при изменении объема
• в ожидании
• на колесе

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

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

Являются ли теги заголовков HTML (h3-H6) фактором ранжирования Google?

В предыдущей статье мы исследовали доказательства использования тегов h2 в качестве фактора ранжирования Google.

Теперь давайте посмотрим на остальные теги заголовков — от h3 до H6.

Поможет ли использование этих тегов повысить рейтинг вашего контента в Google?

И может ли использование определенных ключевых слов в заголовках с тегами от h3 до H6 помочь вам ранжироваться по этим терминам?

Давайте проверим.

Утверждение: теги h3-H6 как фактор ранжирования их собственный.

Доказательства того, что HTML-теги заголовков являются фактором ранжирования

Когда-то — примерно в 2005–2010 годах или около того — подзаголовки действительно считались факторами ранжирования. Использование целевых ключевых слов в подзаголовках более высокого уровня (как правило, основного ключевого слова в h2 и вторичных ключевых слов в h3 и h4) помогло вам ранжироваться по этим ключевым словам.

Это было еще тогда, когда текст в целом и то, что вы с ним делали, имели больший вес.

Использование определенной плотности ключевых слов и размещение ключевых слов в определенных местах считалось передовым методом оптимизации контента для таких сайтов, как Suite101, About.com и WikiHow. Эти сайты были кошмаром для Google, потому что многое из того, что он использовал для оценки качества веб-страниц, работало в их пользу.

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

Перенесемся в август 2020 года, и Джон Мюллер из Google прямо сказал нам, что заголовки действительно являются фактором ранжирования:

«Итак, заголовки на странице помогают нам лучше понять ее содержимое.

Заголовки на странице — не единственный фактор ранжирования, который у нас есть. Мы также смотрим на контент сам по себе.

Но иногда наличие четкого заголовка на странице дает нам немного больше информации о том, о чем этот раздел».

Далее он сказал:

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

… поместите ли вы это в тег h2, тег h3, H5 или что-то еще, это не имеет большого значения».

Доказательства против использования тегов h3-H6 в качестве фактора ранжирования скорее всего будет.

Мы знаем, что страницы могут ранжироваться вообще без тегов заголовков.

Мы знаем, что добавление определенного ключевого слова в тег заголовка не поднимет вас на вершину рейтинга Google.

Мюллер сказал, что теги заголовков:

• Помогите Google лучше понять содержание.
• Дайте Google немного больше информации.
• Являются сильным сигналом того, о чем конкретная часть страницы.

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

Он постоянно тестирует и обновляет алгоритм, чтобы лучше «понимать» релевантность, отношения между сущностями и восприятие поисковиками положительного высококачественного опыта.

И по мере того, как в алгоритм включались новые, более точные способы понимания этих сложных вопросов, эти старые сигналы неизбежно разбавлялись.

Почему? Потому что, как и многие прежние сигналы ранжирования — форматирование текста, плотность ключевых слов и ссылки .gov среди них — подзаголовки слишком легко обмануть.

Скриншот автора, июль 2021 г.

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

Теги h3-H6 как фактор ранжирования: наш вердикт

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