2012-03-07 32 views
8

Tôi đang tạo menu điều hướng, tôi có nên sử dụng yếu tố <nav> hoặc <ul> yếu tố đó không?Tôi có nên sử dụng nav hoặc ul

Nếu tôi sử dụng nav Tôi sẽ cần phải sử dụng shiv để nó hoạt động trên các trình duyệt.

Nếu đúng như vậy, lợi ích của việc sử dụng số nav trên ul là gì?

EDIT:

Tôi biết bạn có thể đặt một ul thành một câu hỏi của tôi nav là lý do tại sao sử dụng một nav ở tất cả?

Trả lời

10

Đừng để lẫn lộn với <nav><ul>. Cả hai đều có thể được sử dụng cùng nhau cho một menu điều hướng.

Nav là thẻ HTML5. Nếu bạn đang tạo thứ gì đó trong HTML5, bạn có thể sử dụng <nav> vì không có giới hạn, nhưng không phải tất cả trình duyệt đều sẽ hiển thị chính xác điều này.

<nav> 
    <ul> 
     <li><a href="default.asp">Home</a></li> 
     <li><a href="news.asp">News</a></li> 
     <li><a href="contact.asp">Contact</a></li> 
     <li><a href="about.asp">About</a></li> 
    </ul> 
</nav> 
  1. Read about Html 5

Ul tạo ra một danh sách có thứ tự. Không có thứ tự có nghĩa là các mục trong danh sách sẽ không theo bất kỳ thứ tự cụ thể nào. Bạn có thể lồng một phần tử ul bên trong nav để đặt liên kết của bạn.

Đọc thêm về thẻ HTML và cách chúng hoạt động here.

<ul> 
    <li><a href="default.asp">Home</a></li> 
    <li><a href="news.asp">News</a></li> 
    <li><a href="contact.asp">Contact</a></li> 
    <li><a href="about.asp">About</a></li> 
</ul> 

Điều này sẽ tạo thanh điều hướng bạn phải đặt một số kiểu CSS để trông đẹp hơn.

Cả hai mã trên sẽ tạo ra cùng một kết quả. Sự khác biệt duy nhất là nav cho trình duyệt biết rằng phần tử này dành cho mục đích điều hướng s.

+1

Nó sẽ ít thân thiện với SEO hơn nếu tôi không sử dụng nav? Nếu không thì tôi không thấy bất kỳ lợi thế nào của nav – qwertymk

+0

@qwertymk như tôi đã nói, không có lợi thế nào về SEO (tại thời điểm này) và cũng không có trong tương lai gần. – Christoph

3

Phần tử nav có ngữ nghĩa cụ thể hơn, vì vậy thường là lựa chọn tốt hơn. Ví dụ, một công cụ tìm kiếm sẽ hiểu rằng các liên kết bên trong nó đại diện cho điều hướng, chứ không phải một danh sách liên kết đơn giản (có thể là các bài đăng được đề xuất hoặc các mục liên quan, v.v.).

1

nav là phần tử html5 ngữ nghĩa, được giới thiệu để chỉ ra rằng mã này là điều hướng của trang của bạn. Đối với các công cụ tìm kiếm "nonsemantic" bình thường, nó không tạo ra sự khác biệt nào khi bạn sử dụng ul hoặc nav. Họ sẽ hiểu cả hai mà không có vấn đề gì. Hiện tại, việc sử dụng các yếu tố ngữ nghĩa đó không tạo ra lợi thế thực sự cho bạn.

Hãy cẩn thận, bằng cách sử dụng các phần tử html5 đó phá vỡ IE, vì vậy bạn cần phải "đăng ký" chúng, vì vậy IE nhận ra chúng là các phần tử html có thể tạo kiểu.

3

Phụ thuộc vào các trường hợp nhưng hầu hết thời gian bạn sẽ sử dụng cả hai.

<nav> 
    <ul> 
     <li><a href="#">item1</a></li> 
     <li><a href="#">item2</a></li> 
     <li><a href="#">item3</a></li> 
     <li><a href="#">item4</a></li> 
     <li><a href="#">item5</a></li> 
    </ul> 
</nav> 

<!-- Or just links --> 

<nav> 
    <a href="#">Item</a> 
    <a href="#">Item</a> 
    <a href="#">Item</a> 
</nav> 

Cả hai đều đúng ngữ nghĩa.

0

Nếu bạn muốn sử dụng nav nhưng tránh bất kỳ vấn đề nào với trình duyệt không hỗ trợ, điều đơn giản nhất là không áp dụng bất kỳ kiểu dáng nào cho nó và quấn quanh một kiểu div.

<nav> 
    <div class="nav"> 
     <ul> 
      <li><a href="?">List Item Link</a></li> 
      <li><a href="?">List Item Link</a></li> 
      <li><a href="?">List Item Link</a></li> 
     </ul> 
    </div> 
</nav> 
+0

Điều này sẽ hoạt động trong các trình duyệt không hỗ trợ nó? Luôn luôn? – qwertymk

0

Chỉ cần ý kiến ​​của tôi, tôi sẽ sử dụng một ul chỉ vì lý do mà IE 6 và 7 vẫn có một thị phần khá lớn, và tôi biết tôi sẽ không phải để nhảy qua hoops để có được một ul làm việc . Còn bây giờ, nó đơn giản hơn.

0

Cả nav và ul yếu tố có thể được sử dụng để tạo menu trong html5,

  • Yếu tố nav giao tiếp mà chúng ta đang làm việc với một khối chuyển hướng lớn
  • Danh sách truyền rằng các liên kết bên trong menu này khối tạo thành một danh sách các mục

Tuy nhiên bạn có thể sử dụng cả hai nav và ul trong việc tạo menu,

<nav> 
<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
</ul> 
</nav> 

Tùy thuộc vào việc bạn chọn nav hoặc ul

Các vấn đề liên quan