Unordered lists: more than just bullets
The List Concept
When marking up content which could be defined in some way as a list, you should consider using an unordered list (
<ul>) for presentation.
Not only does it improve the readability of your HTML code, it also applies meaning to content which would otherwise have none.
Underused and maligned
Many sites avoid using unordered lists to mark up content where they would plainly make sense.
On these sites you'll often see plain groups of
<div> tags separated by
<hr>'s or clusters of
<a> tags separated by delimiters like | (vertical bar) or • (
The main reason for this is probably the CSS styling baggage (padding, bullets, etc.) which comes with the
Many webmasters find it easier to apply styles to a pristine element like
<div> than to remove them from
Add to this the inconsistent implementation of default styles across browser platforms and we have quite a mess on our hands.
Fortunately, the CSS to make list elements appear virtually the same across most modern visual browsers, and identical to
<div>'s or even inline
<span>'s, is already widely supported.
See the Further Reading section for some sites which explain how to do this.
Benefits of Using Unordered Lists
Making sense out of context
Elements such as
<span> are semantically empty, implying no meaning other than grouping content into blocks.
Any meaning they convey is a result of how your CSS influences their display in a visual browser context.
By grouping applicable content into lists, it gains meaning via your markup, independent of your stylesheet. User Agents which scan only your content (and ignore your visual CSS), like text browsers, text-to-speech browsers, and even search-bots can understand your list organization and proceed to render (or interpret) it as such.
Assisting in usability
Displaying a plain series of links (
<a> elements) causes a text browser to run them all together, making it difficult for a user to choose between them.
Many tutorials recommend the make-shift solution where delimiters are inserted between such links to prevent confusion.
The same problems apply to the common
<div></div> <div></div> method for displaying content, separated by
<hr>'s or CSS borders, which might not provide the impression that the blocks are part of a series.
Using an unordered list for these layouts causes non-visual browsers to render content in a list format instead of as a soup of plain block or inline elements.
Meaningful separation and grouping of elements becomes automatic; no artificial separation, using delimiters or
<hr> elements, is required.
It's a Good Thing
List semantics give any group of items a reason for sticking together, which carries over even when your stylesheet is ignored. Using unordered lists wherever they make sense is a smart document-structuring practice.
- The Listamatic! Tons of list-styling goodness. Also check out their great tutorials.
- Eric Meyer comments on Consistent List Indentation across browser platforms, Aug 2002.
- A detailed article on Taming Lists from A List Apart, Sept 2002.
- Lists in the HTML 4.01 Spec.
About the "QA Tips"
The W3C QA Tips are short documents explaining useful bits of knowledge for Web developers or designers, hosted and produced by the Quality Assurance Interest Group at W3C.
While the tips are carefully reviewed by the participants of the group, they should not be seen as anything else than informative bits of wisdom, and especially, they are not normative W3C technical specifications.
Learn more about the Tips, how to submit your own pearls of wisdom, and find all the other QA tips in the Tips Index.