HTML provides three methods for defining lists: ordered lists, unordered lists, and description lists. Ordered lists utilize ordinal sequences to signify the order of list items, unordered lists employ symbols like bullets to present items in no specific order, and description lists use indentation to display items alongside their descriptions. This topic elucidates the utilization and amalgamation of these list types within HTML markup.
Ordered List:
You can create an ordered list using the <ol> tag, and each list item can be defined with the <li> tag, as demonstrated below:
<ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>
This code will generate a numbered list, which is the default style:
- Item 1
- Item 2
- Item 3
Manual Number Manipulation:
There are several ways to manipulate the numbering of list items in an ordered list. One method is to specify a starting number using the start attribute. The list will commence at this specified number and continue incrementing by one as usual.
<ol start="3"> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> </ol>
This will result in a numbered list, starting from the defined number:
- Item 1
- Item 2
- Item 3
You can also explicitly assign a particular number to a specific list item. Subsequent list items after one with a specified value will continue counting from that item’s value, disregarding the numbering of the parent list.
<li value="3"></li>
It’s important to note that by using the value attribute directly on a list item, you can reset an ordered list’s numbering system by starting the numbering from a lower value. For instance, if the parent list had reached value 6 and encountered a list item at value 3, that item would display as 1 and resume counting from that point onward.
ol start="3"> <li> Item 1</li> <li> Item 2</li> <li value="1"> Item 3</li> <li> Item 3</li> <li> Item 3</li> <li> Item 3</li> </ol>
In the example above, the list follows the sequence 3,4,1,2,3,4– restarting from a lower number than before and duplicating the number 6 in the list.
Note: The start and value attributes only accept numerical values, even if the ordered list is configured to display Roman numerals or letters.
Version ≥ 5: You can reverse the numbering by adding reversed in your <ol> element:
<ol reversed> <li> Item 1</li> <li> Item 2</li> <li value="1"> Item 3</li> <li> Item 3</li> <li> Item 3</li> <li> Item 3</li> </ol>
Reverse numbering is useful for lists where new items are continuously added, such as podcast episodes or presentations, and you want the most recent items to appear first.
Changing the Numeral Type:
You can easily alter the type of numeral displayed in the list item marker by using the type attribute:
<ol type="1|a|A|i|I">
Here are the descriptions and examples of different types:
| Type | Description | Example |
|---|---|---|
| 1 | Default | 1,2,3,4 |
| a | Alphabetical (lowercase) | a,b,c,d |
| A | Alphabetical (Uppercase) | A.B.C.D |
| i | Roman Numerals (Lowercase) | i, ii, iii, iv |
| I | Roman Numerals (Uppercase) | I, II, III, IV |
You should use <ol> to display a list of items where intentional ordering is emphasized. If changing the order of the items does not affect the correctness of the list, you should use <ul>.
Unordered List:
You can create an unordered list using the <ul> tag, and each list item can be defined with the <li> tag, as illustrated below:
<ul> <li> Item 1</li> <li> Item 2</li> <li> Item 3</li> </ul>
This code will generate a bulleted list, which is the default style:
- Item 1
- Item 2
- Item 3
You should utilize <ul> to display a list of items where the order is not significant. If changing the order of the items would render the list incorrect, you should opt for <ol>.
Nested Lists:
You have the flexibility to nest lists to depict sub-items within a list item. For example:
<ul> <li> Item 1</li> <li> Item 2</li> <li> Item 3 <ul> Item 3.1</ul> <ul> Item 3.2</ul> </li> <li> Item 4</li> </ul>
This markup will render as:
- Item 1
- Item 2
- Item 3
- Item 3.1
- Item 3.2
- Item 4
It’s important to note that the nested list must be a descendant of the <li> element.
Additionally, you can nest different types of lists. For instance:
<ol> <li> Item 1</li> <li> Item 2</li> <li> Item 3 <ul> Item 3.1</ul> <ul> Item 3.2</ul> </li> <li> Item 4</li> </ol>
Description list
You can utilize the <dl> element to create a description list, formerly known as a definition list prior to HTML5. It comprises name-value pairs, where the name is specified within the <dl> element, and the corresponding value is provided within the <dd> element.
<dl> <dt>Name Of Item 1</dt> <dd>value for Item 1</dd> <dt>Name Of Item 1</dt> <dd>value for Item 2</dd> </dl>
Here’s an example of a name-value group with multiple names and/or values:
dl> <dt>Name Of Item 1</dt> <dt>Name Of Item 2</dt> <dd>value for Item 1 and Item 2</dd> <dt>Name Of Item 3</dt> <dd>value for Item 3</dd> <dd>value for Item 3</dd> </dl>
This arrangement allows for clear delineation and presentation of associated name-value pairs.