In HTML, a list is a way to display a group of related items in an ordered or unordered format.
Lists are commonly used to create menus, navigation bars, and other types of content where a group of related items need to be presented in a structured way.
HTML provides three types of lists
- Ordered List
- Unordered List
- Definition List
Lets see each list one by one with suitable example.
Ordered List
An ordered list is a list where the items are numbered or lettered.
The order of the items is important, and they are displayed in the order in which they are written in the HTML code. The syntax for creating an ordered list is:
Syntax
1 2 3 4 5 | <ul> <li>Element1</li> <li>Element2</li> <li>Element n</li> </ul> |
We can use type attribute to show list number type.
- <ol type=”1″ value=”1″> list start with number 1 and its type is numberic
- <ol type=”1″ value=”5″> list start with number 5 and its type is numberic
- <ol type=”A”> list start with capital letter A
- <ol type=”A” value=”3″> list start with capital letter C
- <ol type=”a”> list will start with small letter a
- <ol type=”I”> list will start with capital roman letter
- <ol type=”i”> list will start with small roman letter
Example:
1 2 3 4 5 6 7 8 9 | <h1>Top 5 Topper of the class</h1> <ol> <li>Ram</li> <li>Mohan</li> <li>Ramesh</li> <li>Nitesh</li> <li>Nita</li> <li>Manish</li> </ol> |
Unordered List
An unordered list is a list where the items are marked with bullets or other symbols. The order of the items is not important, and they are displayed in the order in which they are written in the HTML code. The syntax for creating an unordered list is:
1 2 3 4 5 | <ol> <li>Element1</li> <li>Element2</li> <li>Element n</li> </ol> |
You can use type attributes for showing different list market types.
like <li type=”disc”>, <li type=”circle”> or <li type=”square”>
Example:
1 2 3 4 5 6 7 8 9 | <h1>List of Computer Items</h1> <ul> <li>Monitor</li> <li>CPU</li> <li>Keyboard</li> <li>Mouse</li> <li>Printer</li> <li>Projector</li> </ul> |
Definition List
A definition list is a list where each item consists of a term and a definition.
The term is usually displayed in the bold or emphasized text, and the definition is displayed after it. The syntax for creating a definition list is:
1 2 3 4 5 6 7 8 9 | <h1>Definition List</h1> <dl> <dt>Term 1</dt> <dd>Definition 1</dd> <dt>Term 2</dt> <dd>Definition 2</dd> <dt>Term 3</dt> <dd>Definition 3</dd> </dl> |
Example of Definition list is
1 2 3 4 5 6 7 | <h1>Definition List</h1> <dl> <dt>Keyboard</dt> <dd>An input device</dd> <dt>Monitor</dt> <dd>An output device</dd> </dl> |
We can also use a nested list means list inside another list of any kind.