Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to HTML and CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

HTML Lists

2:32 with Treasure Porth

You will learn how to create a list in HTML. Lists are a clean and useful way to organize information and, paired with anchor tags, to create navigation menus.

While we've learnt that <p> tags are great for defining sections of text on the page as paragraphs, HTML offers us additional flexibility to arrange content in numbered or dot point lists.

There are two common types of list tags that you will use within your HTML files:

  • <ul></ul> - Unordered list. For listing things that do not need to be in any specific order.
  • <ol></ol> - Ordered list. A list that is automatically numbered.

The names of these two tags is what defines how the items within the list will be presented, but the items themselves will always be defined in the same way:

  • <li></li> - List item. The individual dot points or numbered items that appear within the list.

When we define a list type with either <ul></ul> or <ol></ol>, we then place all of our list items within them. 

<h1>My favourite technologies: </h1>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Would appear in the browser as:

My favourite technologies:

  • HTML
  • CSS
  • JavaScript

Try experimenting with these in your own HTML files to see how they work!

Further Reading:

An HTML element you'll probably use a lot is lists. 0:00
An HTML list is simply a list of items numbered or unnumbered. 0:03
Lists are used in a variety of ways. 0:07
We can see a couple of examples on the profile page. 0:09
There are currently two lists on this page, 0:11
the main navigation and this list of skills. 0:14
Both of these lists are being styled with CSS, so 0:19
that they line up horizontally, rather than vertically. 0:21
Let's convert this background information here into a list, so 0:24
that we can see what a list looks like by default. 0:27
So let's go to index.html, and first, 0:32
I'm going to delete these two paragraphs that we created in previous videos. 0:36
You can create a list with one of two tags, ul or ol. 0:41
ul stands for unordered list, and ol stands for ordered list. 0:46
To start, put an ol around the paragraphs. 0:50
To separate the items in a list, you need to nest another tag inside ol, 1:00
an li tag which stands for list item. 1:06
I'll replace these paragraph tags with li tags and 1:09
make each sentence its own list item. 1:12
And we'll indent these list items because they're nested inside of the ordered list. 1:34
And just for fun, let's add a fourth list item. 1:40
I'll just say, Fourth list item. 1:46
Let's save, refresh, and take a look. 1:53
And as you can see, by default, this HTML structure gives us a numbered list. 1:55
A ul, or unordered list, is the type of list you'd use for 2:00
items that don't have or need to be in any specific order. 2:04
Go back to index.html and change ol to ul and see what happens. 2:07
The numbered list becomes a bulleted list. 2:18
Now that you know how to structure web pages and work with some common 2:21
HTML elements, let's learn how to make these elements look fantastic. 2:25
In the next part of the course, cascading style sheets. 2:29

You need to sign up for Treehouse in order to download course files.

Sign up