What is the difference between menuitem and li inside menu?

menuitem was a void element meant to define executable commands with label and type attributes. li is a list item. Today, li with buttons or links inside menu or nav is the practical approach.

HTML <menuitem> Tag

Q: What is the HTML menuitem tag used for?

The HTML menuitem element represents a command inside a menu element — such as Save, Copy, or Paste in a context menu or toolbar. It was designed for interactive menu actions.

Q: Is the menuitem tag still valid in HTML5?

No. The menuitem tag is deprecated in HTML5 and is not supported in modern browsers. Use button or anchor elements with JavaScript for interactive menu items instead.

Q: What replaced the menuitem tag?

Use button elements for actions, anchor tags for navigation links, and li items inside nav or ul for menu structure. Attach click handlers with JavaScript for interactivity.

Q: Should beginners use the menuitem tag?

No. Beginners should learn what menuitem is for reading legacy HTML, but should use button and a elements with accessible markup in all new projects.

Beginner

⏱️ 5 min read

📚 Updated: Jun 2026

🎯 3 Examples

Menu Commands

Overview

What You’ll Learn

Understanding HTML elements is crucial in web development. This guide explains the <menuitem> tag, its deprecated status, and the modern alternatives beginners should use.

Core Syntax

How <menuitem> defined commands inside <menu> elements.

Deprecated Status

Why HTML5 removed menuitem from recommended usage.

label & type

Key attributes that described menu command text and behavior.

Context Menus

Save, Copy, Paste patterns inside menu containers.

button Alternative

Replace menuitem with accessible <button> elements.

anchor Alternative

Use <a> links for navigational menu items.

Fundamentals

What Is the `<menuitem>` Tag?

The <menuitem> element is an HTML tag used primarily within the <menu> element to represent a command or action that the user can invoke from a context menu or toolbar menu — such as Save, Copy, or Paste.

⚠️

Deprecated in HTML5 — Avoid in New Projects

The <menuitem> tag has been deprecated and should be avoided in favor of modern alternatives like <button> and <a> to ensure compatibility and adherence to web standards.

Modern browsers do not render native menuitem UI. Learn the tag to read legacy code; build interactive menus with buttons, links, and JavaScript in all new work.

Foundation

📝 Syntax

The <menuitem> tag is a void element (self-closing). Place it inside a <menu> parent:

syntax.html

<menuitem label="Save">

Syntax Rules

<menuitem> is a void element — no closing tag with content inside.
Must appear inside a <menu> element (or be associated via the command attribute).
Use the label attribute for visible command text.
Attach behavior with event handlers like onclick or the command attribute.

menu-with-items.html

<menu>
  <menuitem label="Save" onclick="saveFunction()">
  <menuitem label="Copy" onclick="copyFunction()">
  <menuitem label="Paste" onclick="pasteFunction()">
</menu>

Cheat Sheet

⚡ Quick Reference

Topic	Code Snippet	Notes
Basic item	`<menuitem label="Save">`	Deprecated
With click handler	`onclick="save()"`	Global event attribute
Item type	`type="command"`	command, checkbox, radio
Disabled item	`disabled`	Non-interactive state
button replacement	`<button type="button">`	Modern approach
Browser support	None	Not supported

Comparison

⚖️ `<menuitem>` vs `<button>` vs `<a>`

Element	Purpose	Best for
`<menuitem>`	Menu command (legacy)	Reading old HTML only
`<button>`	Clickable action	Save, Copy, Paste commands
`<a>`	Hyperlink navigation	Menu links to pages
`<li>` + button/a	Structured menu list	Accessible dropdown menus

Reference

🧰 Attributes

The <menuitem> element supported tag-specific attributes plus global attributes like id, class, and event handlers:

label Text

Visible name of the menu command shown to the user.

label="Save"

type Kind

Command type: command (default), checkbox, or radio.

type="command"

icon Image

URL of an icon displayed beside the command label.

icon="/icons/save.svg"

disabled State

Prevents the user from invoking the command.

disabled

onclick Event

Global event handler to run JavaScript when the item is activated.

onclick="saveFunction()"

command Reference

ID of another element that defines the command behavior.

command="save-cmd"

All menuitem-specific behavior is deprecated. Use <button> with type="button" and JavaScript event listeners in new projects.

Hands-On

Examples Gallery

Legacy menuitem patterns and modern button/anchor replacements. Demos use styled buttons because native menuitem is not supported in modern browsers.

👀 Live Preview

Modern replacement: buttons inside a menu-style container:

📚 Common Use Cases

The <menuitem> tag was used inside <menu> to define items in context menus, giving users actions like Save, Copy, and Paste. Today use <button> or <a> elements with proper styling and event handling.

Context Menus

Define Save, Copy, and Paste commands inside a <menu> with <menuitem> elements.

⚠️ Deprecated tag — menuitem is not supported in modern browsers.

context-menuitem.html

<menu>
  <menuitem label="Save" onclick="saveFunction()">
  <menuitem label="Copy" onclick="copyFunction()">
  <menuitem label="Paste" onclick="pasteFunction()">
</menu>

Try It Yourself

button Element Alternative

Use <button> elements styled as menu items with event listeners for interactivity.

button-alternative.html

<div role="toolbar" aria-label="Edit">
  <button type="button" onclick="saveFunction()">Save</button>
  <button type="button" onclick="copyFunction()">Copy</button>
  <button type="button" onclick="pasteFunction()">Paste</button>
</div>

Try It Yourself

anchor Element Alternative

Use <a> elements with styling and handlers for navigational menu items.

anchor-alternative.html

