<li></li> tag HTML

Example

A simple <li> tag that open PNLdev.com link:

<ul>    
<li>PHP</li>
</ul>

Laboratory

description & Usage

The <li> tag defines one of the items in the list.

The <li> tag is used in the following tags:

Lists made with the <ol> tag.

Unordered lists made with the <ul> tag.

Lists made with the <menu> tag.

On the other hand, the <li> tag, when it is in the ul and menu lists, is identified with a dot.

As well as the <li> tag when it is in the ol list, it is displayed with numbers or letters.

Browser compatibility and Support

#	Chrome	Edge	Firefox	Safari	Opera
<li>

Attributes

Attributes	Values	Description
value	number	en

Global Attributes

The li tag supports the HTML Global Attributes.

Event Attributes

The li tag supports the HTML Event Attributes.

More Examples

Example

HTML <li> tag -Example #1

<ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

Laboratory

Example

HTML <li> tag -Example #2

<ol>
    <li value="200">Espresso</li>
    <li>Cappuccino</li>
    <li>Latte</li>
    <li>Mocha</li>
    <li>Americano</li>
    <li>Caffè Alcino</li>
</ol>

Laboratory

Example

HTML <li> tag -Example #3

<ol>
    <li>Coffee</li>
        <ol>
            <li>Double Espresso</li>
            <li>Espresso Macchiato</li>
            <li>Espresso Doppio</li>
        </ol>
    <li>juice</li>
    <li>Tea</li>
</ol>

Laboratory

Example

HTML <li> tag -Example #4

<ol>
    <li>Coffee</li>
        <ol>
            <li>Cappuccino</li>
            <li>Latte</li>
            <li>Turkish Coffee</li>
        </ol>
    <li>juice</li>
        <ol>
            <li>Pomegranate juice</li>
            <li>watermelon juice</li>
            <li>carrot juice</li>
        </ol>
    <li>Tea</li>
        <ol>
            <li>Masala tea</li>
            <li>Saffron tea</li>
            <li>Cherry tea</li>
        </ol>
</ol>

Laboratory

Default CSS

Most browsers will display the li tag with the following default style:

li {
	display:  list-item;
}