Unordered List

  • Second
  • Fourth
  • Third
  • First

 Ordered List

  • First
  • Second
  • Third
  • Fourth

 

Unordered HTML Lists

<ul> tag is used to define an unordered list. However, each item is always started with <li> tag.

The list items are always marked with the bullets.

 

Syntax
<ul>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>

 

Unordered HTML List With Style Attribute

The style of marker of an unordered list can be defined using the style attribute.

Style                       Description
list-style-type:disc        The bullets will be used for marking
list-style-type:circle      The circles will be used for marking
list-style-type:square      The squares will be used for marking
list-style-type:none        Nothing will be used for making

 

Disc
<ul style=”list-style-type:disc”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>
Circle
<ul style=”list-style-type:circle”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>
Square
<ul style=”list-style-type:square”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>
None
<ul style=”list-style-type:none”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>

 

Ordered HTML List

Similar to unordered list declaration, <li> tag is used for ordered HTML lists.

<ol> tag is used while defining the list.

 

Syntax
<ol>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

 

Ordered HTML List With Type Attribute

The type of marker of an ordered list can be defined using the type attribute.

 

Type       Description
type=”1”   Item list will be numbered with numerals(default)
type=”A”   Item list will be numbered with uppercase letters
type=”a”   Item list will be numbered with lowercase letters
type=”I”   Item list will be numbered with uppercase roman numbers
type=”i”   Item list will be numbered with lowercase roman numbers

 

Numbers
<ol type=”1”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

 

Uppercase Letters
<ol type=”A”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

 

Lowercase Letters
<ol type=”a”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

Uppercase Roman Numbers
<ol type=”I”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

 

Lowercase Roman Numbers
<ol type=”i”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ol>

 

HTML Description Lists

HTML supports description lists.

A description list is a list having description of each item.

<dl>                   Defines the description list
<dt>                   Defines the item of the list
<dd>                   Defines each tem of the list

 

Syntax
<dl>
<dt>Mumbai</dt>
<dd>-Capital is Maharastra<dd>
<dt>Delhi</dt>
<dd>-Capital is India<dd>
<dt>Bangalore</dt>
<dd>-Capital is Karnataka<dd>
</dl>

 

Nested HTML Lists

HTML list can also be nested, if required.

 

Syntax
<ul>
<li>India
<ul>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>
</li>
</ul>

Please Note: A list can contain nested list, other HTML elements like links, images, etc.

 

Horizontal HTML Lists

Using CSS, HTML list can be styled in many ways.

Declaring the list horizontally is one of the popular styles.

 

Syntax
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id=”state”>
<li>Mumbai</li>
<li>Delhi</li>
<li>Bangalore</li>
</ul>
</body>
</html>

A style can be added to the list using CSS.

 

Syntax
ul#state {
padding: 0;
}
ul#state li {
display: inline;
}
ul#state li a {
background-color: red;
color: black;
padding: 20px 10px;
text-decoration: none;
border-radius: 2px 2px 0 0;
}
ul#state li a:hover {
background-color:white;
}

 
Let Us Quickly Revise
<ul>                     Define an unordered list
style                    Define the bullet style
<ol>                     Define an ordered list
type                     Define the numbering type
<li>                     Define the list item
<dl>                     Define a description list
<dt>                     Define the description item
<dd>                     Define the description data of item list
display:inline           Display the list horizontally
email