HTML Lists
HTML List Tags
Tag Description
<ul> Defines an
unordered list
<ol> Defines an
ordered list
<li> Defines
a list item
<dl> Defines a
description list
<dt> Defines a
term in a description list
<dd> Describes
the term in a description list
HTML List Example
An Unordered List:
Item
Item
Item
Item
An Ordered List:
First item
Second item
Third item
Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
The list items will be marked with bullets (small black
circles) by default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
»
Unordered HTML List - Choose List Item Marker
The CSS list-style-type property is used to define the style
of the list item marker:
Value Description
disc Sets the list
item marker to a bullet (default)
circle Sets the list
item marker to a circle
square Sets the list
item marker to a square
none The list items
will not be marked
Example - Disc
<ul
style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
»
Example - Circle
<ul
style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
»
Example - Square
<ul
style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
»
Example - None
<ul
style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
»
Ordered HTML List
An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines the type of
the list item marker:
Type Description
type="1" The
list items will be numbered with numbers (default)
type="A" The
list items will be numbered with uppercase letters
type="a" The
list items will be numbered with lowercase letters
type="I" The
list items will be numbered with uppercase roman numbers
type="i" The
list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
»
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of
each term.
The <dl> tag defines the description list, the
<dt> tag defines the term (name), and the <dd> tag describes each
term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
»
Nested HTML Lists
List can be nested (lists inside lists):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
»
Note: List items can contain new list, and other HTML
elements, like images and links, etc.
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a
menu:
Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
0 comments: