HTML li Tag

The HTML <li> tag means List-item. This tag is used with the <ul>, <ol>, etc. tags to add list items to any HTML list on a webpage.

• This tag is used when you want to add an item in a list.

• In simple menus and unordered list(<ul> tag) List items are displayed using bullet points while inside ordered lists(<ol> tag), the list items are displayed with numeric or alphabetical characters. We will see how both of these look in examples below.

• Also, <li> is a block-level element.

HTML <li> Tag - Syntax and Usage

The <li> tag requires both opening (start) tag and closing(end) tag.

The required syntax for the same is given below:

<li>
    List item text
</li>

HTML <li> Tag Basic Example

Below we have a basic example for using the <li> tag:

In the code example above, we have enclosed the <li> tag inside the <ul> tag, hence we got an unordered list in the output where the list items are shown with bullets in front of them. We can always use CSS to style the list items in whatever form we like.

Using <li> tag inside <ol> tag:

<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>	

HTML <li> Tag Attributes

This element has one attribute type which is useful and it also supports Global attributes and Event attributes.

The type attribute:

This attribute is used to modify the type of the list item by which we can modify the style of the bullet shown in front of every list item.

Here is the syntax for using this attribute:

<li type="1|a|A|i|I|disc|circle|square"> 
    List Item Text
</li>

Attribute Values:

When the <li> tag is used with the <ol> tag:

• 1: This is the default value and is used to specify that the list numbering should be using numerical values like 1, 2, 3, and so on.

• a: When we specify the type as 'a', this means the numbering of the list will be done using small case alphabets like a, b, c, and so on.

• A: When we specify the type as 'A', this means the numbering of the list will be done using upper case alphabets like A, B, C, and so on.

• i: When we specify the type as 'i', this means the numbering of the list will be done using lower case roman numerals like i, ii, iii, and so on.

• I: When we specify the type as 'I', this means the numbering of the list will be done using upper case roman numerals like I, II, III, and so on.

When the <li> tag is used with the <ul> tag:

• disc: This is the default value. It creates a filled circle before the list item, which you also saw in the example above.

• circle: This option will create an unfilled circle.

• square: This creates a filled square.

Try using all these in the live terminal above to see how it changes the list items.

Default CSS Settings for HTML <li> Tag

Given below are the default CSS settings used by most of the browsers:

li {
    display: list-item;
}

Browser Support for HTML <li> Tag

Following browsers support this attribute:

• Firefox 1+

• Google Chrome 1+

• Internet Explorer 2+

• Safari 1+

• Opera 4+