Semantically correct sitemap in HTML

Question

I am trying to develop/design a main menu/site map for our website.

The brief is that the menu should look like a directory tree and each item on the menu should either expand to reveal more menu items or link to another page on the site.

On top of this, every item should have the functionality to be added to the sites "Favourites" application, so that every user can more quickly find items that are buried deep within the menu structure.

Because of my insane OCD to make sure that everything is done correctly and to the best possible standards, I am having issues getting my markup to be semantically correct and accessible.

Here's what I've got so far:

<ul>
    <li>
        <ul>
            <li>
                <a href="example1.html">Collapse "Menu Item 1"</a>
            </li>
            <li>
                <a href="example2.html">Add "Menu Item 1" to Favourites</a>
            </li>
            <li>
                <a href="example1.html">Menu Item 1</a>
                <ul>
                    <li>
                        <ul>
                            <li>
                                <a href="example3.html">Open "Menu Item 1's
                                First Child"</a>
                            </li>
                            <li>
                                <a href="example4.html">Add "Menu Item 1's
                                First Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example3.html">Menu Item 1's First 
                                Child</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>
                                <a href="example5.html">Open "Menu Item 1's
                                Second Child"</a>
                            </li>
                            <li>
                                <a href="example6.html">Add "Menu Item 1's
                                Second Child" to Favourites</a>
                            </li>
                            <li>
                                <a href="example5.html">Menu Item 1's Second
                                Child</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example7.html">Expand "Menu Item 2"</a>
            </li>
            <li>
                <a href="example8.html">Add "Menu Item 2" to Favourites</a>
            </li>
            <li>
                <a href="example7.html">Menu Item 2</a>
            </li>
        </ul>
    </li>
    <li>
        <ul>
            <li>
                <a href="example9.html">Open "Menu Item 3"</a>
            </li>
            <li>
                <a href="example10.html">Add "Menu Item 3" to Favourites</a>
            </li>
            <li>
                <a href="example9.html">Menu Item 3</a>
            </li>
        </ul>
    </li>
</ul>

As you can see, things start to get very complicated very quickly.

Is this the best way to convey this information or am I over complicating the matter?

Can you think of a better way for me to do this?

Answer 1

IMO you're using this list wrong. Collapse/Open/Add to favs... these elements don't belong to the tree, but you treat them as if they were part of it.

Your tree should has following structure:

<ul>
  <li>
    <span>menu item 1<span>
    <ul>
      <li>
        <span>child node 1</span>
      </li>
      <li>
        <span>child node 2</span>
      </li>
    </ul>
  </li>
  ...
</ul>

That's the base of the tree. Now you should add actions (open/add... etc.). They might by placed as another, independent list after span element. Then just use class to separate childNodes list from actions list:

...
<li>
  <div>
    <span>menu item 1</span>
    <ul class="actions"> ... </ul>
  </div>
  <ul class="childNodes"> ... </ul>
</li>
...

Well... in theory classes aren't required but it's much easier to handle with classes rather ... ul > li > div > ul selectors etc.

According to first comment

Base functionality of the website shouldn't rely on JavaScript. That's why I thing addition of whole tree using JS is bad idea. Actions like add to favs should be available without JS, but you may feel free to take control over that action, and overwrite it's functionality. So in HTML you have:

<a href="/tree/action/add_to_favs?id=123">Add to favs</a>

But using JS you do something like this (pseudo-code):

actionLink.addEventListener("click", function...
  var id = take id: 123
  do ajax request here
  return false;
});

It's the best way to provide good availability and functionality at the same time.

About open/collapse actions. These requires JS by their nature so they can be added to actions list by JS. But once again... remember about "non-JS users". HTML/CSS should display a whole tree - JS should collapse its branches.

Answer 2

Sometimes I do as per Crozin's answer above but on a large site it can be impossible to load such a large tree (I have built systems for sites with over 100k pages).

A hybrid solution is to load in the tree so that the path down to the parent page only contains the current path and then display all the children of the parent. Then add JavaScript behaviour to add additinal parts of the tree.

Doing things this way means that non JS browsing can completely navigate the site but JS browsing gets the enhance functionality, all without the performance hit of building the entire tree.