кілька тегів <nav>


97

Чи можемо ми використовувати кілька тегів на одній сторінці в html5?

Я прочитав цю статтю на Zeldman.com, але мені це не зовсім зрозуміло

тобто

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

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

1
Роль = 'main' призначена для ідентифікації основного вмісту вашого веб-сайту w3.org/TR/wai-aria/roles#main , і роль ролору в блозі відсутня. Я думаю, ви маєте на увазі використання мікроданих - 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>тег у нижньому колонтитулі, для отримання додаткової інформації перевірте документацію mdn<nav> .


Хороша робота, забезпечуючи авторитетне посилання. Сторінка, на яку посилається, у своїх примітках до використання конкретно зазначає, що "документ може мати кілька <nav>елементів".
Ед Гіббс,

2

Так, наявність декількох <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>

Ви можете прочитати більше про використання декількох навігаційних орієнтирів .

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.