HTML
Hard
30 mins
250 points
What you need:
  • Computer/laptop

HTML Lists

Lists are a useful way to display a group of items in a list. This lesson goes through how we can code them in HTML.

1 - Introduction

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

2 - Ordered Lists

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.

 

3 - Different types of ordered lists

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:

  • 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.

4 - Unordered Lists

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).

5 - Different types of unordered lists

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.

Join our club 😃

To view the remaining 2 steps and access hundreds of other coding projects please login or create an account.

Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.
Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more