Атрибуты тега h1 – | HTML | WebReference

Я обычно стараюсь задействовать иерархию не ниже уровня h4, так как каждая страница представляет собой краткое изложение одной темы.

Например, здесь, здесь я живу:

<h2>Земля</h2>
<h3>Европа</h3>
<h4>Великобритания</h4>
<h5>Шотландия</h5>
<h5>Ренфрушир</h5>
<h6>Гринок</h6>

Или наоборот.

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

Вы видите, что существует несколько способов задать эти элементы. Мы рекомендуем, чтобы одна страница была по возможности посвящена одной теме, а также:

• Чтобы на странице содержался один элемент h2;
• Страница может содержать столько элементов h3, сколько необходимо для обозначения разделов на странице;
• Рассмотрите возможность использования элементов h4 для групп полезных ссылок на другие релевантные источники. Но недавние рекомендации (2013 год) гласят, что лучше применять заголовки для текста, а не для группы навигации.

С помощью исследований было установлено, что Google добавляет некоторый вес элементам h2 (хотя другие исследования утверждают обратное). Джон Мюллер из Google действительно заявлял, что их использование дает «небольшое повышение».

Хотя теоретически считается, что это дает «небольшое повышение», я не уверен, что заголовки h2-H6 улучшают SEO заметным образом (в Google). Я бы не помещал ключевую фразу, по которой продвигаю страницу, в каждый элемент заголовка.

HTML тег h2— это элемент заголовка первого уровня в веб-документе:

Если документ является автономным, например, «Все, что вы хотите знать о SEO«, заголовок верхнего уровня должен быть таким же, как тайтл. Если он является частью серии, например, вводный раздел по «SEO когда-то и сейчас» набора материалов о «поисковой оптимизации«, то заголовок верхнего уровня должен содержать определенное количество дополнительного контекста:

<h2>SEO когда-то и сейчас</h2>

В то время как тайтл должен содержать определенный контекст:

<title>Все, что вы хотите знать о SEO</title>

Часто на практике элемент тайтл повторяется как h2 страницы.

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

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

Я провел простой тест, чтобы узнать, будет ли Google рассматривать любой тег H в качестве заголовка страницы, если по какой-то причине ему не нравится элемент тайтл.

Результат был таков: если элемент тайтл выглядит неподходящим, Google может использовать любой доступный заголовок (теги h2 h3 h4) или h6, в качестве тайтла страницы.

Приведенный ниже пример показывает, что Google использовал Н6 в качестве тайтла страницы (в 2012 году):

Я не могу найти в интернете никаких веских доказательств того, что вы должны использовать заголовки (теги h2 h6) или что они улучшают ранжирование в Google. Я видел страницы, хорошо ранжируемые в Google и без них. Но я использую их на странице, особенно тег h2, потому что пытаюсь создавать сайты и для поисковых систем, и для людей:

<h2>The Hobo SEO Company, Scotland</h2>

Я до сих пор в основном использую только один тег заголовка <h2> на своих продвигаемых по ключевым словам страницах. Считаю, что это способ соответствует W3C. Я располагаю его в верхней части страницы выше размеченного тега <р>. Он включает в себя ключевые слова для этой страницы.

Я использую столько тегов, сколько необходимо в зависимости от размера страницы, но я использую только h2, h3 и h4.

Я стараюсь, чтобы длина тега h2 была максимально короткой. Аарон Уолл из SEOBook рекомендует не делать теги h2 такими же, как тайтлы страниц. Я всегда считал, что это не такая уж большая проблема, с точки зрения правильной оптимизации страницы. Но он приводит четкую причину:

Использование большего количества различных вариаций релевантных ключевых слов = больше трафика.

В 2016 году он дал дополнительные ценные советы:

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

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

Данная публикация представляет собой перевод статьи «How To Use h2-H6 HTML Elements Properly» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

HTML тег h2-h6

Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> используются для определения HTML заголовков разного уровня. <h2> – высший уровень (наивысшая важность), <h6> – низший уровень (наименьшая важность). Заголовки обычно используются в порядке, соответствующем их уровню. При этом заголовок <h2> должен использоваться только один раз на странице.

Разница между HTML 4.01 и HTML5

Атрибуты тега <h2-h6>

Общие атрибуты

Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> поддерживают общие атрибуты и атрибуты-события.

HTML пример

Шесть разных HTML заголовков:

<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

CSS стили по умолчанию

Большинство браузеров будут отображать теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> со следующими стилями

h2 { 
    display: block;
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h3 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h4 { 
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h5 { 
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h5 { 
    display: block;
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h6 { 
    display: block;
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

msiter.ru

Тег h2 — Уроки по созданию сайтов на WordPress

Тег <h2>

Описание

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

Синтаксис

<h2>Заголовок первого уровня</h2>

Атрибуты

align — Определяет выравнивание заголовка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег h2 и h3</title>
 </head>
 <body>
 
  <h2>Lorem ipsum dolor sit amet</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna 
  aliguam erat volutpat.</p>
 
  <h3>Ut wisis enim ad minim veniam</h3>
  <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution 
  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
  commodo consequat.</p>
 
 </body>
</html>

<!DOCTYPE HTML> <html> <head> <meta charset=»utf-8″> <title>Тег h2 и h3</title> </head> <body> <h2>Lorem ipsum dolor sit amet</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <h3>Ut wisis enim ad minim veniam</h3> <p>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид заголовков первого и второго уровня в браузере

Примечание

Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h2>…<h6>. По этой причине лучше всегда использовать эти теги, несмотря на то, что с помощью стилей любой текст можно установить большого размера и, тем самым, сделать его заголовком.

wp-lessons.com