By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

Using Lists for Navigation

HTML Lists for Navigation allows for richer styling, and improves Accessibility.

Edited: 2011-07-24 19:07

Using lists for navigation, has many benefits, not only when it comes to Accessibility, but also when it comes to styling.


A high level of Accessibility is easily achieved by following a few simple, and sometimes obvious coding recommendations. Using lists for navigation is one of them, and Accessibility is perhaps one of the best reason to use lists.

Screen Readers

So how dose someone with a screen reader use lists? People with screen readers often "scan" through the content for lists.

Basically the screen reader reads up laud whenever it encounters a list, "list with x links", and then they may decide whether they want to continue reading the individual list items.

When they encounter a website for the first time, they may start by reading the headings on the page, which is just one reason why its a good idea to have informative headings. So it may also be a good idea to include a heading before the site navigation.


One of the main reasons many web designers decide not to use lists, is because they don't know to style them so they look the same in all browsers. The issue comes down to setting the margin and padding on your lists, (see also: Lists in HTML). While there are quite a few ways to set the margin and padding of lists, i usually just apply below style at the top of my main stylesheet, and then i simply add the margin where needed.

* {
  margin: 0;
  padding: 0;

Another reason that i do it this way, is that i likely need to modify the margin of paragraphs and other elements anyway.

Creating a Horizontal List

Another problem, is some web designers limited understanding of element behavior. When you know how block and inline elements should behave, a lot of things start to get easier.

The ul and ol elements are block elements, and the li are blocks as well. Knowing this it shouldn't be hard for us to know that applying left float to the li elements of a list, would create a horizontal list, you can then apply a left margin to the list items as needed.