Следует ли нам использовать для глобальной навигации, так как это разделение контента?

Предыстория

С точки зрения SEO, <h1> следует использовать только в качестве содержимого конкретной страницы, и мы должны избегать использования его для логотипа сайта. Таким образом, текущая структура домашней страницы должна быть примерно такой:

<body>
<header>
  <p><img id="logo">
  <nav>
    <ul></ul>
  </nav>
</header>
<main>
  <h1>Homepage</h1>
  <!-- Content -->
</main>
<footer>
  <nav>
    <ul></ul>
  </nav>
  <p>Copyright
</footer>

Но приведенный выше код дал эту схему в Описателе HTML5:

  1. Домашняя страница
    1. Раздел без названия (навигация)
    2. Раздел без названия (навигация)

В проблема

Поскольку <nav> является разделением контента, следует ли нам избегать его использования для глобальной навигации, поскольку логически это не навигация по странице?

Author: unor, 2016-08-17
Source

4 answers

В html5 элемент nav должен использоваться для представления раздела страницы, который ссылается на

  • другие страницы или
  • к частям внутри страницы

Таким образом, в зависимости от того, какие ссылки вы указываете в разделе нижнего колонтитула, вы можете не вставлять их в элемент nav:

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

 3
Author: marcanuy, 2016-08-18 02:08:27

Схема вашего примера

Контур, который https://gsnedders.html5.org/outliner / сгенерировано неверно.

Правильный контур разметки вашего примера:

1. Document (<body> without heading)
  1.1. Navigation (<nav> without heading)
2. "Homepage" (implicit section opened by <h1>)
  2.1. Navigation (<nav> without heading)

Я рекомендую "Контур HTML5" для проверки вашего контура или валидатор W3C (проверьте "контур").

(См. https://github.com/hoyois/html5outliner/issues/7 подробнее, почему схема, которую вы процитировали, не правильно.)

Контент, связанный с сайтом, и контент, связанный со страницей

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

Страница с обычного веб-сайта состоит из частей всего сайта, таких как верхний колонтитул, навигация и нижний колонтитул. Чтобы поместить их в область заголовка, вы должны использовать заголовок для body разделяющий корень, который затем представляет сайт.

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
  </header>

  <main>
  </main>

  <footer>
  </footer>
</body>

Теперь документ имеет заголовок ("Пример сайта"), и если вы не добавите другой h1 в корневой раздел body, это будет единственная запись верхнего уровня в структуре - все остальное будет в ее области.

Теперь мы можем добавить nav (для навигации по всему сайту):

  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

(Важно, чтобы nav или любой другой раздел шел после body-заголовок.)

И article (если основным содержанием этой страницы является, например, публикация в блоге): 

  <main>
    <article></article>
  </main>

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

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

Результат

Это дает:

<body>
  <header>
    <h1>Example Site</h1> <!-- could be your logo’s 'alt' -->
    <nav></nav>
  </header>

  <main>
    <article>
      <h2>Example Article</h2>
    </article>
  </main>

  <footer>
  </footer>
</body>

И контур 

1. "Example Site"
  1.1. Navigation (<nav> without heading)
  2.2. "Example Article"

Какова была бы альтернатива?

Если вы не уверены, что имя сайта должно быть заголовок документа (т.Е. h1 для body), обратите внимание, что HTML5 поощряет авторов использовать элементы содержимого разделов (article, aside, nav, section) явно.

Если вы используете article для (например) публикации в блоге в качестве дочернего элемента body, у вас по определению есть запись схемы второго уровня. Вы можете получить запись верхнего уровня только в том случае, если не будете следовать рекомендации (т. Е. Не используете article).

Если у вас есть навигация по всему сайту в nav, это будет в область действия этой записи верхнего уровня (если она появляется после публикации в блоге) или в области заголовка документа без названия (если она появляется до публикации в блоге). Первый вариант неверен (навигация по всему сайту не имеет ничего общего с публикацией в блоге), второй вариант не идеален, потому что у вас есть несколько записей верхнего уровня, а у первого нет метки.

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

Итак, мой совет, основанный на рекомендации HTML5 W3C:

  • Используйте h1 (для корневого раздела body) с именем/логотипом вашего сайта.
  • Используйте nav для навигации (как по всему сайту, так и по всей странице), используйте article/section для вашего контента.
  • Дайте каждому article/section один элемент заголовка (начинающийся с h2).
 2
Author: unor, 2017-05-23 12:37:06

Это зависит от того, является ли веб-сайт, который вы создаете, СПА-центром или полностью серверной частью. Вы можете использовать его для СПА-салона, так как его не нужно будет перезагружать при доступе к основным/подразделам. Я думаю, что webcrawler от Google создан для того, чтобы уделять приоритетное внимание только контенту. Видишь http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824

 1
Author: bydeinon, 2016-08-19 09:15:31

Почему вы использовали <h1> на своей домашней странице? Теги заголовков следует использовать для важных заголовков текста на вашей странице.

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

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

 0
Author: Tony Logarta, 2016-08-18 19:25:51