DEV Community

Stefan Bauer
Stefan Bauer

Posted on

Building Better Menus: Comparing ol, ul, and menu in HTML

UL, OL vs Menu

Many are unfamiliar with an HTML tag is a menu. You might be familiar what an order list (ol) or an unordered list (ul). Let's take a look at what the difference between those is.

For text lists - <ol>, <ul>

Those list types may be around your code, too; they are pretty common and always used incorrectly. Why wrong?

When we take a look at the HTML specification under grouping content it shows the following definitions.

ol
The ol element represents a list of items that have been intentionally ordered, such that changing the order would change the meaning of the document.
html spec - ol

ul
The ul element represents a list of items where the order of the items is not important β€” that is, changing the order would not materially change the document's meaning.
html spec - ul

So both contain only list items, and the list item only contains text, no interactive elements, and links.

For Menus - <menu>

The definition of a menu is slightly different.

menu
The menu element represents a toolbar consisting of its contents in the form of an unordered list of items (represented by li elements), each representing a command that the user can perform or activate.
html-spec - menu

<menu> and <ul> both render unordered list items. The primary difference is that an <ul> is primarily used for display items. <menu>, on the other hand, is for interactive items.

So whenever you build a list of interactive elements. Think about which HTML element to use. For me, <menu> is the correct one.

Screen reader, by default, doesn't recognise that it is a menu and only narrates it as a list of elements. To improve the accessibility further, add some aria roles to the menu.

<menu role="menu">
  <li><a href="#" role="menuitem">Lorem.</a>
  <li><a href="#" role="menuitem">Numquam.</a>
  <li><a href="#" role="menuitem">Modi!</a>
  <li><a href="#" role="menuitem">Adipisci.</a>
  <li><a href="#" role="menuitem">Officiis.</a>
</menu>
Enter fullscreen mode Exit fullscreen mode

And that's it; let me know what you choose to build your next menu, toolbar, and menubar.

Top comments (0)