START A COURSE

The HTML and CSS Blog:

Learn HTML Lists: Ordered and Unordered

What you Learn in this HTML Lesson

html list tag example

By the end of this post, this will all be cake.

Learn how to create ordered lists (numbers) and unordered lists (bulleted) with HTML’s list tags. Learn to use attributes to control the start number, style of your numbered list, and the shape of your bullet.

This is the only topic so far that we’ve made two videos for. We’ll sprinkle screenshots throughout this post from our educational videos by Claude Parnell and Ben Laatsch. Ben’s take is a chilled out ukelele tune and Claude has put this HTML lesson to rap. So you can learn HTML during your workout or while you relax.

Lists: Ordered and Unordered

There is an <ol> tag, a <ul> tag too, an <li> tag for you to choose
What kind of list we need to type let’s sort it out let’s get it right

Bullets and Numbering

When you want bullets or numbering, think of it as a list: a bulleted list, or a numbered list. HTML defines bullets and numbering as different kinds of lists—there is no actual “bullet” tag. Numbered lists are called “ordered lists” because, hey, there’s an order. Bulleted lists are called unordered lists, because, you know, UTTER CHAOS AND DISORDER. OK, I hyperbolize but it’s pretty straightforward: these lists don’t have any particular order.

Claude Parnell has two different kinds of list tags to teach you

Which tag you wrap around your list items tags will determine the type of list.

Why Aren’t They Just Called Numbered Lists?

We HTML coders like to think we’re pretty rational in our naming conventions. So why don’t they just call them numbered lists? Because, fair reader, the tag for ordered lists includes all kinds of ordered lists, like Michael Jackson would say: A,B,C and I,II,II. Likewise, an unordered list need not be bullets, it could consist of stars, arrows, or checkmarks.

List Item Tag

 

List items as demonstrated in the List Tags music video

A list of things Ben picks up throughout the video.

We’ll wrap a list item tag around each item in the list, and then add another tag around the whole list to tell it which kind of list it is (ordered or unordered).

Let’s try an example to see how it works. I’d like to create a list of my favorite ice cream flavors.

I’ll start by wrapping the list item tag  <li>  around each ice cream in my list. It looks like this:

List Tags Are Container Tags

Notice the opening and closing pair of  <li>  list item tags. The list item tag is a container tag, so there is an opening  <li>  tag before each item, and a closing list item tag  </li>  at the end of each item. Closing tags have a slash before the tag name.

screenshot from Ben Laatsch's list tags song

A quick reminder from Ben: always close your tags

Unordered List Tag to Specify Bullets

unordered list tag image

Karma drew this with Pac Man for the brackets, as if he’s eating the bullets

In addition to the list item tag <li> , we need another tag around all the list items to declare what kind of list it is—a bulleted or numbered list. If you want a numbered list, then you are going to specify an “ordered list” using the  <ol>  tag. If the order of the list is not important, than you’ll use bullets. Therefore, use the unordered list tag  <ul>  for bullets, and use the ordered list tag <ol> when you want numbering. I think it’s interesting that you never need to type the bullet or numbers at all, just define the type of list and it will display bullets or numbering for you.

So, my bulleted list of ice cream flavors is an unordered list, and the HTML code looks like this:

The web browser will display it as a bulleted list like this:

  • chunkey monkey
  • cherry garcia
  • chubby hubby
  • rum raisin
  • green tea

Get Your List Tags in the Right Order!

first in last out animated gif

The phrase “first in, last out” may help you remember to close your tags in the right order.

As always, the nesting order of HTML tags is important. The list item tags surround each item in a list, and the ordered or unordered list tags surround all of the items. The <li> tag needs to be nested inside the <ol> or <ul> tags.

Ordered List Tag to Specify a Numbered List

ordered list tag animated gif

For sequenced lists like a-b-c or 1-2-3 use the ordered lists tag.

If you want numbering, simply use the ordered list tag <ol> around your list items. You will still surround each item in the list with <li> to open and </li> to close each list item, the only change is that you would surround all those <li>s with the tag for an ordered list instead.

Here’s an example of the HTML code for the ordered list:

Practice Creating Numbered and Bulleted Lists

snow ice cream

Don’t judge me; I have no regrets [image via Randen Penderson]

When I was a kid in Ohio we used to make snow ice cream if there was a good heavy snowfall.

Here’s a list of ingredients and step-by-step instructions using HTML list tags to create a bulleted (unordered) list and a numbered (ordered) list. I’m going to use an <h3> heading for the paragraph before each list.

 

 

 



 

Adding Attributes to List Tags

Change the Shape of the Bullet

You may want to change the shape of the bullets in your list. If you remember your HTML syntax then adding attributes to your HTML tags will seem easy. To review, here’s the basic pattern any time you need to add an attribute to a tag. The attribute is added to the first tag (the opening tag).

Recall that every attribute fits this structure:

tag attribute equals value

Don’t forget the basic syntax of HTML tags and their attributes

attribute=”value”

In this case the attribute we’ll specify is type, as in the type of bullet shape. We’ll change the bullet type to a square.

Notice there are no spaces between the attribute and value, and there is a space after the html tag name. Don’t forget the equal sign, and to put quotes around the value.

The  <ul>  tag supports the type attribute, with values of disc, circle, or square.

Change Your Numbered List to Letters or Roman Numerals

The  <ol>  tag (numbered lists) also supports using the type attribute, with values that indicate roman numerals or lettering.

For example, the following code would create lowercase roman numerals: <ol type=”i”>

<ol type=”I”>  An uppercase I indicates Roman numerals in uppercase.

<ol type=”a”>  indicates lettering, in lowercase.

<ol type=”A”>  indicates lettering, in uppercase.

Change Which Number Your Ordered List Starts On

You can also change the start number, such as a list that begins with step 6 in a process. Add the start attribute with the value you wish the list to start with.

We’ll make a short list for this kitty.

We’re going to begin with item four in the list, because this kitty has probably been back and forth on this topic for a while. The following code example is specifying a lettered list, that begins with step 4:

That would look like:

  1. Now you hang up
  2. No, you hang up

 

Code Summary:
List Tags for bullets and numbered lists
HTML Tag: Attributes:
<ol></ol>
ordered list (numbered list)
change style of numbering:
<ol type=”I”>
(“I” uppercase roman numerals)
values include:<ol type=”I”>
(“i” lowercase roman numerals)
<ol type =”a”>
(“a” lowercase lettering)<ol type=”I”>
(“I” uppercase roman numerals)<ol type=”A”>
(“A” uppercase lettering)
change start number:<ol start=”3″>
(specify start number)
<ul></ul>
unordered list (bulleted list)
Attributes:
change shape of bullet:
<ul type=”square”>
<ul type=”disc”>
<ul type=”circle”>
<li></li>
list item (surrounds each item in a list)
The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.

HTML Lessons

©2013 Diane Presler. All rights reserved.