HTML Lists
HTML can have Unordered Lists, Ordered Lists, or Description Lists:
|
Unordered HTML List
- The first item
- The second item
- The third item
- The fourth item
|
Ordered HTML List
- The first item
- The second item
- The third item
- The fourth item
|
HTML Description List
- The first item
- Description of item
- The second item
- Description of item
|
Unordered HTML Lists
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).
Unordered List:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Unordered HTML Lists - The Style Attribute
A style attribute can be added to an unordered list, to define the style of
the marker:
Style |
Description |
list-style-type:disc |
The list items will be marked with bullets (default) |
list-style-type:circle |
The list items will be marked with circles |
list-style-type:square |
The list items will be marked with squares |
list-style-type:none |
The list items will not be marked |
Disc:
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Circle:
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Square:
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
None:
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
|
Using a type attribute <ul type="disc">, instead of <ul
style="list-style-type:disc">, also works. But in HTML5, the type attribute
is not valid in unordered lists, only in ordered list. |
Ordered HTML Lists
An ordered list starts with the <ol> tag. Each list item starts with the
<li> tag.
The list items will be marked with
numbers.
Ordered HTML Lists - The Type Attribute
A type attribute can be added to an ordered list, to define the type of
the 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>
Try it Yourself »
Upper Case:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Lower Case:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Roman Upper Case:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
Roman Lower Case:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »
HTML Description Lists
A description list, is a list of terms, with a description of each
term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the
data (description).
Description List:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Try it Yourself »
Nested HTML Lists
List can be nested (lists inside lists).
Nested Lists:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
|
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 to display horizontally:
Horizontal List:
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
</body>
</html>
Try it Yourself »
With a little extra style, you can make it look like a menu:
New Style:
ul#menu {
padding: 0;
}
ul#menu li {
display:
inline;
}
ul#menu li a {
background-color: black;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: orange;
}
Try it Yourself »
Chapter Summary
- Use the HTML <ul> element to define an unordered
list
- Use the HTML style attribute to define the bullet style
- Use the HTML <ol> element to define an ordered
list
- Use the HTML type attribute to define the numbering type
- Use the HTML <li> element to define a list item
- Use the HTML <dl> element to define a description
list
- Use the HTML <dt> element to define the
description term
- Use the HTML <dd> element to define the
description data
- Lists can be nested inside lists
- List items can contain other HTML elements
- Use the CSS property display:inline to display a list horizontally
Test Yourself with Exercises!
Exercise 1 »
Exercise 2 »
Exercise 3 »
Exercise 4 »
Exercise 5 »
Exercise 6 »
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 the term in a description list |
<dd> |
Defines the description in a description list |
Color Picker