Jump to content
  • 0

Про заголовки (h*)

BehemothOz

Asked by BehemothOz,

 Share

Question

BehemothOz Explorer

BehemothOz

Posted
Posted

Добрый вечер (или день!) 

Вопрос (надеюсь) простой, а именно: "Как правильно располагать заголовки на странице?"

 

Они должны соблюдать иерархию? (От 1 > 6) 

Или можно ее нарушать? (Например, раздел сайта с заголовком h2, в нем три блока с заголовками h5)

И как дело обстоит в section и article? Как я понимаю, в них используется своя структура заголовков?

 

И последний вопрос. Можно ли использовать заголовок в списке (ul)? Где вместо первого li становится этот самый заголовок. 

 

 

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
Q4Dizzy Explorer

Q4Dizzy

Posted
Posted (edited)

По сути... 

 

 

Они должны соблюдать иерархию? (От 1 > 6) 

ДА! (Может с этим не согласятся, но меня учили по старой школе именно так и web-developer матерится на это, если иерархия нарушена)

в section обязан быть заголовок.. при проверке валидатором об этом выдаётся предупреждение (не ошибка)

 

по поводу li.. в ul или ol могут находится ток li(потомки), в них может быть, что угодно..

 

Кстати не забываем, что h1 может быть только 1 раз на странице...

Edited by Q4Dizzy
Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted
Кстати не забываем, что h1 может быть только 1 раз на странице...

  Вот и я так считал пока не посмотрел довольно толковый обзор семантического распределения тегов.  Там довольно ясно объяснялось когда не только можно но и нужно использовать более 1го h1 заголовка.

  Опять таки ни спецификация, ни здравый смысл не объясняет почему же всё таки только 1 заголовок. На мой взгляд корни этой уверенности растут из SEO заморочек, в рамках  раскрутки тематики одной конкретной страницы.

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted

Почему же здравый смысл не объясняет?

h1 это заголовок всей страницы

если их два, то либо у нас 2 страницы либо второй заголовок меньшей значимости и он не h1 а h2

 

и нечего делать винегрет :)

 

 

Главное здравый смысл - спецификацию можно нарисовать любую.

Ну и чтобы узнать насколько алгоритм соответствует здравому смыслу нужно просто сделать опыт и посмотреть что же лучше схавает ПС

Link to comment
Share on other sites
  • 0
Igor Schnaider Contributor

Igor Schnaider

Posted
Posted
Кстати не забываем, что h1 может быть только 1 раз на странице...

 

Мне кажется, это не совсем корректно. То есть, можно же ведь так:

<!-- instead --><h1>Head #1</h1><h2>Head #2</h2><h2>Head #3</h2><h3>Head #4</h3><!-- this --><h1>Head #1</h1><section>  <h1>Head #2</h1></section><section>  <h1>Head #3</h1>  <section>    <h1>Head #4</h1>  </section></section>
Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted (edited)

 Давайте разберемся что такое заголовок в принципе. Это заглавие, вводная часть к какому то блоку информации. То есть выделяет он что то конкретное по смыслу. Правильно ? Ok.

 

  Допустим есть у нас сайт с 5 страницами, каждая из которых содержит свой h1.  Решили мы сделать редизайн и всё поместили на одну страницу, с переключением по вкладкам. Тут сразу возникает 2 вопроса.

 1. Смысл контента не изменился, почему же нам следует убирать h1 заголовки ?

 2. Где теперь взять этот самый h1, который заголовок "всей страницы" ?

 

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

Edited by andrey7287
Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted

никто не спорит что можно из целого сайта в 100 страниц сделать одну страницу и туда налепить 100 h1 и пытаться найти обоснование такого подхода "ну мы же сделали редизайн"

более того, я не спорю, что можно вообще выкинуть все теги div p section и т.д и заменить их h1 - и даже работать будет

 

Если автор страницы не может выделить ключевой заголовок для своего посыла (текста) то уверен ли автор, что подобная страница поможет пользователю, который будет ее читать?

я не утверждаю, что ПС будет негативно смотреть на несколько h1 - это можно проверить

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

Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

Логика страницы как правило - донести какую-то информацию до пользователя 1 статья = 1 странице.

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

Предположим каждая статья у нас состоит в среднем из 100 слов. H1 должен иметь ключевые слова которые раскрывают тему статьи.

Расчет веса вашей страницы в поиске будете образно говоря обратно пропорциональным количеству слов и прямо пропорциональным наличию ключевых слов из заголовка в тексте. Теперь подумайте что будет релевантнее: страница со 100 словами в которой 10 ключевых слов или с 500 в которой так же 10 ключевых слов?

Мне бы было приятно читать информативную короткую статью, а не длиннющий пост с отклонениями от темы, который возможно даже и не раскрывает нужной мне темы (так же думают и поисковики)

Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted
нито не спорит что можно из целого сайта в 100 страниц сделать одну страницу и туда налепить 100 h1 и пытаться найти обоснование такого подхода "ну мы же сделали редизайн" более того, я не спорю, что можно вообще выкинуть все теги div p section и т.д и заменить их h1 - и даже работать будет  
 

 

  Давайте не будем кидаться в крайности и уходить от простого вопроса.  

 

Если автор страницы не может выделить ключевой заголовок для своего посыла (текста) то уверен ли автор, что подобная страница поможет пользователю, который будет ее читать?

 

 Это вообще не ваше дело. Сайт уже есть.

 

Мне бы было приятно читать информативную короткую статью, а не длиннющий пост с отклонениями от темы, который возможно даже и не раскрывает нужной мне темы (так же думают и поисковики)

  Ну будет якорь висеть на вашу короткую часть статьи, в чем проблема то... 

Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted

  

ботам глубоко плевать на якоря

А мне глубоко плевать на ботов, отвечал на это

Мне бы было приятно читать информативную короткую статью, а не длиннющий пост
 
Link to comment
Share on other sites
  • 0
Switch74 Rising Star

Switch74

Posted
Posted

 

ботам глубоко плевать на якоря

А мне глубоко плевать на ботов, отвечал на это

 

Мне бы было приятно читать информативную короткую статью, а не длиннющий пост

ок :)

но мне кажется бессмысленным грузить статью про болты, когда я хочу почитать про пряники

Link to comment
Share on other sites
  • 0
ShumNo Explorer

ShumNo

Posted
Posted


Если автор страницы не может выделить ключевой заголовок для своего посыла (текста) то уверен ли автор, что подобная страница поможет пользователю, который будет ее читать?

 Это вообще не ваше дело. Сайт уже есть.

 

Неужто на свой счет приняли? хы-хы

Можете хоть 200 поставить h1 я не против :)

 

 


ботам глубоко плевать на якоря

А мне глубоко плевать на ботов, отвечал на это

Как это вам плевать на ботов? А чего же это вы тогда участвуете в подобном флейме обсуждая сколько там каких заголовков должно быть? Они же для ботов, а вам на них плевать.

Link to comment
Share on other sites
  • 0
andrey7287 Explorer

andrey7287

Posted
Posted
Неужто на свой счет приняли? хы-хы

Можете хоть 200 поставить h1 я не против

 

  Вы странный. При чём тут я, 200 заголовков и прочая демагогия. Был задан простой вопрос ... 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept