HTML Lists
In HTML, there are three types of lists: unordered, ordered and description lists. Each of them is defined using different tags. Let’s have a look.
HTML Unordered Lists
We use unordered lists to group items having no numerical order. When changing the order of list items, the meaning will not change. To create an unordered list, we use the <ul> tag. This tag comes in pairs, the content is written between opening <ul> and closing <∕ul> tags.
Each element of an unordered list is declared inside the <li> tag.
Example of the HTML <ul> tag for creating an unordered list:
Result
The items in unordered lists are marked with bullets (small black circles) by default. However, the default bullet style for the list items can be changed using a type attribute.
The type attribute is used to change the default bullet style for the list items.
Example of the HTML <ul> tag for creating an unordered list, where the items are marked with bullets:
Result
HTML Ordered Lists
HTML ordered list is used for listing items that are marked with numbers. It starts with the <ol> tag. This tag comes in pairs, the content is written between opening <ul> and closing <∕ol> tags.
Each item in the ordered list starts with opening <li> tag and ends with <∕li> closing tag.
Example of the HTML <ol> tag for creating an ordered list:
Result
The items in the ordered list are marked with numbers by default. If you want to create ordered list with alphabet or Roman numbers, you just need to add type="a" or type="I" to the <ol> tag.
Example of the HTML <ol> tag for creating an ordered list with alphabet and Roman numbers:
Result
HTML Description Lists
HTML description list is used to arrange terms or names with a description the same way as they are arranged in a dictionary.
To create a description list, we use the <dl> tag. This tag comes in pairs.
In <dl>, we use <dt> tags for a term/name in a description list and <dd> for a description of a term/name in a description list.
Example of the HTML <dl> tag for creating a description list:
Result
HTML Nested Lists:
A nested list contains a list inside a list.
Example of an HTML nested list:
Result
List Counting Control
By default, the enumeration in an ordered list starts from 1. Use the start attribute to start counting from a specified number.
Example of an HTML list for counting from a specified number:
Result
Click Here to Donwload Background Images