<nav> 또는 <menu> (HTML5)


102

W3Schools.com과 <menu>도구 모음 메뉴 및 양식 제어 명령 나열에 사용되어야 하는 W3C.org 상태를 본 기억이납니다 .

그렇다면 메인 메뉴로 어떤 것을 사용해야합니까? Nav, 또는 Menu? 그게 그렇게 중요한 건가?


38
w3fools 를 읽을 수 있습니다 .
zzzzBov

'양식 제어 명령'이란 무엇입니까?
Mads Skjern 2014 년

답변:


162

nav내부 링크 ( a요소) 그룹에 사용됩니다 . 일반적으로 이는 링크가 별도의 페이지로 이동하거나 AJAX 페이지의 경우 콘텐츠를 변경해야 함을 의미합니다. nav항목을 클릭하면 어떤 종류의 내용이 변경 될 수 있습니다 .

menu컨트롤 군에 사용되는 ( a, input, button). 일반적으로 이것은 입력이 페이지 내에서 기능을 수행해야 함을 의미합니다. menu항목을 클릭 할 때 일종의 자바 스크립트 상호 작용을 기대 하세요.

nav: 사이트 탐색 .

menu: 웹 애플리케이션 의 메뉴 입니다.


8
흥미로운 사실 ​​: 사양은 목록 없이도 태그 <li>바로 아래에 요소 를 중첩 할 수 있습니다 . 요구 사항은이다 의 속성을 생략하거나 설정한다 . 의 사양을 참조하십시오 요소요소를 . <menu><ul><menu>type"toolbar"<li><menu>
tomekwi

누군가 <menu>가 W3C HTML5 사양 중 하나를 알려줄 수 있습니까? WHAT WG 버전 에서 찾을 수 있지만 최신 W3C HTML 5.3 초안 에서는 찾을 수 없습니다 .
Garret Wilson



1

이 답을 얻을 수있는 가장 좋은 곳은 HTML 5 표준입니다.

메뉴HTML 5.1 2nd Edition에 정의되어 있습니다.

"...는 명령 그룹을 나타냅니다."


NavHTML 5에 정의되어 있습니다.

즉, "... 다른 페이지 또는 페이지 내 부분으로 연결되는 페이지 섹션 : 탐색 링크가있는 섹션"입니다.

내가 포함하지 않았지만 중요하다고 생각하는 nav에 대한 메모가 있지만 표준에서 정의를 직접 얻는 것이 가장 좋습니다.

이 게시물에 답변으로 표시된 정의는 정답에 가깝지만 답변 자체를 잘못 만드는 관련없는 설명이 있습니다.


0

<nav>섹션이 (처럼 <section><article>)는 HTML 문서 개요에 나타납니다 있도록. 이로 인해 <menu>99 %의 시간을 사용합니다. 나 <nav>에게는와 사이의 혼합 <section>이며 <menu>, <nav>특히 탐색에 사용되어야 하는 추가 된 수축 이있는 반면 <menu>메뉴 (탐색 막대 포함)라고 할 수있는 모든 항목에 사용할 수 있습니다. 그래서 대부분의 네비게이션 바는, 그들이 탐색 바 있다는 사실에도 불구하고,의 엄격한 요구 조건에 맞지 않는 <nav>, 그리고 <menu>더 적합하다.

웹 개발 경력에서 내 탐색 모음이 문서 개요의 일부가되기를 원하는 상황을 발견 한 적이 없습니다.


1
이것은 올바르지 않습니다. 당신은해야한다 거의 (면 적)을 사용 <menu>하여 웹 응용 프로그램이 아닌 웹 사이트 - 시간의 99 %가 탐색 '메뉴는'무엇 페이지에 다른 페이지 또는 다른 섹션에 정적 링크 수 없습니다 <nav>위한 것입니다 따라 사양에.
Ivan Durst

@IvanDurst, 내 요점은 단순히 정적 링크 목록을 작성 하는 경우 섹션 요소 nav이기 때문에 좋은 태그 선택이 아니므 nav로 헤더와 내용이있는 섹션 인 것처럼 문서 개요의 일부가 될 것입니다. 이것은 실제로 nav섹션처럼 행동 하기 를 원하는 드문 시나리오 입니다. menu의미 론적 대체물로서의 제안 일뿐입니다. 사양에는 이런 식으로 사용할 수 없다는 내용이 없습니다. 맞는 것 같습니다. 그러나 어떤 이유로 메뉴가 웹 앱으로 정의한 것에 만 해당한다고 생각한다면, 나는 추천 ol하거나 ul대체 할 수 있습니다.
Nick Manning

호환성 테이블에 따르면 여기에 , <menu>아직도이 시간에 가난한 지원합니다. (Chrome이이를 지원하지 않는다는 것이 사실입니까 ??) 또한 role="menu"다른 요소 (예 : div 또는 nav)에 속성을 제공하여 정확히 동일한 의미를 얻을 수 있습니다 . role 속성은 모든 요소의 기본 의미를 재정의합니다.
브레 난영
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.