HTML <menu> 태그 – 올바른 이해와 사용 방법

`<menu>` 태그의 정의 및 사용법

<menu> 태그는
순서가 지정되지 않는 항목의 툴바와 같은 명령 목록를 나타내고, 각 항목인 <li> 태그는 사용자가 수행하거나 활성화할 수 있는 명령을 나타내기 위해 고안되었지만, 대부분의 브라우저에서는 <ul> 태그와 동일하게 처리합니다.

표준으로 채택되지 않음

명세서에서는 <menu> 태그가 순서가 지정되지 않은 명령 목록('도구 모음, toolbar')을 표현하기 위한 <ul>의 의미론적 대안이라고 설명되어 있지만, 대부분의 브라우저에서는 <ul> 태그와 동일하기 처리합니다. 이는 대부분의 브라우저가 <menu> 태그를 역사적, 기술적, 사용 편의성 등의 이유로 인해 표준으로 채택하고 있지 않는 것으로 추측합니다.

예시

HTML

<div>
    <p>w3.org에서는 웹과 관련된 최신 소식을 제공합니다.</p>
    <menu>
        <li><button type="button">좋아요!</button></li>
        <li><button type="button">구독</button></li>
    </menu>
</div>

사용법 참고 사항

<menu>와 <ul> 태그는 모두 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그라는 공통점이 있습니다.

하지만, 앞서 설명했듯이 대부분의 브라우저에서는 <menu>와 <ul> 태그를 동일하게 취급하지만 명세서에서는 <menu> 태그를 <ul> 태그와 비교할 때 의미론적인 차이점을 설명하고 있습니다.

menu 태그와 ul 태그의 주요 차이점
`<ul>`	기본적으로 표시용 항목들로 구성
`<menu>`	대화형 항목(버튼 등 명령 목록)들로 구성

이러한 주요 차이점을 고려해서 명세서에서는 사용 방법을 기술하고 있지만 대부분의 브라우저에서는 이 두 태그를 동일하게 취급하기 때문에 이 두 태그를 기능적으로 구분할 필요가 없어 보입니다.

다음의 예시를 통해 살펴보겠습니다. 해당 예시는 편집 응용프로그램의 도구모임을 마크업한 것입니다.

HTML - <menu> 태그를 사용

<menu>
    <li><button type="button" onclick="copy()"><img src="copy.svg" alt="복사하기"></button></li>
    <li><button type="button" onclick="cut()"><img src="cut.svg" alt="자르기"></button></li>
    <li><button type="button" onclick="paste()"><img src="paste.svg" alt="붙여넣기"></button></li>
</menu>

위 예시는 브라우저에서 다음의 코드와 동일하게 취급합니다.

HTML - <ul> 태그를 사용

<ul>
    <li><button type="button" onclick="copy()"><img src="copy.svg" alt="복사하기"></button></li>
    <li><button type="button" onclick="cut()"><img src="cut.svg" alt="자르기"></button></li>
    <li><button type="button" onclick="paste()"><img src="paste.svg" alt="붙여넣기"></button></li>
</ul>

이렇게 두 태그는 동일하게 취급되며, 사용하는 구문이나 형식도 동일합니다.

<menu> 태그의 형식은 다음과 같습니다.

허용되는 콘텐츠와 주의할 점

<menu> 태그의 자식 요소로 사용될 수 있는 콘텐츠는 제한적입니다.

0개 이상의 이 요소들을 제외하고 다른 요소, 혹은 텍스의 삽입(text node를 의미함) 등은 사용할 수 없습니다.

다음의 예시는 <menu> 태그의 허용되지 않는 콘텐츠를 사용한 잘못된 사례들과 올바른 사례입니다.

HTML - 잘못된 사례 <menu> 태그의 자식 요소로 사용할 수 없는 <p> 태그가 사용되었습니다.

<div>
    <menu>
        <p>w3.org에서는 웹과 관련된 최신 소식을 제공합니다.</p>
        <li><button type="button">좋아요!</button></li>
        <li><button type="button">구독</button></li>
    </menu>
</div>

HTML - 잘못된 사례 <menu> 태그의 콘텐츠로 텍스트가 사용되었습니다.

<div>
    <menu>
        w3.org에서는 웹과 관련된 최신 소식을 제공합니다.
        <li><button type="button">좋아요!</button></li>
        <li><button type="button">구독</button></li>
    </menu>
</div>

HTML - 올바른 사례

<div>
    <p>w3.org에서는 웹과 관련된 최신 소식을 제공합니다.</p>
    <menu>
        <li><button type="button">좋아요!</button></li>
        <li><button type="button">구독</button></li>
    </menu>
</div>