HTML <li> List Item Tag Reference

Back to index of HTML/xHTML tags grouped by: « Family / « Importance / « A-Z

The li HTML tag means "list item". It indicates an elements in a list (unordered list or ordered list).

The <li> HTML/xHTML tag

The list item <li></li> tag indicates a single list item or element within a list.

When to use the <li> tag (semantic use)

Every direct child element within either an unordered list (<ul>) or an ordered list (<ol>) should be a list item.

List items can contain other content (text or other HTML elements), but there is a logical limit to how much they should contain.

Generally, each thing in a list should be relatively short. In normal writing, you would normally have anything from a few words to a few sentences in a list item (e.g. a bullet point), but you wouldn't normally have more than a paragraph of text, as the bulleting loses its meaning after a while.

So a list item may contain quite a lot of text, even perhaps more than one paragraph, but the important thing is that these are related elements in sequence. You could argue that the 3 columns in a web site are a kind of list, as they share the property of being columns or logical groupings, and they follow each other in sequence, but this is stretching the point of lists.

Going back to the semantic perspective, there should be some meaningful flow or rhythm within a list, or a relevant structure in the order (particularly in the case of ordered lists). There's not enough connection between large, complex objects, like whole columns or whole tables, for them to merit being list items.

It's valid in all current versions of HTML and xHTML, and it should always have a closing </li> tag.

Example of <li> tag use

Here's a simple example of an ordered list. Each piece of content is contained within <li>...</li> tag pairs.

<li>Web Design from Scratch</li>

    <li>A List Apart</li>
    <li>Google</li>
    <li>UseIt.com</li>
    <li>digg.com</li>
    <li>del.icio.us</li>
    <li>Save the Pixel</li>
    <li>Basecamp</li>
    <li>Slashdot</li>
    <li>Smashing Magazine</li>
</ol>

Looks like...

Web Design from Scratch
A List Apart
Google
UseIt.com
digg.com
del.icio.us
Save the Pixel
Basecamp
Slashdot
Smashing Magazine

Alternatives to the <li> tag

There is no direct alternative to the list item tag. If you want a list, you've got to put the elements in <li> tags. However, you may consider a definition list as an alternative in some cases.