HTML <li> Tag

The HTML <li> tag represents a list item in ordered and unordered lists.

The <li> tag is placed inside either a <ol> tag or a <ul> to represent each individual item within that list. It can also be used with the <menu> tag for HTML 5.1 and HTML Living Standard documents.

Syntax

The <li> tag is written as <li></li> with the list item inserted between the start and end tags. The element must be placed inside either a <ol> tag or a <ul> tag to provide each individual list item within those elements.

The <li> tag can also be used inside the <menu> element (only when the element is in the toolbar state), however, that element is not supported by the W3C HTML5 specification - it is currently only supported by the HTML 5.1 specification and the WHATWG HTML Living Standard.

Like this:

<ul>
	<li>List item...</li>
	<li>List item...</li>
	<li>List item...</li>
</ul>

Examples

Unordered List

Here's an example of using the <li> inside the <ul> tag to create an unordered list.

Ordered List

Here's an example of using the <li> inside the <ol> tag to create an ordered list.

The value Attribute

You can use the value attribute to specify a number for a list item. Any subesquent list items increment their value from that initial value (unless you override it with a new value).

Note that you can only use the value attribute when using the <ol> element.

Also note that the ordinal value of the value attribute must be a valid integer.

Applying Styles

You can use the CSS list-style, list-style-image, list-style-position, and list-style-type properties to change the styles of the <li> elements.

Although you can apply these properties directly to the <li> element, they are usually applied to the parent element (which is then cascaded down to the <li> element).

Here are some examples.

Roman Numerals

This example uses the list-style-type property to specify roman numerals.

Square Bullets

This example uses the list-style-type property to specify square bullets for each list item within an unordered list.

Images

You can replace the bullet points with an image using the list-style-image property.

Position of List Item

This example uses the list-style-position property to specify the position of the list items.

The list-style Property

The list-style property is a shortcut property. It allows you to apply multiple properties to your list items.

Example:

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <li> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <li> tag/element.

AttributeDescription
valueSpecifies the value of the list item. The value must be a number. Can only be used if the list is an ordered list (i.e. <ol>).

Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <li> tag , as well as with all other HTML tags.

  • accesskey
  • class
  • contenteditable
  • contextmenu
  • dir
  • draggable
  • dropzone
  • hidden
  • id
  • inert
  • itemid
  • itemprop
  • itemref
  • itemscope
  • itemtype
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <li> element, as well as any other HTML5 element.

  • onabort
  • oncancel
  • onblur
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • oncontextmenu
  • ondblclick
  • ondrag
  • ondragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • onemptied
  • onended
  • onerror
  • onfocus
  • onformchange
  • onforminput
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onload
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • onmousewheel
  • onpause
  • onplay
  • onplaying
  • onprogress
  • onratechange
  • onreadystatechange
  • onscroll
  • onseeked
  • onseeking
  • onselect
  • onshow
  • onstalled
  • onsubmit
  • onsuspend
  • ontimeupdate
  • onvolumechange
  • onwaiting

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

The value attribute was deprecated in HTML 4, however, this attribute is supported in HTML5 (but only if the <li> element is a child of an <ol> element).

Also, the type attribute is not supported in HTML5 (it was deprecated in HTML 4).

To see more detail on the two versions see HTML5 <li> Tag and HTML4 <li> Tag. Also check out the links to the official specifications below.

Template

Here's a template for the <li> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <li> Tag and HTML4 <li> Tag.

<li  
 value*=""
 
 accesskey=""
 class=""
 contenteditable=""
 contextmenu=""
 dir=""
 draggable=""
 dropzone=""
 hidden=""
 id=""
 itemid=""
 itemprop=""
 itemref=""
 itemscope=""
 itemtype=""
 lang=""
 spellcheck=""
 style=""
 tabindex=""
 title=""
 translate=""

 onabort=""
 onautocomplete=""
 onautocompleteerror=""
 onblur=""
 oncancel=""
 oncanplay=""
 oncanplaythrough=""
 onchange=""
 onclick=""
 onclose=""
 oncontextmenu=""
 oncuechange=""
 ondblclick=""
 ondrag=""
 ondragend=""
 ondragenter=""
 ondragexit=""
 ondragleave=""
 ondragover=""
 ondragstart=""
 ondrop=""
 ondurationchange=""
 onemptied=""
 onended=""
 onerror=""
 onfocus=""
 oninput=""
 oninvalid=""
 onkeydown=""
 onkeypress=""
 onkeyup=""
 onload=""
 onloadeddata=""
 onloadedmetadata=""
 onloadstart=""
 onmousedown=""
 onmouseenter=""
 onmouseleave=""
 onmousemove=""
 onmouseout=""
 onmouseover=""
 onmouseup=""
 onmousewheel=""
 onpause=""
 onplay=""
 onplaying=""
 onprogress=""
 onratechange=""
 onreset=""
 onresize=""
 onscroll=""
 onseeked=""
 onseeking=""
 onselect=""
 onshow=""
 onsort=""
 onstalled=""
 onsubmit=""
 onsuspend=""
 ontimeupdate=""
 ontoggle=""
 onvolumechange=""
 onwaiting=""
	>
</li>

* The value attribute can only be used if the <li> element is a child of an <ol> element.

Tag Details

For more details about the <li> tag, see HTML5 <li> Tag and HTML4 <li> Tag.

Specifications

Here are the official specifications for the <li> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.