The <menu> tag represents a menu of commands or tools. It's a semantic element that can contain list items (<li>) or interactive elements like buttons. The menu provides structure for navigation and command interfaces.

<menu

Step 2

The <menu> tag can contain <li> elements, each representing a menu item. It's semantically different from <ul> or <nav> - menu represents a list of commands or tools, not just navigation links. Use it for toolbars, context menus, or command lists.

<menu>
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

Step 3

Common use cases: context menus, toolbars, command palettes, and application menus. The menu tag provides semantic meaning for assistive technologies, helping screen readers understand the purpose of the menu structure.

<menu>
  <li><button>Save</button></li>
  <li><button>Open</button></li>
  <li><button>Exit</button></li>
</menu>

Step 4

In the browser, the menu appears as a list of interactive items. Each <li> can contain buttons, links, or other interactive elements. The semantic meaning helps browsers and assistive technologies understand the menu's purpose.

<menu>
  <li><button>Cut</button></li>
  <li><button>Copy</button></li>
  <li><button>Paste</button></li>
</menu>

Step 5

Checkpoint: Which element represents a menu of commands or tools?

<menu>
  <li><button>Action</button></li>
</menu>

Step 6

Correct! The <menu> tag represents a menu of commands or tools. It's semantically different from <nav> which is for navigation links, and from <ul> which is a general unordered list.

<menu>
  <li><button>Action</button></li>
</menu>

Step 7

Now it's your turn. Menus provide semantic structure for commands and tools. Complete the challenges below to master the <menu> tag!

menu.html

1 / 7

📋

TutorThe <menu> tag represents a menu of commands or tools. It's a semantic element that can contain list items (<li>) or interactive elements like buttons. The menu provides structure for navigation and command interfaces.

⭐ 0 EXP

Menu Mastery

Unlock nodes by learning menu structure and semantics.

Concept 1: The Menu Tag

The <menu> tag represents a menu of commands or tools. It's a semantic element that can contain list items (<li>) or interactive elements like buttons. The menu provides structure for navigation and command interfaces.

System Check

Which element represents a menu of commands or tools?

Community Holo-Net

Share Menu Designs

Created semantic menus with commands? Share your code and best practices with fellow developers.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

Mastering the HTML <menu> Tag

Pascual Vila

Frontend Instructor

Menu Structure

The <menu> tag can contain <li> elements, each representing a menu item. It's semantically different from <ul> or <nav> - menu represents a list of commands or tools, not just navigation links. Use it for toolbars, context menus, or command lists.

Semantic Meaning

The <menu> tag provides semantic meaning for assistive technologies, helping screen readers understand the purpose of the menu structure. This improves accessibility and helps users navigate command interfaces more effectively.

Common Use Cases

Common use cases include: context menus, toolbars, command palettes, and application menus. The menu tag provides semantic meaning for assistive technologies, helping screen readers understand the purpose of the menu structure.

Best Practices

Use <menu> for command menus and toolbars.
Do not use it for general navigation (use <nav> for that).
Each menu item should be wrapped in an <li> element.
Include interactive elements like buttons or links inside each list item.
Ensure proper semantic structure for accessibility.

Menu Tag Glossary

<menu>: HTML semantic element that represents a menu of commands or tools. Can contain list items (<li>) or interactive elements. Different from <nav> (navigation) and <ul> (general list).
Menu Items: Individual commands or tools within a menu. Typically represented by <li> elements containing buttons, links, or other interactive elements.
Semantic HTML: HTML that conveys meaning and structure to browsers and assistive technologies. The <menu> tag provides semantic meaning for command menus.
Command Menu: A menu containing actions or commands that users can execute. Examples include context menus, toolbars, and command palettes.

📖 INDEX