HTML Иерархия.Вот что такое «правильная» форма?

Question

Допустим, я хочу, чтобы заголовок моего сайта был сделан с помощью HTML5 семантическим способом, который также будет полезен для SEO.Какова правильная иерархия элементов?Вот что у меня есть, скажите мне, если вы видите что-то не так, спасибо.

<header>
    <hgroup>
        <a href="/"><h1>My Site Title</h1></a>
    </hgroup>
</header>

Или тег должен быть снаружи, а якорь внутри?Что лучше для стиля и просто семантика в целом, спасибо.

ETA: Кроме того, попробуйте и углубиться, я хотел бы узнать больше об иерархии в заголовках.Кроме того, это предполагает, что у меня есть больше контента, я включил группу, чтобы добавить к вопросу.

Answer 1

Ни один поисковик не использует header или hgroup на данный момент. hgroup находится под постоянной угрозой исключения из спецификации и игнорируется всеми. Я использую его, потому что я создаю оглавления и схемы для своих сообщений, но если вы не планируете обрабатывать их самостоятельно, забудьте об этом. hgroup даже в том случае, если это определено только там, если у вас есть несколько hn эльтов внутри. header может стоить того, чтобы включить его, если вы беспокоитесь о будущем своего шаблона для будущих программ чтения с экрана.

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

Answer 2

Наряду со всем, что вам уже сказали, мистер Гарлиес, я настоятельно призываю вас ознакомиться с валидаторами HTML5 и «линтерами». Если эта область является новой для вас, начните с подачи страницы с примером http://validator.w3.org/;, вы, вероятно, многому научитесь.

Answer 3

Если у вас есть только один тег <h1>, вам не нужен элемент <hgroup>, плюс можно спорить о размещении <a> внутри <h1>, а не наоборот, это не повлияет семантика, но размещение ее вне имеет некоторые преимущества стиля по умолчанию (такие как большая область щелчка). Так что семантически правильный код (на мой взгляд) будет:

<header>

    <a href="/"><h1>Site Title</h1></a>

</header>

Почему нет <hgroup>?

Поскольку цель <hgroup> состоит в том, чтобы сгруппировать заголовки, которые служат одной и той же цели, например:

<h1>Site Title</h1>
<h2>Longer Site Description</h2>

может привести к неожиданным результатам для программ чтения с экрана и поисковых систем, поэтому <hgroup> здесь, чтобы решить эту проблему:

<hgroup>
    <h1>Site Title</h1>
    <h2>Longer Site Description</h2>
</hgroup