wiele tagów <nav>

97

Czy możemy używać wielu tagów na tej samej stronie w html5?

Przeczytałem ten artykuł na Zeldman.com, ale nie jest dla mnie do końca jasny

to znaczy

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

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

html

— stephenmurdoch
źródło

1

Role = 'main' służy do identyfikacji głównej zawartości Twojej witryny w3.org/TR/wai-aria/roles#main i nie ma roli dla blogroll. Myślę, że zamierzasz używać mikrodanych - schema.org .

— Andrew Luhring

142

Tak, absolutnie. Można mieć wiele header, navi footeretykietami SANS kary.

Dopóki upewniasz się, że używasz tagów semantycznie i nie umieszczasz ich w nieprawidłowych miejscach (są to elementy blokowe, więc nie możesz ich umieścić na przykład wewnątrz elementu wbudowanego), nie powinieneś Nie przejmuj się zbytnio tym, co mówią pedały. Łatwo jest dać się złapać w kłótnię o drobne szczegóły, zamiast posuwać się naprzód w swoim projekcie.

— coreyward
źródło

2

A co z wieloma nawigacjami w tej samej stopce?

— igasparetto

4

@igasparetto Całkowicie poprawne, zwłaszcza jeśli używasz go w sposób, który odzwierciedla strukturę treści, a nie tylko dla wygody stylizacji.

— coreyward

Czy są jakieś wskazówki dotyczące tego, jakie standardowe etykiety powinny być używane w przypadku typów nawigacji? W szczególności: nawigacja główna, nawigacja podrzędna, nawigacja po usługach (np. Szybkie łącza) i nawigacja w stopce? Ponadto, jeśli <nav>jest już w <footer>tagu, czy nie ma sensu go zastosować aria-label="footer navigation"?

— chunk_split

1

@chunk_split Myślę, że lepiej zadać nowe pytanie, chociaż nie jestem pewien, czy StackOverflow to właściwa społeczność. Jeśli chodzi o atrybuty ARIA, można je bezpiecznie dodać, nawet jeśli wydają się zbędne.

— coreyward

3

Odpowiedź brzmi tak. Możesz mieć <nav>tag w stopce, więcej informacji znajdziesz w <nav>dokumentacji mdn .

— harold ramos
źródło

Dobra robota, podając wiarygodny link. Strona, do której prowadzi łącze, w swoich uwagach dotyczących użytkowania wyraźnie stwierdza, że „dokument może mieć kilka <nav>elementów”.

— Ed Gibbs

2

Tak, posiadanie wielu <nav>elementów jest absolutnie w porządku.

Musisz tylko upewnić się, że są one rozpoznawalne dla osób korzystających z czytników ekranu. Możesz to zrobić, oznaczając każdy <nav>za pomocą aria-label.

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

Lub, jeśli jeden z <nav>widocznych tekstów na ekranie, który można zidentyfikować jako element etykiety, możesz użyć w aria-labelledbynastępujący sposób:

<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>

Możesz przeczytać więcej o korzystaniu z wielu punktów nawigacyjnych .

— lucalanca
źródło