li: The List Item element
The <li>
HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>
), an unordered list (<ul>
), or a menu (<menu>
). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
Attributes
Specific attributes
Allowed attributes
value="[number]"
indicates the current ordinal value of the list item as defined by the <ol>
element. The only allowed values for this attribute are numbers, even if the list is displayed with Roman numerals or letters. This attribute can only be used when the <li>
element is a child of an <ol>
element.
Global attributes
accesskey
Specifies a keyboard shortcut to activate or focus an element.
aria-*
Defines accessibility properties and states for assistive technologies.
class
Specifies one or more CSS class names for styling the element.
data-*
Stores custom data private to the page or application.
dir
Sets the text direction (left-to-right, right-to-left, or auto).
hidden
Hides the element from display and assistive technologies.
id
Defines a unique identifier for the element within the document.
inputmode
Hints which virtual keyboard type to display on mobile devices.
itemid
Provides a global identifier for microdata items.
itemprop
Defines a property name-value pair for microdata.
itemref
Associates properties with an item via element IDs for microdata.
itemscope
Creates a new microdata item container.
itemtype
Specifies the vocabulary URL for microdata items (like Schema.org).
lang
Specifies the primary language of the element’s content.
nonce
Provides a cryptographic nonce for Content Security Policy.
role
Defines the element’s semantic role for accessibility.
tabindex
Controls keyboard navigation order and focusability.
title
Provides advisory information displayed as a tooltip.
Example
<h3>Setting up a Personal Domain</h3>
<ol>
<li>Research domain registrars that align with your values</li>
<li>Check domain availability for your chosen name</li>
<li value="5">Configure DNS settings to point to your hosting</li>
<li>Set up SSL certificate for secure HTTPS</li>
<li>Test your domain configuration</li>
</ol>
<h3>Web Development Resources</h3>
<ul>
<li>MDN Web Docs - comprehensive web standards documentation</li>
<li>Can I Use - browser compatibility tables</li>
<li>IndieWeb Wiki - community knowledge base</li>
<li>W3C Standards - official web specifications</li>
</ul>