HTML <li> Tag for List Items

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <li> List Item Tag

The <li> tag is used in an ordered list or unordered list to create a list item. List items can be numbered or highlighted with a bullet mark or image, which is why list items are sometimes called bullet points.

"To Do" list with deleted and completed items

~~This item was deleted~~
This item was completed
This item will be done later

This is an actual working example of the <li> tag example code below. Select one of the alternate style sheets to show or hide the deleted items. In Firefox for example, drop down the View menu, point to Page Style and select either Hide deleted items or Show deleted items.

List Item <li> Tag Syntax

Rules for coding HTML `li` elements

<body>
   ...
   ... flow content expected ...
   <ol> or <ul> or <menu>
      <li>
         ... flow content ...
      </li>
      ...
   </ol> or </ul> or </menu>
   ...
</body>

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Inside a ol element, ul element or menu element, include one or more li elements.
Begin each li element with a starting <li> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the li element, between the <li> starting tag and the </li> ending tag, code the inner HTML flow content for the list item.
When inserting a list item or deleting a list item, code the <ins> tag or <del> tag inside the <li> tag.
End the li element with a matching </li> closing tag.

Content of the li element

The content of the li element can include HTML comments, text content and any tags that can be used in flow content.

<li> Tag Attributes

Attributes of the <li> tag

global attributes

In addition to the personal attributes of the <li> tag below, any of the common HTML attributes can also be coded.

<li> Tag Examples

Examples of the `li` tag in HTML 5

"To Do" list with deleted and completed items

(see <li> tag demo above)

<div>
<style scoped="scoped">
ul.li-del-demo li.complete, ul.li-del-demo li del {
   text-decoration: line-through;
}
ul.li-del-demo li {
   list-style-type: circle;
}
ul.li-del-demo li.complete {
   list-style-type: disc;
}
ul.li-del-demo li del {
   display: inherit;
}
</style>
<style scoped="scoped" title="Show deleted items">
ul.li-del-demo li.deleted {
   display: list-item;
}
</style>
<style scoped="scoped" title="Hide deleted items">
ul.li-del-demo li.deleted {
   display: none;
}
</style>
<ul class="li-del-demo">
<li class="deleted"><del>This item was deleted</del></li>
<li class="complete">This item was completed</li>
<li>This item will be done later</li>
</ul>
</div>

The list uses a filled bullet for completed items and a white bullet otherwise. The display: inherit for the del element overrides the default, which is display: none. The selector for the style that hides deleted list items cannot be based on the presence of the del element because CSS context selectors can only reference an element's ancestors, and conditional selectors can only reference attributes, not child elements. (This is to avoid the possibility of circular references in CSS selectors.) Therefore, the display: none style must be based on an attribute of the <li> tag, namely the class attribute in the example.

Changes in HTML 5 - <li> Tag

What's new in HTML 5

The value attribute, which was removed from HTML 4 and XHTML, has been resurrected in HTML 5.

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <li> tag because they either have been deprecated or were never officially supported:

type
value

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the li element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5