Summary
The HTML List item element (<li>
) is used to represent a list item. It should be contained in an ordered list ({{HTMLElement("ol")}}), an unordered list ({{HTMLElement("ul")}}) or a menu ({{HTMLElement("menu")}}), where it represents a single entity in that list. In menus and unordered lists, list items are ordinarily displayed using bullet points. In ordered lists, they are usually displayed with some ascending counter on the left such as a number or letter
- Content categories None.
- Permitted content Flow content.
- Tag omission The end tag can be omitted if it is immediately followed by another {{HTMLElement("li")}} element or if there is no more content in its parent element.
- Permitted parent elements An {{HTMLElement("ul")}}, {{HTMLElement("ol")}} or {{HTMLElement("menu")}} element. Though not a non-conforming usage, the obsolete {{HTMLElement("dir")}} may also be a parent.
- DOM interface {{domxref("HTMLLIElement")}}
Attributes
This element includes the global attributes.
- {{htmlattrdef("value")}}
- This integer attributes indicates the current ordinal value of the item in the list as defined by the {{HTMLElement("ol")}} element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists ({{HTMLElement("ul")}}) or for menus ({{HTMLElement("menu")}}).
Note: This attribute was deprecated in HTML4, but reintroduced in HTML5.
Note: Prior to {{Gecko("9.0")}}, negative values were incorrectly converted to 0. Starting in {{Gecko("9.0")}} all integer values are correctly parsed.
- {{htmlattrdef("type")}} {{Deprecated_inline}}
- This character attributes indicates the numbering type:
a
: lowercase lettersA
: uppercase lettersi
: lowercase Roman numeralsI
: uppercase Roman numerals1
: numbers
Usage note: This attribute has been deprecated: use the CSS {{cssxref("list-style-type")}} property instead.
Examples
<ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol>
The above HTML will output:
- first item
- second item
- third item
<ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul>
- first item
- second item
- third item
For more detailed examples, see the <ol> and <ul> pages.
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}} | {{Spec2('HTML WHATWG')}} | |
{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '<li>')}} | {{Spec2('HTML5 W3C')}} | |
{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}} | {{Spec2('HTML4.01')}} |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoDesktop("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | {{CompatVersionUnknown}} | {{CompatGeckoMobile("1.0")}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} | {{CompatVersionUnknown}} |
See also
- Other list-related HTML Elements: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} and the obsolete {{HTMLElement("dir")}};
- CSS properties that may be specially useful to style the
<li>
element:- the {{cssxref("list-style")}} property, to choose the way the ordinal is displayed,
- CSS counters, to handle complex nested lists,
- the {{cssxref("margin")}} property, to control the indent of the list item.
{{HTMLRef}}