<menu>
태그의 정의 및 사용법
<menu>
태그는
순서가 지정되지 않는 항목의 툴바와 같은 명령 목록를 나타내고, 각 항목인 <li>
태그는 사용자가 수행하거나 활성화할 수 있는 명령을 나타내기 위해 고안되었지만, 대부분의 브라우저에서는 <ul>
태그와 동일하게 처리합니다.
표준으로 채택되지 않음
명세서에서는 <menu>
태그가 순서가 지정되지 않은 명령 목록('도구 모음, toolbar')을 표현하기 위한
이라고 설명되어 있지만, 대부분의 브라우저에서는 <ul>
의 의미론적 대안<ul>
태그와 동일하기 처리합니다. 이는 대부분의 브라우저가 <menu>
태그를 역사적, 기술적, 사용 편의성 등의 이유로 인해 표준으로 채택하고 있지 않는 것으로 추측합니다.
사용법 참고 사항
<menu>
와 <ul>
태그는 모두 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그라는 공통점이 있습니다.
하지만, 앞서 설명했듯이 대부분의 브라우저에서는 <menu>
와 <ul>
태그를 동일하게 취급하지만 명세서에서는 <menu>
태그를 <ul>
태그와 비교할 때 의미론적인 차이점을 설명하고 있습니다.
<ul> |
기본적으로 표시용 항목들로 구성 |
---|---|
<menu> |
대화형 항목(버튼 등 명령 목록)들로 구성 |
이러한 주요 차이점을 고려해서 명세서에서는 사용 방법을 기술하고 있지만 대부분의 브라우저에서는 이 두 태그를 동일하게 취급하기 때문에 이 두 태그를 기능적으로 구분할 필요가 없어 보입니다.
다음의 예시를 통해 살펴보겠습니다. 해당 예시는 편집 응용프로그램의 도구모임을 마크업한 것입니다.
위 예시는 브라우저에서 다음의 코드와 동일하게 취급합니다.
이렇게 두 태그는 동일하게 취급되며, 사용하는 구문이나 형식도 동일합니다.
<menu>
태그의 형식은 다음과 같습니다.
허용되는 콘텐츠와 주의할 점
<menu>
태그의 자식 요소로 사용될 수 있는 콘텐츠는 제한적입니다.
-
<li>
<script>
-
<template>
0개 이상의 이 요소들을 제외하고 다른 요소, 혹은 텍스의 삽입(text node를 의미함) 등은 사용할 수 없습니다.
다음의 예시는 <menu>
태그의 허용되지 않는 콘텐츠를 사용한 잘못된 사례들과 올바른 사례입니다.
브라우저 호환성
태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<menu>
|
1 | 12 | 1 | 3 |
명세서
명세서 사양 | |
---|---|
<menu>
|
HTML Standard #the-menu-element |