Search code examples
htmlmarkupsemantic-markup

Nav with section titles inside


I have a nav, normally I would use a ul for markup but inside the structure this time I have sub titles, please note not all sections have sub titles:

- News
- Articles
- Products

Archive
- News
- Articles

Info
- Contact
- Terms & Conditions

What would be the way to mark this up?

I was thinking a ul for the first block that does not have a title then a dl for the sections that do have a title. Would this be semantically correct?


Solution

  • ul elements can be nested

    <nav>
     <ul>
      <li>Archive
       <ul>
        <li>News</li>
        <li>Articles</li>
       </ul></li>
      <li>Info 
      ...
     </ul>
    </nav>
    

    update

    As your nav is a list of categories with sub-categories, nested ul seems to be better because dl is a list of definition used for pair (like title -> description).

    see : https://developer.mozilla.org/en/docs/Web/HTML/Element/dl