Skip to content Paweł Grzybek

The difference between the unordered list <ul> and the menu <menu> HTML element

In contrast to the <ul>, which I always use, the <menu> is something I have never used. So you may be wondering what the difference is between them. Well, it is very subtle.

Both of them create an unordered list of items. The <menu> element is more specific and should be used for interactive toolbars. Look at the example.

<h1>Scrambled eggs</h1>

<ul>
  <li>butter</li>
  <li>eggs</li>
  <li>salt</li>
</ul>

<menu>
  <li><button onclick="printRecipe()">Print recipe</button></li>
  <li><button onclick="saveRecipe()">Save recipe</button></li>
</menu>

See the Pen ul vs menu by Pawel Grzybek (@pawelgrzybek) on CodePen.

From a11y perspective, both elements produce the same accessibility tree. There is no difference between them for screen readers and other assistive technologies.

There are some tiny styling differences between user agents’ stylesheets. I don’t think it is worth exploring that in-depth because you are going to reset them anyway 😜

References

Leave a comment

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!