HTML supports ordered, unordered, and defined lists
Instance
-
Unordered list
-
This example shows an unordered list.
-
Ordered list
-
This example shows an ordered list.
(You can find more instances at the bottom of this page.) )
Unordered list
An unordered list is a list of items that are marked with a bold dot (typically a small black circle).
The unordered list starts with the <ul> tag. Each list item starts at <li>.
<ul><li>Coffee</li><li>Milk</li></ul>
The browser appears as follows:
Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
Ordered list
Similarly, a sequence table is a list of items that are marked with numbers.
The sequence list starts with the <ol> tag. Each list item starts with the <li> label.
<ol><li>Coffee</li><li>Milk</li></ol>
The browser appears as follows:
- Coffee
- Milk
Within a list item, you can use paragraphs, line breaks, pictures, links, and other lists, and so on.
Definition List
A custom list is not just a column of items, but a combination of items and their annotations.
The custom list starts with the <dl> tag. Each custom list item starts with <dt>. The definition of each custom list item starts with <dd>.
<dl><dt>coffee</dt><dd>black Hot drink</dd><dt>milk</dt><dd> White Cold drink</dd></dl>
The browser appears as follows:
-
Coffee
-
Black Hot Drink
-
Milk
White
-
cold Drink
You can use paragraphs, line breaks, pictures, links, and other lists inside a list item that defines a list, and so on.
More examples
-
Different types of unordered lists
-
This example shows an unordered list.
-
Different types of ordered lists
-
This example shows the different types of ordered lists.
-
Nested lists
-
This example shows how to nest a list.
-
Nested List 2
-
This example demonstrates a more complex nested list.
-
Definition List
-
This example shows a list of definitions.
List label
tag |
description |
<ol> |
defines a sequence table. |
<ul> |
defines an unordered list. |
<li> |
defines list items. |
<dl> |
Define a list of definitions. |
<dt> |
defines the project. |
<dd> |
defines a description of the definition. |
<dir> |
|
<menu> |
|