nhiều thẻ <nav>


97

Chúng ta có thể sử dụng nhiều thẻ trên cùng một trang trong html5 không?

Tôi đã đọc này bài viết về Zeldman.com nhưng nó không hoàn toàn rõ ràng với tôi

I E

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

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

1
Role = 'main' dùng để xác định nội dung chính trên trang web của bạn w3.org/TR/wai-aria/roles#main và không có vai trò nào đối với danh sách blog. Tôi nghĩ bạn muốn sử dụng vi dữ liệu - schema.org .
Andrew Luhring

Câu trả lời:


142

Chắc chắn rồi. Bạn có thể có nhiều header, navfooterthẻ sans phạt.

Miễn là bạn đảm bảo rằng bạn đang sử dụng thẻ theo ngữ nghĩa và bạn không đặt chúng ở những nơi không hợp lệ (chúng là các phần tử cấp khối, vì vậy bạn không thể đặt chúng bên trong một phần tử nội tuyến) thì bạn không nên đừng lo lắng quá nhiều về những gì các sticklers đang nói. Tất cả đều dễ bị cuốn vào tranh cãi về những chi tiết nhỏ thay vì tiếp tục thực hiện dự án của bạn.


2
Làm thế nào về nhiều điều hướng trong cùng một chân trang?
igasparetto

4
@igasparetto Hoàn toàn hợp lệ, đặc biệt nếu bạn đang sử dụng nó theo cách thể hiện cấu trúc của nội dung chứ không chỉ để tạo kiểu thuận tiện.
coreyward

Có hướng dẫn nào về những nhãn tiêu chuẩn nào nên được sử dụng cho các loại điều hướng không? Cụ thể: điều hướng chính, điều hướng phụ, điều hướng tiện ích (ví dụ: liên kết nhanh) và điều hướng chân trang? Ngoài ra, nếu <nav>đã có bên trong <footer>thẻ, thì việc áp dụng có thừa aria-label="footer navigation"không?
chunk_split

1
@chunk_split Tôi nghĩ tốt hơn là bạn nên đặt một câu hỏi mới, mặc dù tôi không chắc StackOverflow là cộng đồng phù hợp. Đối với các thuộc tính ARIA, có thể an toàn để thêm chúng ngay cả khi chúng có vẻ thừa.
coreyward

3

Câu trả lời là có. Bạn có thể có một <nav>thẻ ở chân trang, để biết thêm thông tin, hãy kiểm tra tài liệu mdn<nav> .


Làm tốt việc cung cấp một liên kết có thẩm quyền. Trang được liên kết, trong Ghi chú sử dụng của nó, đặc biệt nêu rõ "một tài liệu có thể có một số <nav>phần tử".
Ed Gibbs

2

Có, có nhiều <nav>yếu tố là hoàn toàn ổn.

Bạn chỉ cần đảm bảo rằng bạn đang làm cho chúng dễ phân biệt với những người sử dụng trình đọc màn hình. Bạn có thể làm điều đó bằng cách dán nhãn mỗi lần <nav>sử dụng aria-label.

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

Hoặc, nếu một trong những <nav>văn bản hiển thị trên màn hình có thể được xác định là phần tử gắn nhãn, bạn có thể sử dụng aria-labelledbynhư sau:

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

Bạn có thể đọc thêm về cách sử dụng Nhiều Mốc điều hướng .

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.