At its core, a menu is nothing more than a list of links or actions. As we've discussed, web standards mandate that the HTML markup gives structure to the content of the web page. Accordingly, you should always use a tag that is appropriate to the meaning of the content. For a list of unordered items, a UL tag serves the purpose best because lists were designed to store a series of items.

All three examples below are lists of links. They all share identical markup:

<ul> <li><a href="#">Customers</a></li> <li><a href="#">Members</a></li> <li><a href="#">Dealers</a></li> <li><a href="#">Distributors</a></li> </ul>

This is a list:

... and this is a list:

... and this is a list, too!

The only difference is that the second and third examples have additional styling to give them the appearance of a menu ... they look different based on the rules applied to the specific list.

As you can see, CSS properties can be applied to a list, giving it a dramatically different appearance from its default appearance.

Summary

Lists can, and should, be used to for graphical menus.

The content of each list item can be a styled link ... more on this later.

Resources