HTML Lists (Ordered, Unordered, Description, and Horizontal)
HTML lists enable web developers to gather in list a number of associated things.
Example
An unordered HTML list:
- Item 1
- Item 2
- Item 3
- Item 4
An ordered HTML list:
- First item
- Second item
- Third item
- Fourth item
Unordered HTML List
The ul
tag is the beginning of an unordered list. The li
tag begins with each item of the list.
The list items are defined default by bullets (little black circles):
Example
- Coffee
- Tea
- Milk
Result of the above query
- Coffee
- Tea
- Milk
Ordered HTML List
The ol
tag denotes an ordered list. Each list item is preceded by the li
tag.
The list elements are denoted by default with numbers:
Example
- Coffee
- Tea
- Milk
Result of the above query
- Coffee
- Tea
- Milk
HTML Description Lists
Description lists are also supported by HTML.
A description list is a list of keywords that each have a description.
The description list is defined by the dl
tag, the term (name) is defined by the dt
tag, and each term is described by the dd
tag:
Example
- Coffee
- - black hot drink
- Milk
- - white cold drink
Result of the above query
- Coffee
- - black hot drink
- Milk
- - white cold drink
HTML Unordered Lists
An unordered (bulleted) list is defined by the HTML ul
element.
Unordered HTML List
The ul
tag is the beginning of an unordered list. The li
tag begins with each item of the list.
The list items are defined default by bullets (little black circles):
Example
- Coffee
- Tea
- Milk
Result of the above query
- Coffee
- Tea
- Milk
Related Links
Unordered HTML List - Choose List Item Marker
The CSS list-style-type
property or html type
attribute specifies the appearance of the list item marker. It can have one of the values listed below:
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
Type Disc
- Coffee
- Tea
- Milk
Type Circle
- Coffee
- Tea
- Milk
Type Square
- Coffee
- Tea
- Milk
Type None
- Coffee
- Tea
- Milk
Result of the above query
Type Disc
- Coffee
- Tea
- Milk
Type Circle
- Coffee
- Tea
- Milk
Type Square
- Coffee
- Tea
- Milk
Type None
- Coffee
- Tea
- Milk
Nested HTML Lists
Lists can be nested (list inside list):
Example
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Result of the above query
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Note: A list item (li
) may have a new list and additional HTML items, such as pictures and links, etc.
Horizontal List with CSS
The CSS may be used to style HTML lists in many different ways.
One typical technique is to build a navigation menu by styling a list horizontally:
Related Links
HTML Ordered Lists
An ordered list is defined by the HTML ol
element. A numerical or alphabetical order can be used in an ordered list.
Ordered HTML List
The ol
tag is used to start an ordered list. The li
tag is used to begin each list item.
The list elements are denoted by default with numbers:
Example
- Coffee
- Tea
- Milk
Result of the above query
- Coffee
- Tea
- Milk
Ordered HTML List - The Type Attribute
The ol
Tag type property determines the item marker list type
:
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 |
Example:
Numbers
- Coffee
- Tea
- Milk
Uppercase Letter
- Coffee
- Tea
- Milk
Lowercase Letter
- Coffee
- Tea
- Milk
Uppercase Roman Numbers
- Coffee
- Tea
- Milk
Lowercase Roman Numbers
- Coffee
- Tea
- Milk
Result of the above query
Numbers
- Coffee
- Tea
- Milk
Uppercase Letter
- Coffee
- Tea
- Milk
Lowercase Letter
- Coffee
- Tea
- Milk
Uppercase Roman Numbers
- Coffee
- Tea
- Milk
Lowercase Roman Numbers
- Coffee
- Tea
- Milk
Control List Counting
A sorted list starts by default with 1. You may use the start
property if you wish to start counting from a certain number.
Example
- Coffee
- Tea
- Milk
Result of the above query
- Coffee
- Tea
- Milk
Nested HTML Lists
Lists can be nested (list inside list):
Example
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Result of the above query
- Coffee
- Tea
- Black tea
- Green tea
- Milk
Note: A list item (li
) can include a new list as well as other HTML elements such as photos, links, and so on.
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 Other Lists
It is also used for different list types
Description lists are also supported by HTML.
HTML Description Lists
A description list is a list of keywords that each have a description.
The description list is defined by the dl
tag, the term (name) is defined by the dt
tag, and each term is described by the dd
tag:
Example
- Coffee
- - black hot drink
- Milk
- - white cold drink
Result of the above query
- Coffee
- - black hot drink
- Milk
- - white cold drink