HTML Lists
In HTML, lists are used to group related items together. There are three main types of lists:
- Ordered Lists
- Unordered Lists
- Description Lists
Ordered Lists
An ordered list is a list of items that are numbered. Each item in the list is preceded by a number or letter.
- First item
- Second item
- Third item
Unordered Lists
An unordered list is a list of items that are bulleted. Each item in the list is preceded by a bullet point.
- First item
- Second item
- Third item
List Style Type
We can change the list item marker using the
list-style-type property in CSS.
- Disc
- Circle
- Square
- None
Nested Lists
We can nest lists by placing one list inside another list item.
-
First item
- Nested first item
- Nested second item
- Second item
- Third item
Description Lists
A description list is a list of terms and their descriptions. Each term is followed by a description.
- HTML
- - HyperText Markup Language
- CSS
- - Cascading Style Sheets
- JS
- - JavaScript
Horizontal Lists
We can display list items horizontally by using the
display: flex property in CSS.
NOTE: This works because by default, flex items are displayed inline. If we instead desired a vertical direction for the flex layout, we can use the flex-direction property to set it to column.