Nội dung thẻ điều hướng HTML5

Question

Có vẻ như có các ví dụ xung đột trong các tài liệu liên quan đến thẻ <nav> trong html5. Hầu hết các ví dụ tôi đã thấy sử dụng điều này:

<nav> 
    <ul> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    <li><a href='#'>Link</a></li> 
    </ul> 
</nav> 

Nhưng tôi tự hỏi nếu đó chỉ là vì mọi người thường sử dụng div. Có những ví dụ mà tôi đã nhìn thấy mà chỉ đơn giản làm

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav> 

Cách thứ hai này có vẻ sạch hơn và ngữ nghĩa hơn đối với tôi. Có phiên bản chính thức "chính thức" không? Có lý do chính đáng nào để vẫn sử dụng một số <ul> bên trong thẻ điều hướng thay vì chỉ sử dụng các phần tử neo trực tiếp không?

Answer 1

Cả hai ví dụ đều là ngữ nghĩa.

Trong ví dụ đầu tiên, danh sách các neo rõ ràng là một danh sách không có thứ tự. Trong ví dụ thứ hai, danh sách các liên kết chỉ là một tập hợp các phần tử neo.

Nếu bạn chỉ đơn giản là muốn có một bộ sưu tập một chiều của các liên kết, tôi khuyên bạn nên gắn bó với

<nav> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
    <a href='#'>Link</a> 
</nav> 

tuy nhiên

, sử dụng ul yếu tố cho phép cho các menu thứ bậc rõ ràng (ví dụ như thả xuống hoặc cây tổng quát):

<nav> 
    <ul> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    <li> 
     <a href="#">Link</a> 
    </li> 
    <li> 
     <a href="#">Link</a> 
     <ul> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     <li> 
      <a href="#">Sub link</a> 
     </li> 
     </ul> 
    </li> 
    </ul> 
</nav> 

Answer 2

Sự khác biệt thực sự duy nhất có thể là cách công cụ tìm kiếm có thể xem các liên kết. Khi trong một danh sách không có thứ tự, ví dụ Google có thể hiểu rằng tất cả các mục trong danh sách đó đều có liên quan. Trong ví dụ thứ hai, Google cũng có thể giả định rằng không có liên kết nào có liên quan. Google có thể sử dụng thông tin đó để lập chỉ mục và hiển thị thông tin của bạn chính xác hơn.

Chúng có thể hiển thị giống nhau, nhưng thực sự có rất nhiều đánh dấu về cách thông tin sẽ được hiển thị nếu không có kiểu nào được đính kèm với trang hoặc nếu bot đang tìm kiếm thông tin liên quan trên trang web của bạn.

Answer 3

Bạn cũng có thể sử dụng.

Danh sách chỉ có xu hướng được sử dụng làm danh sách liên kết thường là danh sách đó. Nhưng nó là tùy thuộc vào bạn.

Answer 4

Không có sự khác biệt thực sự nào giữa chúng. Tuy nhiên như Caimen cho biết, công cụ tìm kiếm sử dụng đánh dấu trang để nhóm dữ liệu để có kết quả tìm kiếm web tốt hơn. Tôi khuyên bạn nên sử dụng đầu tiên nếu các liên kết khá giống nhau về chủ đề (ví dụ: cho blog) và thứ hai nếu liên kết không giống nhau (để điều hướng kết quả từ tìm kiếm trang web).