Creating Lists in HTML: Ordered, Unordered, and Definition Lists

Next up - lists in HTML! They might seem boring, but lists can’t be ignored when you want to organize content. They’re used for navigation menus, table of contents, sets of instructions and so on. Let’s quickly see the types of lists available for us to use.

Unordered Lists

You can reach out for unordered lists when you want to display a bunch of items in no particular order. This list can be created using a <ul> tag, while each list item inside needs to be wrapped within <li> tags.

You’ll see this on the browser.

The default bullet style for each item is a disc. We’ll learn how to change this or remove it or actually make it look like a navigation menu using CSS later.

Ordered Lists

You can use ordered lists when you need numbering or alphabets for a list. This is the same as an unordered list where each list item is wrapped within <li> tags, but the list itself is wrapped in <ol> tags.

This is what we get:

As you can see, the default marker is numbers. This can easily be changed using a type attribute. Remember we spoke about attributes - additional information that you can attach to an element?

The lowercase a value for the type attribute changes the list marker to lowercase alphabets. So now we have this:

There are 5 values in total for this type attribute - 1, A, a, I and i. Try each one out and see for yourself.

Description Lists

Description lists are less commonly used but are useful for displaying terms and their descriptions - like a glossary. You need three different types of tags for this type of list. The <dl> tag for the whole list - is similar to <ul> or <ol>. And then <dt> for the term and <dl> for its definition.

Here’s what this looks like:

It doesn’t look all that great, but with CSS, this kind of list can be made even more readable.

Nesting lists

One of your list items could be a list in itself. It’s possible to nest lists within one another. The multi-level navigation menu is an example of this:

There it is. You now know how to create ordered, unordered, and description lists in HTML. Play around with these tags, create your own lists and watch your content become more organized and easily read.