HTML <li> tag
The <li> tag is used to create list items in HTML lists. Whether you can creating ordered or unordered lists you have to use <li>List value</li> tag series inside <ol> or <ul> tags to create complete lists.
Following are few examples with ordered, unordered and CSS list with <li> tag use.
Example of using HTML li inside <ol>
Following example shows using <li> tag inside ordered list.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<p>A few color names</p>
<ol>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ol>
</body>
</html>
|
Using li inside unordered list example
Following example creates list by using <li> tag inside <ul> tag.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<p>A few color names</p>
<ul>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ul>
</body>
</html>
|
CSS ul li example
Following example applies CSS to unordered list. The ul style is created in CSS with border, background CSS properties where ul li is used to assign CSS style to list item (<li>).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists</title>
<style>
ul{
color: green;
background-color: yellow;
border: 1px solid black;
}
ul li {
color:black;
border: 1px dotted red;
}
</style>
</head>
<body>
<p>A few color names</p>
<ul start=“5”>
<li>Black</li>
<li>White</li>
<li>Yellow</li>
<li>Red</li>
<li>Orange</li>
</ul>
</body>
</html>
|
Also see HTML div | HTML forms
Leave A Comment?