HTML теги <h1>..<h6>

Заголовочные теги <h1>...<h6> должны быть на каждой странице сайта. Важность каждого заголовка зависит от цифры:

<h1></h1> — самые важные заголовочные теги
<h2></h2> — менее значимые чем первый
...
<h6></h6> — последние по важности

К этим тегам нужно относится с осторожностью, поскольку они оказывают больше влияние на ранжирование сайта. При грамотном использовании тегов <h1>...<h6> зачастую можно добиваться хороших позиций сайта по запросам только на внутренних факторах. И обратная ситуация: в случае неправильного использования можно попасть под санкции поисковых систем. В этой статье мы как раз и поговорим как правильно использовать эти теги.

Синтаксис тегов <h1>..<h6>

<h1>Название статьи</h1>
	<h2>Подзаголовок1</h2>
	...
	<h2>Подзаголовок2</h2>
		<h3>Подзаголовок3_1</h3>
		...
		<h3>Подзаголовок3_N</h3>
	<h2>Подзаголовок3</h2>	
	и т.д.

Каждый заголовок по умолчанию имеет разный размер. Например, код

<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6>Заголовок h6</h6>

На странице превращается в следующее:

Значимость тегов <h1>..<h6>
По весу и значимости в продвижение сайтов заголовочные теги h1-h6 находятся на втором месте после тега <title>. Во многом правила составления тайтла схожи с h1.

Правила использования тега <h1>

• Тег <h1> должен присутствовать в одном экземпляре на каждой странице сайта. Это правило должно не вызывать никаких вопросов, ведь у каждой страницы сайта должно быть только одно название. А если названия вообще нет, то тогда вообще зачем нужна такая страница?
• Заголовок <h1> должен быть где-то вверху html-кода страницы
• <h1> должен быть уникальным в пределах сайта, т.е. не должно быть так, что некоторые страницы называются одинаково
• Заголовок должен отражать суть статьи, не быть очень длинным
• Не должен содержать какие-то еще элементы кроме названия страницы (т.е. нельзя использовать внутри h1 ссылки, элементы span, font, картинки и т.п.)
• Плохо использовать заголовки не по назначению. Например, часто в шаблонах теги h3 используются для заголовков "Теги", "Комментарии" в сайдбарах. Это не правильно. Заголовочные теги должны использоваться в статье, чтобы правильно структурировать контент и помочь, как поисковым систем, так и обычным пользователям разобраться быстро в статье.
• Желательно использовать заголовки без параметров class и id
• Важно соблюдать иерархию заголовочных тегов. На этом моменте нужно остановиться более подробно.

Важность иерархии <h1>..<h6>

В html коде страницы первым должен быть тег <h1>. Нельзя сначала делать заголовок <h2>, потом <h1>. Аналогично и с другими номерами тегов. Вот правильное использование тегов:

<h1>Название статьи</h1>
...
<h2></h2>
	<h3></h3>
		<h4></h4>
		...
		<h4></h4>
	<h3></h3>
		...
	<h3></h3>
<h2></h2>	
...
<h2></h2>	
	<h3></h3>

Т.е. каждый более низкий тег всегда располагается во вложении более высокого. Это и есть правильная иерархия. При этом не допускаются резкие переходы с <h1> на <h4>, с <h2> на <h5> и т.п.

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

Может ли заголовок <h1> и <title> совпадать?
На этот вопрос сейчас разгораются споры. С одной стороны логично, чтобы <title> и <h1> совпадали. Но с другой стороны это как бы дублирование название страницы. Вообще чаще всего заголовки будут разными, поскольку в <h1> вряд ли можно и имеет смысл писать слова "Купить, цена, фото", а в тайтле такие слова наоборот используются. Отвечая на вопрос - делайте так, чтобы было все понятно пользователю и смотрелось естественно.

Сколько может быть заголовков <h2>, <h3>?
Заголовочных тегов <h2>-<h6> может быть несколько на странице, все зависит от размера контента. Количество контента на один заголовок должно быть адекватным. Другими словами не должно быть так, что после заголовка <h2> идет 5 предложений, потом опять <h2> и опять маленький абзац. В таких случаях скорее всего лучше вообще не использовать заголовочные теги.

Не стоит путать заголовочные теги <head> и h1-h6. Одни нужны для поискового робота, другие для поискового робота и пользователей.

Читайте также:
• Как сделать форму обратной связи на php с каптчей
• Как скруглить углы в HTML через CSS
• Как вставить музыку на сайте
• Как сделать карту изображений (карта ссылок)
• Как сделать слайдер
• Как сделать обтекание картинки текстом
• Как открыть ссылку в новом окне

← Перейти в каталог html уроков и советов