Lists in HTML

There are two types of lists offered by HTML which we can use in or documents. These are ordered lists and unordered lists. Let's have a look at both of these list types in this article.

Ordered Lists

Ordered Lists in HTML are lists in which list items are identified through some numbers or chronological identifiers. However, it is less often that these kinds of lists are used in HTML documents. Let's have a look at the example of how can we create ordered lists in HTML.

1<ol>
2  <li>List item 1</li>
3  <li>List item 2</li>
4  <li>List item 3</li>
5  <li>List item 4</li>
6</ol>
7

That is the syntax for ordered lists in HTML. We start the opening tag, the name of which is ol and inside that ol element, we need to put our list items using li tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

1<ol>
2  <li>List item 1</li>
3  <li>List item 2</li>
4  <ol>
5    <li>List item 3</li>
6    <li>List item 4</li>
7  </ol>
8</ol>
9

The ordered lists, while these can be completely styled as we want with CSS, comes some attributes which add to their functionality. These properties are listed below:

• reversed - This property will set the numbering the list in the descending order. This will not actually change the order each of the list item in descending order but only their numbering is changed.
• start - This property will let us define the starting point of the numbering of our list. Let's have a look at the below example which will start from 10.

1<ol start="10">
2  <li>Item 1</li>
3  <li>Item 2</li>
4  <li>Item 3</li>
5</ol>
6

• type - This property will let us decide the type of identifier we want to use in numbering our list items. Let's have a look at below examples:

1<!-- This is the default case -->
2
3<ol type="1">
4  <li>Item 1</li>
5  <li>Item 2</li>
6  <li>Item 3</li>
7</ol>
8
9<!-- List item numbers will be lowercase characters -->
10
11<ol type="a">
12  <li>Item 1</li>
13  <li>Item 2</li>
14  <li>Item 3</li>
15</ol>
16
17<!-- List item numbers will be uppercase characters -->
18
19<ol type="A">
20  <li>Item 1</li>
21  <li>Item 2</li>
22  <li>Item 3</li>
23</ol>
24
25<!-- List item numbers will be lowercase Roman numbers -->
26
27<ol type="i">
28  <li>Item 1</li>
29  <li>Item 2</li>
30  <li>Item 3</li>
31</ol>
32
33<!-- List item numbers will be uppercase Roman numbers -->
34
35<ol type="I">
36  <li>Item 1</li>
37  <li>Item 2</li>
38  <li>Item 3</li>
39</ol>
40

Unordered Lists

Unordered Lists in HTML are lists in which list items are identified through some identifiers but these do not depict chronological format of the item. These are commonly used in various websites for various purposes such as for listing blog posts or for creating navigation or for just presenting data in the form of a list.

1<ul>
2  <li>List item 1</li>
3  <li>List item 2</li>
4  <li>List item 3</li>
5  <li>List item 4</li>
6</ul>
7

That is the syntax for unordered lists in HTML. We start the opening tag, the name of which is ul and inside that ul element, we need to put our list items using li tags.

We can still move further and nest another list inside another. We can have as many nesting as the content demands. Let's have a look the below example for nested list.

1<ul>
2  <li>List item 1</li>
3  <li>List item 2</li>
4  <ul>
5    <li>List item 3</li>
6    <li>List item 4</li>
7  </ul>
8</ul>
9

Though there are some attributes provided by HTML, it is always recommended to use CSS for styling these.

Conclusion

The key take away from this article are as follows:

• There are two kinds lists that can be used in HTML i.e. ordered lists and unordered lists.
• In order to create a list, each list item should be nested inside the respective list tags.
• Styling of all forms of lists should be done using CSS.