Search code examples
htmlsemantic-markupsemantic-html

Can you nest the <menu> tag? semantic HTML

Is it okay to nest the <menu> tag? eg:

<menu>
  <li>1</li>
  <li>2
    <menu>
        <li>2.1</li>
        <li>2.1</li>
    </menu>
  </li>
  <li>3</li>
</menu>

or shoud I use <ul> inside? eg:

<menu>
  <li>1</li>
  <li>2
    <ul>
        <li>2.1</li>
        <li>2.1</li>
    </ul>
  </li>
  <li>3</li>
</menu>

Have a good day and thank you!

Solution

  • Yes, you can nest menu elements.

    From a syntactic standpoint, the HTML spec states that menu elements can be used "where flow content is expected". List items can contain flow content, so it's syntactically valid to have a menu > li > menu pattern.

    From a semantic standpoint, you should use a nested menu element if you consider the child list to be a submenu. If for whatever reason you don't consider it to be a submenu, you can use a ul (or ol if it has inherent ordinality).

    Either approach is valid.