HTML and CSS Reference
In-Depth Information
Mark Up Lists as Lists
Make sure any lists are marked up as ul elements, or, occasionally, as dl or ol elements.
<div id="Authors">
Edward Bellamy | Marion Zimmer Bradley | Edgar Rice Burroughs
| John W. Campbell | Lester Del Rey | Cory Doctorow
| Arthur Conan Doyle | H. Beam Piper | Robert Sheckley
| E. E. Smith | Jules Verne | H. G. Wells
</div>
<ul id="Authors">
<li>Edward Bellamy</li>
<li>Marion Zimmer Bradley</li>
<li>Edgar Rice Burroughs</li>
<li>John W. Campbell</li>
<li>Lester Del Rey</li>
<li>Cory Doctorow</li>
<li>Arthur Conan Doyle</li>
<li>H. Beam Piper</li>
<li>Robert Sheckley</li>
<li>E. E. Smith</li>
<li>Jules Verne</li>
<li>H. G. Wells</li>
</ul>
Motivation
Identifying lists as lists improves accessibility. In particular, it enables the use of screen reader tools for
skipping over and navigating through lists.
Potential Trade-offs
Most browsers assign very specific appearances to lists and list items, typically indented and bulleted, and you
may not want this appearance. You can fix this easily with CSS in modern browsers. However, some older
browsers do not support all the necessary properties and will display these pages in less-than-ideal fashion.
Mechanics
There's no simple way to find all the unidentified lists in a site. You'll just have to read the pages and look for
lists. They can be marked up in dozens of different ways: as paragraphs, div s, tables, inline text separated by
commas or other symbols, and more.
Once you've found a list, marking up the individual items is easy. Just use a ul , ol , or dl instead of the current
wrapper element. Use the ordered list ol if the items are numbered. Use dl if the list takes the form name-
description, name-description, name-description. Use ul for all other lists.
Although lists are extremely common in content, list elements are not. The reason is that browsers usually
Search WWH ::




Custom Search