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 • (&bull;). The main reason for this is probably the CSS styling baggage (padding, bullets, etc.) which comes with the <ul> element. Many webmasters find it easier to apply styles to a pristine element like <div> than to remove them from <ul>. 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.

Benefits of Using Unordered Lists

Making sense out of context

Elements such as <div> and <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.

Vía: www.w3.org/QA/Tips/unordered-lists »