Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <li> tag.

Use of <li> tag

The <li> tag is used to define a list-term.
It can be used within <ol> element or <ul> element or <menu> element.
Click here to learn more about HTML Lists

Display:Block

Example of <li> tag

       <li> list-item1 </li>
       <li> list-item2 </li>

Do not use <li> tag without <ol> element or <ul> element or <menu> element.

Supported Browsers.

Tag
<li> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h4> Example of unordered lists </h4>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ul>
<h4> Example of ordered lists </h4>
<ol>
<li> HTML </li>
<li> CSS </li>
<li> JavaScript </li>
</ol>
</body>
</html>

Output

Example of unordered lists

  • HTML
  • CSS
  • JavaScript

Example of ordered lists

  1. HTML
  2. CSS
  3. JavaScript

More Reference


We can make nested list or multi-level lists as shown in below.

<ul>
<li> HTML
<ul>
<li> Elements </li>
<li> Tags </li>
<li> Attributes & so on </li>
</ul>
</li>
<li> CSS </li>
<li> JavaScript </li>
</ul>

Default CSS Properties of <li> tag

li {
display:list-item;
}

Attributes of <li> tag


Attribute Value Notes
type 1(default value of <ol>)
A
a
I
i
disk(default type of <ul>)
square
circle
It specifies which bullet type will be utilized.
value number It specifies the counter value of a list applicable only for <ol>
Or It allows us to give custom serial number of any lists.

Note that: type attribute is not supported in HTML5.Use CSS instead.