`<h1>`...`<h6>`

Время чтения: меньше 5 мин

Кратко

Используй теги от <h1> до <h6>, чтобы размечать заголовки на странице.

Пример

        
          
          <h1>Самый важный заголовок</h1><h2>Заголовок уровня 2</h2><h3>Заголовок уровня 3</h3><h4>Заголовок уровня 4</h4><h5>Заголовок уровня 5</h5><h6>Заголовок уровня 6</h6>
          <h1>Самый важный заголовок</h1>
<h2>Заголовок уровня 2</h2>
<h3>Заголовок уровня 3</h3>
<h4>Заголовок уровня 4</h4>
<h5>Заголовок уровня 5</h5>
<h6>Заголовок уровня 6</h6>

Открыть демо в новой вкладке

Как это понять

Цифра в теге означает уровень заголовка в иерархии: от самого общего или главного <h1> до самого второстепенного <h6>. По умолчанию <h1> — самый крупный заголовок на странице, а <h6> — самый мелкий.

Как пишется

Заголовки <h1>...<h6> всегда начинаются с новой строки. Перед ними и после них добавляется расстояние, которое можно регулировать с помощью CSS-стилей.

Подсказки

💡 Не пропускай заголовки разных уровней: всегда начинай с <h1>, потом используй <h2> и так далее.

💡 Чтобы уменьшить или увеличить размер шрифта, используй CSS-свойство font-size. Не стоит для этого менять уровни заголовков.

💡 С помощью тегов <h1>...<h6> можно автоматически создавать оглавления для документов.

💡 Для создания заголовка можно использовать и обычный текстовый блок. Но информация в <h1>...<h6> легче попадает в поисковики, поэтому для заголовков лучше использовать именно эти теги.

💡 Старайся не использовать основной заголовок <h1> больше одного раза на странице.

💡 Выбирайте какой уровень заголовка использовать по смыслу, а не по внешнему виду.

Ещё примеры

        
          
          <h1>Каталог тортов</h1><p>  У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных  тартов.</p><h2>Свадебные торты</h2><p>Выберите начинку и внешний вид для торта своей мечты.</p>
          <h1>Каталог тортов</h1>
<p>
  У нас вы можете заказать самые вкусные десерты от свадебных тортов до сочных
  тартов.
</p>

<h2>Свадебные торты</h2>
<p>Выберите начинку и внешний вид для торта своей мечты.</p>

Открыть демо в новой вкладке

На практике

Дока Дог

🛠 Используй <h1> на странице не больше одного раза; <h2> — не больше двух, максимум трёх раз; <h3> — можно 4-5 раз и так далее.

Как вообще эти теги работают? Допустим, есть сайт «Ели от дяди Васи», который рассказывает про голубые сибирские ели. Если ты вводишь запрос в Яндексе «как ухаживать за голубыми елями», а на сайте дяди Васи есть заголовок <h3>Как ухаживать за голубыми елями</h3>, то в Яндексе этот заголовок добавится к названию страницы и будет выдаваться в поиске не просто, как «Ели от дяди Васи», а вот так:

        
          
          Ели от дяди Васи — Как ухаживать за голубыми елями
          Ели от дяди Васи — Как ухаживать за голубыми елями

Теги <h1>...<h6> должны соответствовать ключевым запросам, вопросу пользователя. Через них сайт настраивается для выдачи в поисковиках.

🛠 Часто у тебя в проекте есть боковое меню и второстепенный баннер о партнёрах или график работы — это то, что люди не гуглят и что не является семантически важным на странице. Помещать такую информацию в теги <h1>...<h6> не стоит.

Обычно я прописываю стили для <h1>...<h6>, а следом задаю точно такие классы: class="h1", class="h2" и так далее с точно такими же параметрами. Когда мне нужно графически отобразить тег заголовка, например, h4 над второстепенным блоком, который не несёт семантической ценности, то я пишу не тег <h4>, а беру тег <p> или <span>, добавляю ему класс h4: <p class="h4"> — он внешне выглядит, как заголовок h4, но не индексируется, как нечто важное. Тогда вспомогательные блоки не мешают основному контенту сайта.

🛠 У любого тега есть стандартный набор стилей, который стоит по умолчанию в браузере. Иногда бывает, что начинающие ставят тег <h1>, <h2>, <h3>, задают им какой-нибудь шрифт, например, font-family: Arial, начинают их использовать — и вроде всё красиво отображается по размеру. Но может быть так, что в одном браузере стандартный размер шрифта — 18px, а в другом — 16px для того же тега. И, если ты не пропишешь сам в CSS размер для этих тегов, то в разных браузерах заголовки будут отображаться по-разному. Впрочем, это касается не только заголовков, но любых тегов. Просто с заголовками чаще всего много проблем.

Алёна Батицкая

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

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

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

Пример правильного использования заголовков

🛠 Если углубиться в интернеты, то можно найти следующее: внутри каждого блока section может быть заголовок h1. Это немного сбивает с толку, потому что все кругом твердят, что на странице сайта должен быть только один заголовок первого уровня.

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

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

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