Intro to my problem
It is one of these nights in which I can bitch endlessly on clean semantic coding in one of my projects. Lets say I have my portfolio in which I want to list the stuff I've learned along the way. The first list contains languages and the second list contains the systems. Now in this case the languages can also contain sub links referring to a system made in a particular language in the second list:
<nav id="categories">
<ul>
<li>
<a href="/languages"><span class="main_category">Languages</span></a>
<ul id="languages">
<li>
<a href="/languages/php"><span class="sub_category">PHP</span></a>
<ul id="php_systems">
<li>
<a href="/php/systems/pyrocms"><span class="sub_category">PyroCMS</span></a>
</li>
<li>
<a href="/php/systems/joomla"><span class="sub_category">Joomla</span></a>
</li>
</ul>
</li>
<li>
<a href="/languages/javascript"><span class="sub_category">Javascript</span></a>
</li>
</ul>
</li>
<li>
<a href="/systems"><span class="main_category">CMS Systems</span></a>
<ul id="systems">
<li>
<a href="/systems/pyrocms"><span class="sub_category">PyroCMS</span></a>
</li>
<li>
<a href="/systems/joomla"><span class="sub_category">Joomla</span></a>
</li>
</ul>
</li>
</ul>
The actual question This does seem to be the most clean way for a user, because the url's work as a breadcrumb. Users now know that pyrocms is actually a php based cms system. However. The second list has a short url approach which might be easier to maintain. So 3 options:
- Use the long links approach everywere (also in the second list)
- Use the short links approach everywere (also in the deep nested lists)
- Use a combination (long links in the deep nested and short in the roots)