Tôi có nên sử dụng <ul> s và <li> bên trong <nav> của mình không?

Tiêu đề giải thích khá nhiều về nó.

Bây giờ chúng tôi có một <nav>thẻ chuyên dụng ,

Có phải đây là:

<nav>
  <ul>
    <li><a href="#foo">foo</a></li>
    <li><a href="#bar">bar</a></li>
    <li><a href="#baz">baz</a></li>
  </ul>
</nav>

cái nào tốt hơn cái nào sau đây?

<nav>
  <a href="#foo">foo</a>
  <a href="#bar">bar</a>
  <a href="#baz">baz</a>
</nav>

Ý tôi là, giả sử rằng tôi không cần thêm cấp DOM cho một số định vị / đệm CSS, thì cách ưa thích là gì và tại sao?

phần tử điều hướng và danh sách cung cấp thông tin ngữ nghĩa khác nhau:

• Phần tử điều hướng thông báo rằng chúng tôi đang xử lý một khối điều hướng chính

• Danh sách thông báo rằng các liên kết bên trong khối điều hướng này tạo thành một danh sách các mục

Tại http://w3c.github.io/html/section.html#the-nav-element, bạn có thể thấy rằng một phần tử điều hướng cũng có thể chứa văn xuôi.

Vì vậy, có, có một danh sách bên trong một phần tử điều hướng sẽ thêm ý nghĩa.

Tại thời điểm này, tôi sẽ giữ lại các <ul><li>yếu tố, lý do là không phải tất cả các trình duyệt đều hỗ trợ thẻ HTML5.

Ví dụ: tôi đã gặp phải sự cố khi sử dụng <header>thẻ - Chrome và FF hoạt động như một sự quyến rũ, nhưng Opera bị hỏng.

Cho đến khi tất cả các trình duyệt hỗ trợ HTML hoàn toàn, tôi sẽ gắn chúng vào, nhưng dựa vào các trình duyệt cũ để tương thích ngược.

Nó thực sự phụ thuộc vào bạn. Nếu bạn thường sử dụng danh sách không có thứ tự để đánh dấu menu điều hướng của mình, thì tôi muốn nói rằng hãy tiếp tục làm như vậy trong phần tử <nav>. Mục đích của phần tử <nav> là xác định điều hướng của trang web đến trình đọc máy tính, vì vậy, cho dù bạn sử dụng danh sách hay đơn giản là các liên kết đều không quan trọng.

Đối với tôi, danh sách không có thứ tự là đánh dấu bổ sung không thực sự bắt buộc. Khi tôi xem một tài liệu HTML, tôi muốn nó càng sạch sẽ và dễ đọc càng tốt. Người xem đã rõ ràng rằng một danh sách đang được trình bày nếu sử dụng thụt lề thích hợp. Do đó, việc thêm UL vào các thẻ a này là không cần thiết và làm cho việc đọc tài liệu trở nên khó khăn hơn.

Mặc dù bạn có thể có được một số tính linh hoạt, nhưng tôi tin rằng tốt hơn hết là không nên đánh dấu bằng các lớp ul không hợp lý và tạo kiểu cho các phần tử trong một cái bị trượt. Và bạn không có lý do gì: sử dụng: trước và: sau bộ chọn giả.

Chỉnh sửa : Tôi được biết rằng một số trình đọc màn hình ARIA xử lý danh sách khác với các thẻ liên kết đơn giản. Nếu trang web của bạn hướng đến người khuyết tật, tôi có thể cân nhắc sử dụng phương pháp dựa trên danh sách.

Không, chúng tương đương nhau. Hãy nhớ rằng HTML 5 tương thích ngược với danh sách HTML 4, vì vậy bạn có thể thoải mái sử dụng chúng trong cùng một khía cạnh. Đánh đổi là ít mã hơn cho phiên bản thứ 2.

Nếu bạn lo lắng về khả năng tương thích ngược đối với các trình duyệt, hãy đảm bảo bao gồm miếng đệm này để cung cấp chức năng của các thẻ như <nav>và <article>.

Nếu chúng ta đang nói "bởi cuốn sách", thì không; bạn không cần sử dụng danh sách để đánh dấu điều hướng của mình. Ưu điểm thực sự duy nhất mà chúng mang lại là mang lại mức độ linh hoạt tốt hơn khi tạo kiểu.

Tôi muốn giữ <ul><li>thẻ, vì các thẻ mới ( <nav>, <section>, <article>và vân vân) chỉ là phiên bản ngữ nghĩa hơn <div>s.

Vì lý do tương tự, bạn sẽ không chỉ có một lượng liên kết trong một <div>mà chúng cũng phải được cấu trúc bên trong <nav>thẻ.

Có một bài đăng thực sự chi tiết trên Thủ thuật CSS về câu hỏi chính xác này. Đó rõ ràng là một vấn đề được tranh luận sôi nổi; bài đăng có hơn 200 bình luận.

Điều hướng trong danh sách: Có hay không (Thủ thuật CSS, tháng 1 năm 2013)