Create Lists in HTML

When building a website, you or your client may want to create lists – either numbered or with bullet points, to organize content on the page. Lists create visually appealing text and information!

There are two main types of lists in HTML – unordered (bullet point) lists and ordered (numbered) lists. Building both types of lists is pretty similar, and we will learn how to create each one!

Let’s take a look at an ice cream themed webpage that has an example of each:

Ice Cream List

The first list, Ice Cream Flavors is an unordered list. The second list, My Top Three Favorite Ice Cream Flavors is an ordered list. Let’s learn about each – and how to build them!

Unordered Lists

Unordered lists are used to organize list items that do not need to be in a particular order. The prominent features of an unordered list are bullet points. You’ll see unordered lists commonly used in webpage sections such as:

  • Personal Skills
  • Product features
  • Fact sheets

To begin building an unordered list, you will want to create a list heading.

Note: To learn more about creating a header, check out my tutorial on headings 1-6!

Creating a List heading

Ice Cream Heading

In your text editor, you will want to use a heading tag to build your header. This will indicate to the user or reader what items your list will contain. In the example above, I’ve used an h1 tag to create the Ice Cream Flavors heading.

When rendered, the heading will look like this:

Now, it’s time to create an unordered list!

Creating an Unordered List

To start, you’ll want to create an opening unordered list tag (indicated by yellow arrow). This let’s your browser know that all items in this list will have bullet points.

<ul> = Unordered List Tag

All list items will go between the opening and closing unordered list tag, so add a closing tag a few lines below.

Now, let’s add some list items!

Adding List Items

To add list items, you’ll want to use an opening and closing List Item Tag, or <li>.

<li> = List Item Tag

With the unordered list tag as the parent, your list items will have bullet points as their line feature! Check it out below:

Customizing List Items

To customize your list item, the item or text you want to have as your list item will go between the opening and closing <li> tags.

In the example above, I’ve created five list items – Mint Chip, Chocolate Chip, Vanilla, Rocky Road and Coffee. Notice that each has an individual opening and closing <li> tag.

<li> Mint Chip </li>
<li> Chocolate Chip </li>
<li> Vanilla </li>
<li> Rocky Road </li>
<li> Coffee </li>

When previewed in your browser, your unordered list will look like this!

Next, let’s take a look at how to create ordered, or numbered lists!

Ordered Lists

Ordered Lists are used to organize list items that need to go in a specific order. The prominent feature of an ordered list is numbered items.

Common list types that use ordered lists are:

  1. Step-by-step instructions
  2. Recipes
  3. Ranked lists (i.e. Top 5…)

To begin building an ordered list, you’ll want to create a list header.

Creating a List Heading

Just as with the unordered list, create a heading to let the user know what will be the theme of the list. Here is what the heading for this ordered list will look like:

I’ve used an h1 tag to create the heading My Top Three Favorite Ice Cream Flavors. And when rendered, it will look like this:

Once you have a heading, it’s time to create an ordered list! Let’s learn how.

Creating an Ordered List

To start, you’ll want to create an opening ordered list tag (indicated by the yellow arrow).

<ol> = Ordered List Tag

All of your list items will go between the opening and closing <ol> tags, so leave a few lines between them.

With the ordered list, or <ol> tag as the parent element, each list item will be numbered. Let’s learn how to add them!

Adding List Items

Just like with the unordered list, you will use a List Item Tag, or <li> tag to create a list item.

Remember, to customize your list item, the item or text you want to have as your list item will go between the opening and closing <li> tags.

In the example above, I’ve listed my top three favorite ice cream flavors – Mint Chocolate Chip, Coffee and Chocolate Chip.

<li> Mint Chocolate Chip </li>
<li> Coffee </li>
<li> Chocolate Chip </li>

When rendered in a web browser, the list will look like this:


To sum up creating lists, the main difference is the types of tags you use to indicate the list type.

TL;DR

<ul> = Unordered List
<ol> = Ordered List
<li> = List Item

All this talk of ice cream has got me hungry! What’s your favorite type of ice cream?! Comment below!

Don’t forget to subscribe to Tech Talk Code to receive a monthly roundup of all of our top posts!

Leave a Comment!