HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги . относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Также для этого тега доступны универсальные атрибуты и события.
Закрывающий тег
HTML5 IE Cr Op Sa Fx
Тег H1 и H2 Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Вид заголовков первого и второго уровня в браузере
Примечание
Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов . . По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.
Статьи по теме
- Блочные элементы
- Блочные элементы
- Добавление CSS
- Заголовки
- Правила вложений для тега
- Размер текста
- Структура HTML-кода
- Что всё это значит?
HTML-элементы – представляют собой 6 уровней заголовков секций. это наибольший заголовок и — наименьший
Примечание: Атрибут align устаревший; не используйте его.
Примечания к использованию
- Информация о заголовке может использоваться пользовательскими агентами, например, для автоматического создания оглавления для документа
- Не используйте низкие уровни чтобы снизить размер шрифта: используйте CSSfont-size вместо.
- Избегайте пропуск уровней заголовков: всегда начинайте с , потом используйте , и так далее.
- Вам следует рассмотреть избегание использования более раза на страницу.
Примеры
Все заголовки
Следующий код показывает все уровни заголовков в действии
h1>Heading level 1h1> h2>Heading level 2h2> h3>Heading level 3h3> h4>Heading level 4h4> h5>Heading level 5h5> h6>Heading level 6h6>
Вот результат этого кода:
Пример страницы
Следующий код показывает несколько заголовков с некоторым содержанием под ними .
h1>Heading elementsh1> h2>Summaryh2> p>Some text here. p> h2>Examplesh2> h3>Example 1h3> p>Some text here. p> h3>Example 2h3> p>Some text here. p> h2>See alsoh2> p>Some text here. p>
Проблемы доступности
Навигация
Обычный метод навигации для пользователей программ чтения с экрана — это переход от заголовка к заголовку для быстрого определения содержимого страницы. Из-за этого важно не пропускать один или несколько уровней заголовка. Это может создать путаницу, так как человеку, который движется по этому пути, может быть интересно узнать, где находится отсутствующий заголовок.
Не делай
h1>Heading level 1h1> h3>Heading level 3h3> h4>Heading level 4h4>
Делай
h1>Heading level 1h1> h2>Heading level 2h2> h3>Heading level 3h3>
Расположение
Заголовки могут быть вложены в подразделы, чтобы отразить организацию содержимого страницы. Большинство программ чтения с экрана также могут создавать упорядоченный список всех заголовков на странице, что может помочь человеку быстро определить иерархию содержимого:
- h1 Жуки
- h2 Этимология
- h2 Распределение и разнообразие
- h2 Эволюция
- h3 Поздний палеозой
- h3 Юрский период
- h3 Меловойский период
- h3 Кайнозойский период
- h3 Голова
- h4 Рот
- h4 Передгрудь
- h4 Пиероторакс
Когда заголовки вложены, уровни заголовков могут быть «пропущены» при закрытии подраздела.
- Заголовки • Структура страницы • Обучающие материалы по веб-доступности WAI
- MDN Понимание WCAG, объяснение Руководства 1.3 (en-US)
- Понимание критерия успеха 1.3.1 | W3C Понимание WCAG 2.0
- MDN Понимание WCAG, Руководство 2.4 пояснения (en-US)
- Понимание критерия успеха 2.4.1 | W3C Понимание WCAG 2.0
- Понимание критерия успеха 2.4.6 | W3C Понимание WCAG 2.0
- Понимание критерия успеха 2.4.10 | W3C Понимание WCAG 2.0
Содержание раздела маркировки
Другим распространённым методом навигации для пользователей программ чтения с экрана является создание списка содержимого секций и использование его для определения макета страницы.
Содержимое секционирования можно пометить, используя комбинацию aria-labelledby и id атрибута, с ярлыком, кратко описывающим назначение раздела. Этот метод полезен в ситуациях, когда на одной странице имеется более одного элемента секционирования.
Пример
header> nav aria-labelledby="primary-navigation"> h2 id="primary-navigation">Primary navigationh2> nav> header> footer> nav aria-labelledby="footer-navigation"> h2 id="footer-navigation">Footer navigationh2> nav> footer>
- Использование атрибута aria-labelledby
- Обозначение регионов • Структура страницы • Учебные пособия по WAC WAI
Характеристики
Specification HTML Standard
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elementsСовместимость с браузером
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 18 окт. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.Теги h1-h6, заголовки в HTML
Мы закончили прототипировать крупные блоки страниц. Теперь давайте вернёмся к главной странице и немного поработаем над структурой текстового содержания.
Для создания основной структуры текста используют заголовки. В HTML существует целое семейство заголовочных тегов: от до . Тег обозначает самый важный заголовок (заголовок верхнего уровня), а тег обозначает подзаголовок самого нижнего уровня. Буква «h» в названии тега — это первая буква английского «heading».
На практике в текстах редко встречаются подзаголовки ниже третьего уровня. Поэтому чаще всего используются теги , и :
Спецификация HTML
Раздел 1 Введение
Раздел 1.1 Происхождение языка
Поисковые системы придают особое значение заголовкам, также правильно расставленные заголовки важны для доступности документа. Поэтому нужно учиться грамотно использовать заголовки.
Заголовок — самый важный на странице. В него нужно включать текст, который в целом описывает содержание страницы. Очень важно, чтобы заголовок первого уровня на странице был только один.
На главных страницах заголовок верхнего уровня часто добавляют в шапку сайта. В нашем прототипе мы поступим так же.
В пятой версии HTML разрешили использовать собственную, независимую от остального документа, иерархию заголовков в тегах для создания смысловых разделов. Теперь на странице можно использовать несколько или со своими , и .
На практике выяснилось, что этот механизм скорее мешает, чем помогает, а браузеры и средства доступности не спешат его реализовывать. Так что все начали возвращаться к старой доброй сквозной иерархии заголовков во всём документе.
Перейти к заданию
- index.html Сплит-режим
Сайт начинающего верстальщика Шапка сайта Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами. Моё первое задание — вести дневник и честно писать обо всех своих свершениях. Раздел про навыки Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Как правильно написать SEO заголовки h1, h2, h3. Проверка тегов на странице
Заголовки необходимы, чтобы коротко описать основную тематику текста на странице, грамотно его структурировать, выделить разделы, показать их иерархию. С их помощью пользователю будет намного проще ориентироваться в контенте и находить нужный ему материал.
Иерархия заголовков на странице
В языке HTML, на котором создаются web-стрницы, существует 6 уровней заголовков — от тега h1 до h6. Каждый из них в иерархической цепочке подчинен предыдущему. Самый главный заголовок — тег h1, в него вложен подзаголовок h2, соответственно, h3 уже разграничивает текст внутри h2 и т. д.
Пример иерархии с правильной вложенностью тегов:
Животные Млекопитающие Грызуны Хищные Приматы Птицы Совы Воробьинообразные Куриные
Как мы видим, в такой иерархии прослеживается логическая последовательность, благодаря которой становится понятно содержание текста и тематика каждого раздела. Недопустимо нарушать иерархию, например, использовать тег Н3 перед Н2 или использовать тег Н6, если на странице нет Н4 и Н5. Как правило, для оформления текста на сайте достаточно тегов Н1 — Н3. Остальные используют в редких случаях.
Пример визуального отображения заголовков в тексте:
Как заголовки в тексте влияют на продвижение сайтов?
- Правильно оформленные заголовки помогают пользователю ориентироваться на странице. Текст с удобной структурой и интересными подзаголовками привлекает посетителей и побуждает их дольше оставаться на странице интернет-магазина. Это положительно отражается на поведенческих характеристиках сайта и способствует росту его позиций в результатах поисковой выдачи.
- Яндекс и Google рекомендуют использовать заголовки и подзаголовки для удобства пользователей.
- Они помогают и поисковым роботам быстрее разобраться со структурой документа, определить характер и качество контента. Содержимое заголовков учитывается поисковыми системами для определения релевантности страницы поисковому запросу.
- Слова, размещенные в тег Н1, получают больший вес, чем остальной текст на странице.
Заголовок (тег) h1
Тег h1 — самый главный заголовок на странице. Он считается названием документа и должен отображать суть размещенного контента. Это поможет пользователям и поисковым роботам точно определить назначение страницы.
Неправильное употребление данного заголовка может просто негативно сказаться на ранжировании станицы, именно поэтому его написанию и оптимизации следует уделить особое внимание.
Правила, которые нужно соблюдать при написании Н1
Правильно написанный заголовок уровня Н1:
- располагается выше текста и заголовков следующих уровней и пишется шрифтом наибольшего размера;
- отражает содержание текста;
- присутствует на странице в единственном экземпляре, если иного не требует логическая структура текста;
- не совпадает с Тitle (тайтл) или другими тегами;
- уникален для каждой страницы;
- длина тега имеет значение: не слишком длинный (количество 60-70 символов) — хотя при ранжировании учитывается больше слов, чем выводится на экран, надо учитывать, что чем больше слов в заголовке, тем меньше будет «вес» каждого из них по формуле БМ25;
- содержит в себе ключевое слово — это значимый фактор ранжирования для поисковых систем;
- не должен быть переоптимизированным;
- в конце не ставится точка (при этом может стоять восклицательный или знак вопроса).
Как прописывать ключевые слова в Н1?
- Заголовок на главной странице должен содержать в себе релевантные запросы. Это значимый фактор ранжирования для поисковых систем. На страницах с описанием конкретных товаров пишите заголовки с низкочастотными ключевыми словами.
- Ключевое слово должно находиться как можно ближе к началу заголовка.
- Избегайте переспама в Н1. Не стоит употреблять слишком много ключевых слов и включать фразы в прямом вхождении, если они звучат неестественно. Используйте разные словоформы и разбавленные вхождения.
- Не обязательно всегда начинать заголовок со слов «купить» или «цена» — это может стать негативным сигналом для поисковых систем.
Употребление заголовков Н1 и Тitle
Н1 не должен совпадать с МЕТА-тегом Тitle — заголовком, который описывает содержимое страницы для поисковых систем, а также отображается во вкладке браузера. Тitle можно увидеть и в качестве заголовка сниппета в поисковой выдаче.
Использование одинаковые ключевых слов в МЕТА-теге Тitle и заголовке H1 создает угрозу наложения санкций со стороны поисковых систем. Поскольку Тitle и тег h1 имеют большое значение для ранжирования сайта в результатах поиска, то написание одних и тех же ключевых слов в данных элементах может быть расценено как попытка искусственного увеличения их веса. Также не рекомендуется использовать дубль тега h1 в Description.
Страницы с совпадающими тегами Title и Н1 показывает отчет «Ошибки МЕТА тегов» в разделе «SEO-аудит» сервиса «Лабрика».
Сколько раз можно прописать заголовок (тег) Н1 на странице?
Только один! Правилами языка HTML 5 допускается использование нескольких заголовков Н1.
Тег h1 для Google
Согласно нашим исследованиям, Google не считает наличие нескольких заголовков Н1 критической ошибкой. Специалист компании Мэтт Каттс также говорил о возможности размещения на странице нескольких тегов H1 в тех случаях, когда этого требует логическая структура контента. Однако автор рекомендовал не злоупотреблять этим тэгом и не применять его без необходимости. Например, не стоит выделять тэгами заголовка значительные фрагменты текста. Это, как и слишком частое использование заголовков, не соответствующее структуре статьи, может привести к понижению страницы в результатах поисковой выдачи.
Тег h1 для Яндекс
Важно понимать: для Яндекса присутствие нескольких тегов h1 на странице является отрицательным сигналом ранжирования в интернете.
Информацию по наличию на странице нескольких заголовков h1 можно получить с помощью отчета «Ошибки МЕТА тегов» в разделе «Технический аудит» сервиса «Лабрика».
Как составить «цепляющий» заголовок?
Создание привлекательных заголовков — сложная работа. Чтобы заголовок привлекал внимание пользователей он должен:
- сразу показать читателю полезность данного контента — например, предложить решение проблемы, получение какой-либо выгоды и т. п.: «Как писать заголовки в SMM»;
- добавлять интригу — обещать какую-либо эксклюзивную, самую полную, самую актуальную информацию: «Создаем самый надежный пароль и запоминаем его»;
- быть понятным и предоставлять точные, конкретные данные в цифрах — это вызовет больше доверия: «100+ заголовков, привлекающих внимание»;
- обозначать некоторую целевую аудиторию, то есть указывать, для кого предназначен контент страницы: «Как придумать заголовок к статье? Шпаргалка копирайтера»;
- включать побудительные глаголы — они помогут создать нужное вам отношение пользователя к содержимому страницы: «Получайте новости о конкурсах и грантах быстрее всех!»;
- бросать читателю вызов, предлагать ему проверить свои знания: «А вы знаете, как правильно читать книги?».
Помните, что создание заголовка должно соответствовать контенту страницы вообще. Если вы обманете ожидания читателя, вызванные заголовком, то потеряете доверие к следующим своим текстам и трафик.
Правила оформления заголовков Н2 — Н6
Подзаголовки уровней Н2 — Н6 прописываются внутри текста страницы, чтобы выделить его разделы. Они также учитываются поисковыми системами при анализе контента страницы и должны соответствовать определенным правилам.
- располагаться в строгом соответствии с уровнем иерархии;
- раскрывать тематику раздела;
- начинаться с новой строки;
- отличаться по стилю от основного текста и заголовков других уровней;
Заголовки не должны:
- включать ниакие другие теги, например, для дополнительного выделения жирным шрифтом;
- использоваться для выделения фраз и предложений, не являющихся заголовками по смыслу;
- избыточно наполняться ключевыми словами;
- находиться в элементах меню и содержать активные ссылки.
Переспам ключевыми словами и наличие тегов в заголовках Н1, Н2, Н3 можно найти с помощью отчета «Тошнота слов на страницах» в разделе «SEO-аудит» сервиса «Лабрика».
Способы: как сделать заголовок Н1 — Н6 в CMS ?
Обычно в шаблонах систем управления контентом (CMS) заголовок Н1 отображается как название страницы. В других CMS Н1, как и подзаголовки в тексте, нужно вручную добавить в содержимом страницы с помощью редактора. Для этого нужный текст выделяется, а в меню выбирается заголовок соответствующего уровня. Проверьте, как прописываются заголовки в систем управления вашего ресурса.
Пример в WordPress:
Читать дальше подобные статьи
- Описание страницы Мета-тег Description в SEO — как его правильно заполнить
- Как правильно написать мета тег Title, SEO заголовок страницы сайта
- Оптимизация SEO-текстов и ранжирование страниц: 5 принципов текстового продвижения сайта статьями в интернете
- Текстовые факторы ранжирования: продвижение сайта статьями (текстами)
- Как написать эффективный заголовок по 4u формуле? Примеры продающих заголовков