<nav> hoặc <menu> (HTML5)

102

W3Schools.com và tôi khá chắc rằng mình nhớ đã thấy trạng thái W3C.org <menu>nên được sử dụng cho các menu Thanh công cụ và các lệnh điều khiển biểu mẫu liệt kê.

Vì vậy, tôi nên sử dụng cái nào cho menu chính của mình? Nav, hoặc Menu? Có vấn đề gì không?

— Slipp D. Thompson
nguồn

38

Bạn có thể muốn đọc w3fools .

— zzzzBov

'Lệnh điều khiển biểu mẫu' là gì?

— Mads Skjern

162

navđược sử dụng cho các nhóm liên kết nội bộ ( aphần tử). Nói chung, điều này có nghĩa là các liên kết sẽ di chuyển đến các trang riêng biệt hoặc thay đổi nội dung trong trường hợp của một trang AJAX. Mong đợi một số loại thay đổi nội dung khi nhấp vào một navmục.

menuđược sử dụng cho các nhóm kiểm soát ( a, input, button). Nói chung, điều này có nghĩa là các đầu vào phải thực hiện một chức năng trong trang. Mong đợi một số loại tương tác javascript khi nhấp vào một menumục.

nav: điều hướng cho trang web.

menu: menu cho một ứng dụng web.

— zzzzBov
nguồn

8

Thực tế thú vị: Thông số kỹ thuật cho phép lồng <li>các phần tử trực tiếp dưới <menu>thẻ mà không cần <ul>danh sách. Yêu cầu là thuộc tính <menu>'s typeđược bỏ qua hoặc được đặt thành "toolbar". Xem đặc điểm kỹ thuật cho các <li>yếu tố và các <menu>yếu tố .

— tomekwi

Ai đó có thể chỉ cho tôi <menu>một trong các thông số kỹ thuật W3C HTML5 không? Tôi đang tìm thấy nó trong phiên bản GÌ WG , nhưng không phải trong bản nháp W3C HTML 5.3 mới nhất .

— Garret Wilson

10

Đây là một bài đăng trên HTML5Doctornav với một phần về cách nó khác với menu(về cơ bản, sử dụng nó trong các ứng dụng thực tế). Có vẻ như bạn muốn nav.

— Su '
nguồn

1

Với <menu>nó thường được sử dụng cho các menu ngữ cảnh.

MDN có tài liệu tốt về nó: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu

— Jack
nguồn

1

Nơi tốt nhất để có câu trả lời này là các tiêu chuẩn HTML 5 mà chúng tự có.

Menu được định nghĩa trong HTML 5.1 2nd Edition .

Nó, "... đại diện cho một nhóm lệnh."

Điều hướng được định nghĩa trong HTML 5 .

Nó là, "... một phần của trang liên kết đến các trang khác hoặc đến các phần trong trang: một phần có các liên kết điều hướng."

Có những lưu ý cho điều hướng mà tôi không đưa vào nhưng nghĩ là quan trọng, nhưng tôi nghĩ tốt nhất là bạn nên tự mình định nghĩa từ các tiêu chuẩn.

Các định nghĩa được đánh dấu trong bài đăng này là câu trả lời gần đúng nhưng có các phát biểu không liên quan trong đó làm cho câu trả lời sai.

— kevin
nguồn

0

<nav> là một phần (như <section> hoặc <article>) để nó sẽ xuất hiện trong dàn bài tài liệu HTML của bạn. Do đó, tôi sẽ sử dụng <menu>99% thời gian. Đối với tôi, <nav>là sự kết hợp giữa <section>và <menu>, với sự thắt chặt bổ sung <nav>nên được sử dụng đặc biệt cho điều hướng, trong khi <menu>có thể dành cho bất kỳ thứ gì có thể được gọi là menu (bao gồm cả thanh điều hướng). Vì vậy, hầu hết các thanh điều hướng, mặc dù thực tế rằng chúng là thanh điều hướng, không phù hợp với các yêu cầu nghiêm ngặt <nav>và <menu>thích hợp hơn.

Tôi chưa bao giờ trong sự nghiệp phát triển web của mình gặp tình huống mà tôi muốn thanh điều hướng của mình trở thành một phần của phác thảo tài liệu.

— Nick Manning
nguồn

1

Điều này là không đúng. Bạn hiếm khi (nếu từng) sử dụng <menu>trên một trang web không phải là ứng dụng web - 99% trường hợp, 'menu' điều hướng của bạn sẽ là các liên kết tĩnh đến các trang khác hoặc các phần khác trên trang, đó <nav>là mục đích, theo theo thông số kỹ thuật.

— Ivan Durst

@IvanDurst, quan điểm của tôi là nếu bạn đang xây dựng chỉ đơn giản là một danh sách các liên kết tĩnh, navđây không phải là lựa chọn thẻ tốt vì navlà một phần tử phần nên nó sẽ trở thành một phần của dàn bài tài liệu như thể đó là một phần có tiêu đề và nội dung. Trên thực tế, đây là một tình huống hiếm hoi mà bạn muốn mình navhoạt động như một phần. menuchỉ là một gợi ý như một sự thay thế ngữ nghĩa. Tôi không thấy bất cứ điều gì trong thông số kỹ thuật nói rằng nó không thể được sử dụng theo cách này. Có vẻ phù hợp. Nhưng nếu bạn vì lý do nào đó tin rằng menu đó chỉ dành cho những gì bạn xác định là ứng dụng web, thì tôi khuyên bạn nên sử dụng olhoặc ulthay thế.

— Nick Manning

Theo bảng tương thích ở đây , <menu>vẫn còn hỗ trợ kém tại thời điểm này. (Có thực sự là Chrome không hỗ trợ nó không ??) Ngoài ra, bạn có thể đạt được cùng một ngữ nghĩa bằng cách cung cấp role="menu"thuộc tính cho một phần tử khác (ví dụ: div hoặc nav). Thuộc tính role ghi đè ngữ nghĩa mặc định cho bất kỳ phần tử nào.

— brennanyoung