This is a draft "webmaster tip", under work and review by the Quality Assurance Team, and shouldn't be considered as an official tip from W3C while it remains a draft.
Almost any place on a website where an unsorted series of similar elements are grouped, using an unordered list makes sense.
Not only does it improve the readability of your HTML code, it also defines meaning for a group of content which would otherwise have none.
Despite this, you'll still see websites with clusters of <div> tags or <a> tags separated by delimeters like | or • (•).
The main cause is most likely the CSS styling baggage which comes with the <ul> element.
Webmasters find it easier to apply styles to a pristine element like <div> than remove them from <ul>.
Add to this inconsistent browser implementation of the unordered list's default styles and we have quite a mess on our hands.
However, the CSS to make lists appear virtually identical to <div>'s or even inline lists of links is already supported by most commonly used visual browsers.
They can also be made to appear the same across all browser platforms with simple and validating style commands.
See the Further Reading section for some sites which explain how to do this.
You might wonder what the big deal is concerning unordered lists, until you start to think about all the things to which they could apply:
<ul> elements)Pretty much anything you can prefix with "a list of", where numerical order isn't important, can be made into an unordered list; and don't limit yourself just to things which require bullets since they can be removed via CSS very easily! By grouping items such as these in a list, you apply to them a meaning for being in series, using proper HTML semantics.
So what's so good about it?
Elements such as <div> and <span> imply no document semantics, being essentially just plain blocks of content.
By creating lists, your content now has meaning independent of that applied by the visual styles of your CSS.
User Agents which scan only your content (and ignore your CSS), like text browsers, text-to-speech browsers, and even search-bots understand that it is organized into a list and can then render (or interpret) it as such.
Displaying a plain series of links (<a> elements) without delimeters, causes a text browser to run them all together, making it difficult for a user to choose between them.
And even for users who surf with their own user stylesheet, your old <div><div><div> method for displaying serial content might not immediately convey the impression of being a connected series.
Using an unordered list for these tasks causes non-visual browsers to render them in a list format instead of as a soup of unstyled text, providing meaningful separation and grouping of elements simultaneously.
No artificial separation using delimeters or <hr> elements are required.
Don't be afraid of the styling hurdles, apply list semantics to your HTML content today!
Created Date: 2004-06-09 by Brian Huisman