несколько тегов <nav>

97

Можем ли мы использовать несколько тегов на одной странице в html5?

Я прочитал эту статью на Zeldman.com, но мне она не совсем понятна

т.е.

<header><nav>links here</nav></header>

<footer><nav>links here</nav></footer>

html

— Стивенмердок
источник

1

Role = 'main' используется для определения основного содержания вашего сайта w3.org/TR/wai-aria/roles#main , а роль для blogroll отсутствует. Я думаю, вы хотите использовать микроданные - schema.org .

— Эндрю Люринг

142

Да, конечно. Вы можете иметь несколько header, navи footerтег SANS штрафа.

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

— Коривард
источник

2

Как насчет нескольких элементов навигации в одном нижнем колонтитуле?

— igasparetto

4

@igasparetto Совершенно верно, особенно если вы используете его таким образом, который представляет структуру контента, а не просто для удобства стилизации.

— Coreyward

Есть ли какие-либо рекомендации о том, какие стандартные метки следует использовать для типов навигации? В частности: основная навигация, поднавигация, вспомогательная навигация (например, быстрые ссылки) и навигация по нижнему колонтитулу? Кроме того, если <nav>он уже находится внутри <footer>тега, будет ли он применяться повторно aria-label="footer navigation"?

— chunk_split

1

@chunk_split Я думаю, вам лучше задать новый вопрос, хотя я не уверен, что StackOverflow - подходящее сообщество. Что касается атрибутов ARIA, их можно безопасно добавлять, даже если они кажутся избыточными.

— Coreyward

3

Ответ положительный. У вас может быть <nav>тег в нижнем колонтитуле, для получения дополнительной информации обратитесь к <nav>документации mdn .

— Гарольд Рамос
источник

Хорошая работа с авторитетной ссылкой. На связанной странице в своих примечаниях по использованию конкретно указано, что «документ может иметь несколько <nav>элементов».

— Эд Гиббс

3

Да, наличие нескольких <nav>элементов - это нормально.

Вам просто нужно убедиться, что вы делаете их различимыми для людей, использующих программы чтения с экрана. Вы можете сделать это, пометив каждое <nav>использование aria-label.

<nav aria-label=’primary’>
  <ul>
    ...List on links here...
  </ul>
</nav>
<nav aria-label=’secondary’>
  <ul>
    ...List on links here...
  </ul>
</nav>

Или, если один из <nav>видимых на экране текста, который можно идентифицировать как элемент метки, можно использовать aria-labelledbyследующим образом:

<nav aria-label="Site Menu">
  <ul>
    ...List on links here...
  </ul>
</nav>
<article>
  <h1>Title</h1>
  ...
  <nav aria-labelledby="id-1">
    <h2 id="id-1">
      Related Content
    </h2>
    <ul>
      ...List on links here...
    </ul>
  </nav>
</article>

Вы можете узнать больше об использовании нескольких ориентиров .

— Лукаланка
источник