HTML lists are used to present a list of information in a well-formed and systematic way.
The list is nothing but a record of information.
HTML list has 3 different types:
HTML Ordered List or Numbered List:
If you want to put all your items in a numbered list then you can use the HTML ordered list.
The ordered list is created by using <ol> tag. The list items start with <li> tag. In the ordered list, the numbering starts from one and is incremented by one for each successive list element.
The type Attribute for Ordered List:
You can use type attribute for <ol> tag to define the type of numbering you like. By default, it is a number.
Following are the type attributes for ordered list:
The list items will be numbered with numbers i.e default.
Uppercase Roman Numbers:
The list items will be numbered with uppercase roman numbers.
Lowercase Roman Numbers:
The list items will be numbered with lowercase roman numbers.
The list items will be numbered with uppercase alphabets.
The list items will be numbered with lowercase alphabets.
Unordered HTML List:
In HTML, unordered lists are the lists that do not have any form of numbering and it is also known as a bulleted list.
The unordered list is created by using <ul> tag and each item in the list is marked with a bullet.
You can use the CSS list-style-type property to specify the list item marker.
The type Attribute for Unordered List:
To represent different unordered lists, there are 4 types of attributes.
Following are the type attributes for unordered list:
This is the default style. The list items will be displayed with bullets.
The list items will be displayed with the circles.
The list items will be displayed with the squares.
In this style, the list items are not marked only items will be displayed.
In HTML the description list or definition list is a list of items with a description of each item.
The <dl>, <dt> and <dd> tags are used to create description list. In description list <dl> tag defines the description list, <dt> tag defines data term and <dd> tag defines data definition or description.
Nested HTML List:
A list inside another list is known as a nested list.
If you want a number list inside bullet list then you can use this type of list and is is called as nested lists.
The start Attribute:
The ordered list will start counting from 1 by default, if you want to start counting from a specific number, you can use the start attribute.
Creating Horizontal HTML List with CSS:
You can create a horizontal list in HTML, you just have to add display: inline property to make it horizontal.
Display: inline will display them horizontally and list-style-type: none will remove all bullets and numbers.
Most of the time horizontal lists are used to create a navigation menu.