List menus
If we want to build accessible menus the <ul> list is the right choice. A <ul> list offers the possibility to have nested levels which semantically reflect the structure of your website. And for all of us who didn´t graduate in linguistics this simply means the tags we are using should go together with the content wrapped by these tags. A menu is a list of the pages you have in your website and <ul> is the tag you use to indicate: „I am a list“.
<ul> <!-- 1st level -->
<li><a href=“me.html“>about me</a> <!-- 1st level 1st branch -->
<ul> <!-- 2nd level -->
<li><a href=“house.html“>my house</a></li>
<li><a href=“car.html“>my car</a></li>
<li><a href=“boat.html“>my boat</a></li>
</ul>
</li>
<li><a href=“company.html“>about my company</a> <!-- 1st level 2nd branch -->
<ul>
<li><a href=“desk.html“>my desk</a></li>
<li><a href=“computer.html“>my computer</a></li>
<li><a href=“secretary.html“>my secretary</a></li>
</ul>
</li>
</ul>
This structure reflects that my house, my car, my boat are a sub level of „about me“ and my desk, my computer, my secretary are a sub level of „about my company“. Although there are no colored areas, borders or any other visual guides the relation between the branches and levels are obvious just from the structure.
But why not <ol>? Wouldn´t it be nice to have a numbered list so that you can see the order of the pages from the number? Yes, it would be nice but unfortunately <ol> doesn´t offer hierarchical numbering. And you can´t hide the numbers in a graphical browser where you don´t need them as navigation guide without hiding them also to the web reader. So <ul> is the better choice although it is unnumbered. The order numbers will be added in a different way.
But before some more information on <ul> list menus in general.
