Содержание

| HTML | WebReference

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

Синтаксис

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

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

Пример

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>h2 и h3</title>
 </head>
 <body>
  <h2>Синеклиза как питание прогиба исходным материалом</h2>
  <p>Замок складки достаточно хорошо прекращает ультраосновной известняк. 
  Низменности, окаймляя крупные озера и морские побережья, 
  кряж окристаллизован. Оледенение сингонально смещает осадочный кварцит. 
  Относительное опускание обычно поступает в слоистый кварцит.</p>
  <h3>Жила фоссилизирует увалистый гранит</h3>
 </body>
</html>

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

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

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Особняком стоит живой стандарт HTML (Living) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 09.10.2018

Редакторы: Влад Мержевич

webref.ru

Тег | HTML справочник

HTML теги

Значение и применение

HTML заголовки определяются тегами от <h2> до <h6>:

<h2> определяет наиболее важные заголовки, а <h6> определяет наименее важные заголовки (<h2> заголовки должны быть основными заголовками, затем следуют заголовки <h3> и так далее). Браузеры автоматически добавляют пустое пространство до и после каждого заголовка.

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

Настоятельно рекомендуется использовать только один заголовок первого уровня на одной странице.

Поддержка браузерами

Атрибуты

АтрибутЗначениеОписание
alignleft
right
center
justify
Не поддерживается в HTML5.
Определяет выравнивание текста в заголовке. Используйте CSS свойство text-align вместо данного атрибута.

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

В данном примере рассматривается применение заголовков от первого до шестого уровня.

<!DOCTYPE html>
<html>
	<head>
		<title>Использование заголовков в HTML</title>
	</head>
	<body>
		<h2>Здесь содержится заголовок первого уровня</h2>
		<h3>Здесь содержится заголовок второго уровня</h3>
		<h4>Здесь содержится заголовок третьего уровня</h4>
		<h5>Здесь содержится заголовок четвертого уровня</h5>
		<h5>Здесь содержится заголовок пятого уровня</h5>
		<h6>Здесь содержится заголовок шестого уровня</h6>
	</body>
</html>

Результат нашего примера:

Пример использования заголовков от <h2> до <h6> в HTML.

Отличия HTML 4.01 от HTML 5

Атрибут align не поддерживается в HTML5.

Значение CSS по умолчанию

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

Поддержка глобальных атрибутов

Элемент поддерживает «глобальные атрибуты».

Атрибуты событий

Элемент поддерживает «атрибуты событий».

HTML теги

basicweb.ru

| Справочник HTML



Элементы <h2> ‒ <h6> (от англ. «header» ‒ «заголовок») создают заголовки разного уровня в документе. <h2> ‒ высший уровень (наивысшая важность), <h6> ‒ низший уровень (наименьшая важность). Заголовки обычно используются в порядке, соответствующем их уровню.

По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше, а текст заголовка <h5> имеет тот же размер, что и стандартный текст. Элементы <h2> ‒ <h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство (margin).

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

Примечание: Заголовок <h2> должен использоваться только один раз на странице.

Правила составления главного заголовка <h2>:

  • В заголовке <h2> должны использоваться ключевые слова, применяемые для продвижения html-страницы.
  • Не стоит делать заголовок <h2> слишком объёмным, содержание заголовка должно быть уникальным, ёмким и тематичным.
  • Заголовок <h2> не должен содержать ничего кроме самого текста.
  • Содержание <h2> должно соответствовать тематике, указанной в теге <title> веб-страницы.
  • Не стоит делать заголовок <h2> полной копией тега <title>.
  • Не перечисляйте в заголовке ключевые фразы через запятую. Содержание <h2> должно быть понятно как поисковикам, так и посетителям сайта.

Синтаксис

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

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

Обязателен.

Атрибуты

alignУстарел в HTML5
Определяет горизонтальное выравнивание содержимого элемента.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <h2> со следующими значениями CSS по умолчанию:

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

Различия между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается. Используйте стили CSS.

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

Элементы <h2> ‒ <h6>

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

Пример HTML:

Попробуй сам
<h2>Заголовок первого уровня</h2>
<h3>Заголовок второго уровня</h3>
<h4>Заголовок третьего уровня</h4>
<h5>Заголовок четвертого уровня</h5>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Спецификации

Поддержка браузерами

Элемент
<h2> 2+ 1+ 2+ 1+ 1+ 1+
Элемент
<h2> 1+ 1+ 6+ 1+

Похожие страницы

HTML уроки: HTML Элементы

HTML уроки: HTML Базовые теги



wm-school.ru

HTML теги h2, h3, h4, h5, h5, h6

Поддержка браузерами

Описание

HTML теги <h2>, <h3>, <h4>, <h5>, <h5> и <h6> (h сокращение от англ. слова heading — заголовок) используются для определения заголовков на веб-странице. Каждый из них имеет определенный вес (важность), которая определяется цифрой после буквы

h, таким образом <h2> — имеет наибольшую важность, а <h6> — наименьшую.

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

HTML заголовки дают возможность посетителям быстро сориентироваться на странице, на которой зачастую бывает море информации, быстро пробегая глазами по заголовкам, они сразу отмечают для себя, на чём стоит остановиться. Правильное использование тегов заголовков даст возможность не только визуально ориентироваться на странице (этого можно добиться используя любые теги совместно с CSS), но и даст возможность так же уверенно находить нужное людям с ограниченными возможностями, которые используют к примеру речевые браузеры.

Атрибуты

Теги <h2> — <h6> поддерживают Глобальные атрибуты и События

Стиль по умолчанию


h2, h3, h4, h5, h5, h6 {
	display: block;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

h3 {
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}

h4 {
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
}

h5 {
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

h5 {
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
}

h6 {
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
}

Пример


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

Результат данного примера в окне браузера:

puzzleweb.ru

Как правильно использовать элементы HTML h2-H6

1.4K

Теги h2 h3 обозначают заголовки разделов. Хотя порядок и размещение заголовков в HTML DTD не ограничивается, в документе не должны пропускаться уровни (например, от h2 сразу к h4), так как преобразование таких документов в другие представления часто проблематично. W3C


Но для структурирования страниц не обязательно использовать все шесть HTML элементов.

Например:

<h2>Основы разработки сайтов<h2>
<p>Какой-либо текст</p>
<h3>HTML</h3>
<p>Какой-либо текст</p>
<h3>CSS</h3>
<p>Какой-либо текст</p>

Я всегда использую на странице только один элемент h2. Google раньше рекомендовал делать именно так.

Многие утверждают, что в некоторых случаях имеет смысл размещать на странице более одного h2 тега (и HTML5, безусловно, позволяет это сделать).

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

Я обычно стараюсь задействовать иерархию не ниже уровня 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

В HTML5 атрибут align не поддерживается. Используйте стили CSS.

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

Атрибут Описание
align Определяет горизонтальное выравнивание содержимого элемента

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

Теги <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

Отправить ответ

avatar
  Подписаться  
Уведомление о