Skip to content

Commit

Permalink
Adjusting description (#17522)
Browse files Browse the repository at this point in the history
* Adjusting description

The use of "semantic" is [creating confusion](w3c/aria-practices#353 (comment)) on what this element actually does. While in here I tweaked the overall description.

* Added `<ul>` to the CSS

Because the example pulls in both blocks of code.

* Re-added the word 'semantic'

In deference to Scott's point that the spec uses the word.

Co-authored-by: Schalk Neethling <sneethling@mozilla.com>
  • Loading branch information
aardrian and Schalk Neethling authored Jun 22, 2022
1 parent a2297d5 commit 1903072
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions files/en-us/web/html/element/menu/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ browser-compat: html.elements.menu
---
{{HTMLRef}}

The **`<menu>`** [HTML](/en-US/docs/Web/HTML) element is a semantic alternative to {{HTMLElement("ul")}}. It represents an unordered list of items (represented by {{HTMLElement("li")}} elements), each of which represents a link or other command that the user can activate.
The **`<menu>`** [HTML](/en-US/docs/Web/HTML) element is described in the HTML specification as a semantic alternative to {{HTMLElement("ul")}}, but treated by browsers (and exposed through the accessibility tree) as no different than {{HTMLElement("ul")}}. It represents an unordered list of items (which are represented by {{HTMLElement("li")}} elements).

## Attributes

This element only includes the [global attributes](/en-US/docs/Web/HTML/Global_attributes).

## Usage notes

The `<menu>` and {{HTMLElement("ul")}} elements both represent an unordered list of items. The key difference is that {{HTMLElement("ul")}} primarily contains items for display, while `<menu>` is intended for interactive items.
The `<menu>` and {{HTMLElement("ul")}} elements both represent an unordered list of items. The key difference is that {{HTMLElement("ul")}} primarily contains items for display, while `<menu>` was intended for interactive items. The related {{HTMLElement("menuitem")}} element has been deprecated.

> **Note:** In early versions of the HTML specification, the `<menu>` element had an additional use case as a context menu. This functionality is considered obsolete and is not in the specification.
Expand All @@ -38,11 +38,21 @@ In this example, a `<menu>` is used to create a toolbar for an editing applicati
<li><button onclick="paste()">Paste</button></li>
</menu>
```

Note that this is functionally no different than:

```html
<ul>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</ul>
```

#### CSS

```css
menu {
menu, ul {
display: flex;
list-style: none;
padding: 0;
Expand Down

0 comments on commit 1903072

Please sign in to comment.