HTML lists are used to display a group of related items in a list. There are two types of HTML lists:

Ordered Lists (that put a number before each item in the list)

1. First item
2. Second item
3. Third item
4. Fourth item
5. And so on

Unordered Lists (that put a bullet point before each item in the list)

• First item
• Second item
• Third item
• Fourth item
• And so on

Ordered lists display a number (or even letters like a, b, c etc.) in front of each item in the list.

To code ordered lists in HTML we use the <ol></ol> (ordered list) tag. This tells the web browser that we want to display an ordered list and then we put a <li></li> (list item) tag inside the <ol></ol> tag for each item that we want to display.

Whatever content we want to display for the list item we put inside the <li></li> tag.

The following HTML code creates an ordered list for the top 5 largest lakes in the world.

By default ordered lists will display numbers for the items but we can include a type attribute inside the <ol> tag that we can use to specify what type of numbering to use for the list.

We can specify the following numbering type for ordered lists:

• a for lowercase letters.
• A for uppercase letters.
• i for lowercase Roman numerals.
• I for lowercase Roman numerals.
• 1 for numbers (default).

Try changing the type of the following ordered list and then click 'Run Code' to see how it affects the numbering.

Unordered lists display a bullet point in front of each item in the list.

To code unordered lists in HTML we use the <ul></ul> (unordered list) tag. This tells the web browser that we want to display an unordered list and then we put a <li></li> (list item) tag inside the <ul></ul> tag for each item that we want to display.

Whatever content we want to display for the list item we put inside the <li></li> tag.

The following HTML code creates an unordered list for the top 5 fastest production cars in the world (by acceleration).

By default unordered lists will display a disc bullet point for the items but we can include a type attribute inside the <ul> tag that we can use to specify what type of bullet point to use for the list.

We can specify the following bullet points type for unordered lists:

• circle for circle bullet points.
• disc for disc bullet points (default).
• square for square bullet points.

Try changing the type of the following unordered list and then click 'Run Code' to see how it affects the bullet points.