html markup for navigation

There’s been a lot of griping today about the use of an unordered list for a navigation menu (from @calevans among others). Although it is a generally accepted practice with the argument that a navigation menu is an unordered list of links, it’s not too difficult to find an alternative that is just as efficient is it? What’s the most basic code we could use as an alternative?

In html5 you could use the following: -

<nav>
<a title="First link additional text" href="#">Link 1</a>
<a title="Second link additional text" href="#">Link 2</a>
<a title="Third link additional text" href="#">Link 3</a>
</nav>

with css to sort out positioning and look.

For some specific layouts you may want to specify a :first-child pseudo class or a class="last" on a link.

For HTML4 strict just substitute a <div class="menu"> for <nav>.

So, not as complicated as I once thought!

2 Comments

  1. Cal Evans says:

    Hi Tess!

    Thanks for making it very simple. My problem is only with designers (and I’ve worked with more than one) that alter the default behavior of the UL instead of putting it in the DIV. If you are doing it for your own site and you know there will never be a need for a list of items, hey go for it. However, if you’ve got to work with others (especially hard-headed programmers) then wrapping it in a DIV is the way to go.

    Thanks!
    =C=

  2. [...] month I set out my view of using <nav> and <ul>s for navigation purposes. This was as a reaction to feelings in the [...]

Leave a Reply