Benefits of Using Unordered Lists
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 <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. See the Further Reading section for some sites which explain how to do this.
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 style sheet. 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 style sheet is ignored. Using unordered lists wherever they make sense is a smart document-structuring practice.
Further Reading
Tags: content, CSS, elements, list, unordered
Related:
Posted in HTML, XHTML. 1,829 views
Responses are currently closed, but you can trackback from your own site.
