The <li> element

Short for ‘List Item’. A single item in an ordered or unordered list

General advice

An <li> element is only valid if it's a child of an <ol>, <ul>, or <menu> element. It can contain any flow content, including nested lists.

You don't need to explicitly include the closing </li> tag. The browser will insert that automatically when it sees the start tag for the next list item, or when it sees the </ol> or </ul> end tag for the whole list.

The HTML5 specification recommends that you not include a heading element like <h1> inside an <li> element. Semantically that would create a new section, and therefore split the list across the two sections.

Whitespace in lists

It's common for hand-written HTML and templates that produce HTML to put line breaks between list item elements, and perhaps to indent them to make the HTML easier to read. Usually that extra whitespace between the closing </li> tag and the next <li> start tag is of no importance—it won't affect the meaning of the list, and normally won't make the slightest difference to how a graphical browser will display it.

However, some kinds of styling can make that inter-item whitespace appear in the browser's rendering of a list. For example, setting the CSS display property for the list items to inline-block will make them behave like pieces of inline content rather than vertically stacked blocks, so in that case the browser will interpret extra whitespace between the list items as it would in a paragraph, and leave a horizontal gap between the items.

To avoid that kind of problem, you can either remove all extraneous whitespace, or put it inside the tags themselves, where the browser's HTML parser will ignore it under all circumstances. For example:

<ul
 ><li>First</li
 ><li>Second</li
 ><li>Third</li
></ul>

You can add extra whitespace between attributes, or at the end of a tag just before the > character as shown above, but it's not allowed in between the < and the start of the element's name.

Full list of attributes

All the usual HTML global attributes are available

value

Numerical value to use for item in an ordered list. Not allowed in an unorderd list. Interpreted in the same was as the start attribute on the <ol> element.

Further information

• Official specification for <li> element