HTML Lists
HTML List Example
An Unordered List :
- Item
- Item
- Item
- Item
An Ordered List :
- First item
- Second item
- Third item
- Fourth item
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>
Unordered List with Disc Bullets
- Coffee
- Tea
- Milk
Example - Circle
<ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Unordered List with Circle Bullets
- Coffee
- Tea
- Milk
Example - Square
<ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Unordered List with Square Bullets
- Coffee
- Tea
- Milk
Example - None
<ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
Unordered List without Bullets
- Coffee
- Tea
- Milk
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>
Ordered List with Numbers
- Coffee
- Tea
- Milk
Uppercase Letters :
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered List with Letters
- Coffee
- Tea
- Milk
Lowercase Letters :
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered List with Lowercase Letters
- Coffee
- Tea
- Milk
Uppercase Roman Numbers :
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered List with Roman Numbers
- Coffee
- Tea
- Milk
Lowercase Roman Numbers :
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
Ordered List with Lowercase Roman Numbers
- Coffee
- Tea
- Milk
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>
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>
Chapter Summary
- Use the HTML <ul> element to define an unordered list
- Use the CSS list-style-type property to define the list item marker
- 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 describe the term in a description list
- Lists can be nested inside lists
- List items can contain other HTML elements
- Use the CSS property float:left or display:inline to 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 |