<nav aria-label="Quick links">
  <ul>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/settings">Settings</a></li>
    <li><a href="/help">Help</a></li>
  </ul>
</nav>

Try It Yourself

Migration

🔄 Alternatives

Given the deprecation of the <menuitem> tag, use these approaches to achieve similar functionality:

<button> element — Style buttons as menu items and attach click event listeners for actions like Save or Copy.
<a> element — Use anchor links with appropriate styling for navigational menu items that lead to other pages.
<li> + button/a inside nav — Build structured, keyboard-accessible dropdown and toolbar menus.

A11y

♿ Accessibility

Interactive menu items must work for all users:

Use real buttons — <button type="button"> is focusable and activatable with Enter and Space.
Name toolbar regions — Add role="toolbar" and aria-label to groups of action buttons.
Do not rely on menuitem — Unsupported elements provide no keyboard or screen reader interaction.
Visible focus styles — Ensure menu buttons have clear :focus-visible outlines.

🧠 How <menuitem> Worked

Author placed menuitem in menu

Add void <menuitem> elements with label inside a <menu> container.

Markup

Browser showed menu commands

Supporting browsers rendered clickable command items. Modern browsers skip this entirely.

Rendering

JavaScript handled the action

Event handlers like onclick ran functions when a command was selected.

Interaction

Today: use button elements

Learn menuitem for history. Build commands with <button> and accessible JavaScript.

Compatibility

Browser Support

Since the <menuitem> tag is deprecated, its usage is discouraged and it is not supported in modern browsers. Test in target environments before relying on any menu behavior.

⚠ Deprecated · Not Supported

No browser implements menuitem UI

Chrome, Firefox, Safari, Edge, Opera, and Internet Explorer do not render native menuitem commands. The element is ignored in the DOM as interactive UI.

0% Modern support

Google Chrome Not supported

Not supported

Mozilla Firefox Not supported

Not supported

Apple Safari Not supported

Not supported

Microsoft Edge Not supported

Not supported

Internet Explorer Not supported · EOL

Not supported

Opera Not supported

Not supported

<menuitem> tag 0% supported

Bottom line: Do not use <menuitem> in new projects. Use <button> and <a> elements instead.

Wrap Up

Conclusion

While the <menuitem> tag served a purpose in earlier versions of HTML, its deprecated status in HTML5 necessitates the adoption of modern alternatives.

Understanding its limitations and exploring <button> and <a> approaches will ensure compatibility and future-proof your web projects.

View Examples Gallery Try button Alternative

Pro Tips

💡 Best Practices

✅ Do

Use <button type="button"> for menu actions
Use <a href> for navigational menu links
Add aria-label to toolbar groups
Learn menuitem only to read legacy HTML

❌ Don’t

Use <menuitem> in new HTML code
Assume menuitem renders clickable UI
Skip keyboard focus styles on menu buttons
Depend on onclick alone without accessible markup

Summary

Key Takeaways

Knowledge Unlocked

Six truths every developer should know about `<menuitem>`

Bookmark these before you build interactive menus.

Core concepts

📋 01

Menu Commands

<menuitem> defined actions inside <menu>.

Foundation

🚫 02

Deprecated

Removed from recommended HTML5 usage.

Status

📝 03

Void Element

Self-closing tag with label attribute.

Syntax

🔧 04

Use button

Buttons replace menuitem for actions.

Alternative

🔗 05

Use anchor

Links replace menuitem for navigation.

Alternative

🚫 06

Zero Support

No modern browser renders menuitem UI.

Compatibility

❓ Frequently Asked Questions

What is the HTML menuitem tag used for?

It represents a command inside a menu element, such as Save, Copy, or Paste in a context menu.

Is the menuitem tag still valid in HTML5?

No. It is deprecated and not supported in modern browsers. Use button or anchor elements instead.

What is the difference between menuitem and li?

menuitem was a void command element. li is a list item that wraps buttons or links in modern menus.

What replaced the menuitem tag?

<button> for actions and <a> for navigation, often inside <li> within <nav>.

Should beginners use the menuitem tag?

No. Learn it for legacy HTML only. Use buttons and links for all new interactive menus.

Build Menus the Modern Way

Skip obsolete menuitem. Practice accessible button-based menus in the Try It editor.

Try button Alternative →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

6 people found this page helpful

HTML menu Tag HTML meta Tag

HTML <menuitem> Tag

What You’ll Learn

Core Syntax

Deprecated Status

label & type

Context Menus

button Alternative

anchor Alternative

What Is the <menuitem> Tag?

📝 Syntax

Syntax Rules

⚡ Quick Reference

⚖️ <menuitem> vs <button> vs <a>

🧰 Attributes

Examples Gallery

👀 Live Preview

📚 Common Use Cases

Context Menus

button Element Alternative

anchor Element Alternative

🔄 Alternatives

♿ Accessibility

🧠 How <menuitem> Worked

Author placed menuitem in menu

Browser showed menu commands

JavaScript handled the action

Today: use button elements

Browser Support

No browser implements menuitem UI

Conclusion

💡 Best Practices

✅ Do

❌ Don’t

Key Takeaways

Six truths every developer should know about <menuitem>

Menu Commands

Deprecated

Void Element

Use button

Use anchor

Zero Support

❓ Frequently Asked Questions

🧩 Related HTML Topics

HTML menu Tag

HTML meta Tag

HTML <button> Tag

Try button Alternative

Build Menus the Modern Way

About the author

What Is the `<menuitem>` Tag?

⚖️ `<menuitem>` vs `<button>` vs `<a>`

Six truths every developer should know about `<menuitem>`