Как правильно выбрать тег для заголовка?

Question

[Hellanio]

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

Я делал так:

<h2>Know about us</h2>
<h3>We help nature smile and survive everywhere</h3>

Но потом нашел этот сайт, макет которого использовал и у них сделано наоборот. И я запутался. Мне кажется, что заголовок Know about us больше подходит для h2 и описывает секцию. Правильно ли я сделал?

Comments

[Вадим]

Один из подходов как решить какой использовать заголовок - это удалить все стили и представить страницу в виде документа. Например, документа word.
Далеко не всегда заголовок будет прорисован дизайнером, но вот какой-то крупный текст вполне может быть отрисован. Это не значит что этот текст - заголовок. В таком случае хороший верстальщик сделает скрытый заголовок.
гуглите паттерн visualy-hidden и почему именно он, а не display: none. (Если коротко - доступность и индексация)

Соответственно, в каждом документе есть разделы. Заголовки должны кратко описывать о чём раздел.
About us - описывает раздел. То есть даёт пользователю чёткое понимание контекста о чём будет контент ниже, вплоть до следующего заголовка такого же уровня.

"We help nature smile and survive everywhere" - не заголовок. Это уже какой-то вольный текст. Если это подраздел секции "about us", то заголовком для этого подраздела было бы актуально сделать что-то вроде "helping nature"

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

P.s. ну а для seo ещё хорошо если заголовок будет в какой-то степени отвечать поисковым запросам, по которым ищут компанию.

[Hellanio]

Вадим, Спасибо. Visualy-hidden я использую, с этим проблем нет. Просто затупил в конкретном макете. Потому что по моей логике "О нас" это и было заголовком секции, но когда нашел верстку этого макета, то его разработчики сделали иначе. Тогда и засомневался) Я представил, что сайт будет на русском языке и вместо тех фраз будет "О нас" и "Наша компания N заботится об окружающей среде". Немного адаптировал перевод.

Для меня тут опять же остается два варианта. С точки зрения структуры сайта, заголовок "О нас" описывает секцию и логично бы сделать его h2, но вот "Наша компания N заботится об окружающей среде", подходит под сеошный заголовок. И я не знаю не является ли ошибкой делать такие заголовки ниже уровнем. В данном случае h3.

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

Answer 1

[Beliyadm]

"Know about us" вообще ни о чем не говорит, можно сделать хоть спаном
А вот нижний, "We help nature" я бы сделал H1 как основной

Comments

[Hellanio]

Для h1 он точно не подходит. Это не главный заголовок сайта. А почему вот Know about us ни о чем не говорит, если это секция сайта "О нас" с описанием компании?

[Beliyadm]

Hellanio, Я не очень внимательно прочитал, если это заголовки секций (несколько на странице) - то "We help nature" делайте как H2, а то что вверху с декоративным элементом - вообще без разницы как, спан\див, что угодно.
Я обычно использую Н2 как подзаголовки секций (о нас\преимущества\отзывы\контакты и тд), если внутри у них есть что-то типа списка - то Н3 как заголовки внутри уже и так далее. Но это совершенно необязательно.

[Beliyadm]

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

[Hellanio]

Beliyadm, Спасибо. У меня просто была такая логика, что если это секция "О нас", то Know about us должен быть главным заголовком этой секции. Значит, я не правильно мыслил) А если бы в секции после Know about us не было бы другого заголовка, а шел бы параграф, то тогда он бы был h2?

[Beliyadm]

Hellanio, Да можно сделать и так, Н2 как основной заголовок "О нас" а слоган ниже спаном.
Понимаете - тут нет правил как правильно, точнее они есть, но их не знает никто кроме маркетологов поисковых систем, логика работы которых постоянно меняется.
Все зависит от дизайна, от текстовок, от UX, нет единого правила.
Например тут (не реклама) karaokeb2.ru я вот эти декоративный заголовки сделал н4 а ниже н3 (кроме хедера, там Н1) - и ничего, сеошникам пофиг

[Hellanio]

Beliyadm, Спасибо

Answer 2

[smigles]

H1 — это название страницы, не сайта (разве что на главной странице название сайта одновременно может выступать названием страницы). Все другие заголовки выступают как названия разделов на странице: H2 озаглавливают разделы верхнего, первого, уровня; H3 озаглавливают разделы второго уровня и т. д.

Если «Know about us» — это название раздела первого уровня, то оберните его в H2. Если «We help nature smile and survive everywhere» называет одну из секций внутри «Know about us», то оберните «We help…» в H3. Если же это просто слоган и других секций внутри H2 нет, то «We help…» — это не заголовок, а просто абзац, который через CSS как-то особо оформлен (например, большим шрифтом).