HTML List
HTML lists allow web developers to group a set of related items in
lists.
Example
An unordered HTML list:
- Item
- Item
- Item
- 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>Item
1</li>
<li> Item
2</li>
<li> Item
3</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> Item
1</li>
<li> Item
2</li>
<li> Item
2</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> Item
1</dt>
<dd>- Item
01</dd>
<dt> Item
2</dt>
<dd>- Item
02</dd>
</dl>
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 Unordered Lists
The HTML <ul> tag defines an
unordered (bulleted) list.
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>Item
01</li>
<li> Item
02</li>
<li> Item
03</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. It can have one of the
following values:
|
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> Item
01</li>
<li> Item
02</li>
<li> Item
03</li>
</ul>
Example -
Circle
<ul style="list-style-type:circle;">
<li> Item
01</li>
<li> Item
02</li>
<li> Item
03</li>
</ul>
Example -
Square
<ul style="list-style-type:square;">
<li> Item
01</li>
<li> Item
02</li>
<li> Item
03</li>
</ul>
Example -
None
<ul style="list-style-type:none;">
<li> Item
01</li>
<li> Item
02</li>
<li> Item
03</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li> Item
1</li>
<li> Item
01
<ul>
<li> Item
2</li>
<li> Item
02</li>
</ul>
</li>
<li> Item
3</li>
</ul>
Note: A list item (<li>) can
contain a new list, and other HTML elements, like images and links, etc.
Horizontal List with CSS
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a
navigation 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>
Chapter Summary
- Use
the HTML
<ul>element to define an unordered list - Use
the CSS
list-style-typeproperty to define the list item marker - Use
the HTML
<li>element to define a list item - Lists
can be nested
- List
items can contain other HTML elements
- Use
the CSS property
float:leftto display a list horizontally
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 |
