Overview
The list types in HTML are: ordered list, unordered list, and definition list.
Ordered List
An ordered list starts with the <ol> tag and each list item starts with the <li> tag.
When rendered, the list items are marked with numbers.
The following HTML code defines an ordered list:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>This produces the following result:
- Item 1
- Item 2
- Item 3
Unordered List
An unordered list starts with the <ul> tag and each list item starts with the <li> tag.
When rendered, the list items are marked with bullets (small black circles) by default.
The following HTML code defines an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>This produces the following result:
- Item 1
- Item 2
- Item 3
Definition List
A definition list is a list of items, with a description of each item. This list starts with the <dl> tag, each list item starts with the <dt> tag, and the <dd> tag describes each item in the list.
When rendered, the list items are displayed, with their definitions indented below them.
The following HTML code defines a definition list:
<dl>
<dt>Item 1</dt>
<dd>- Item 1 description</dd>
<dt>Item 2</dt>
<dd>- Item 2 description</dd>
<dt>Item 3</dt>
<dd>- Item 3 description</dd>
</dl>This produces the following result:
- Item 1
- - Item 1 description
- Item 2
- - Item 2 description
- Item 3
- - Item 3 description
Tag Description
The ol tag is used to define an ordered list using numbers or letters.
The <ol> tag is used in conjunction with list items (<li>) to define list items.
This tag has the form:
<ol>
list items
</ol>HTML5 and HTML4.01 Differences
The "compact" and "type" attributes were deprecated in HTML4.01, and are not supported in HTML5.
The "start" attribute was deprecated in HTML4.01, but IS supported in HTML5.
The "reversed" attribute was added in HTML5.
| HTML5 | = New for HTML5 |
Attributes
| Attribute | Value | Description |
|---|---|---|
| compact | compact | Specifies that the list should render smaller than normal
HTML4:
 HTML5:
|
| reversedHTML5 | reversed | If specified, the list order should be descending. If not specified, the list order should be ascending |
| start | number | Specifies the start point in a list
HTML4:
HTML5:
 |
| type | 1
A a I i |
Specifies which kind of bullet points will be used
HTML4:
HTML5:
|
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>This produces the following result:
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML 2 |
|---|---|
| Empty Tag: | No |
Tag Description
The ul tag is used to define an unordered list.
The <ul> tag is used in conjunction with the list item tag (<li>) to define list items.
This tag has the form:
<ul>
list items
</ul>HTML5 and HTML4.01 Differences
The "compact" and "type" attributes are deprecated in HTML4.01, and are not supported in HTML5.
Attributes
| Attribute | Value | Description |
|---|---|---|
| compact | compact | Specifies that the list should render smaller than normal
HTML4:
HTML5:
|
| type | disc
square circle |
Specifies the style of the bullet points of the list items
HTML4:
HTML5:
|
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>This produces the following result:
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML 2 |
|---|---|
| Empty Tag: | No |
Tag Description
The li tag is used to define a list item.
The <li> tag is used in conjunction with ordered (<ol>) lists, unordered (<ul>) lists, and menu lists (<menu>).
This tag has the form:
<li>item text</li>HTML5 and HTML4.01 Differences
The "type" attribute was deprecated in HTML4.01, and is NOT supported in HTML5.
The "value" attribute was deprecated in HTML4.01, but IS supported in HTML5.
Attributes
| Attribute | Value | Description |
|---|---|---|
| type | 1
A a I i disc square circle |
Specifies which kind of bullet point will be used
HTML4:
HTML5:
|
| value | number | Specifies the number of a list item (only within ordered list (<ol>) element)
HTML4:
HTML5:
|
Global Attributes
This tag also supports the HTML Global Attributes.
Event Attributes
This tag also supports the HTML Event Attributes.
Examples
The following example shows the basic use of this tag:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>This produces the following result:
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
Browser Support
| Chrome | Firefox | IE | Safari | Opera |
|---|---|---|---|---|
Doctype Declaration Support
The following table lists the doctype declarations this element may appear in:
| HTML4.01 / XHTML1.0 | XHTML 1.1 | HTML 5 | ||
|---|---|---|---|---|
| Traditional | Strict | Frameset | ||
Miscellaneous Information
| Defined In: | HTML 2 |
|---|---|
| Empty Tag: | No |
