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 😜