How To Make A Simple List

In This Tutorial, I Show You How To Make A List For Your Web Page

Maybe you’ve heard that people don’t read web pages, they scan them. Because of this, lists are very practical . You see them all over the web. Sometimes you may not even realize that the text you are looking at is a list.

With HTML, there are three kinds of lists. I’m tackling unordered and ordered lists here because they’re so similar. (The third kind is a definition list used mostly for glossaries).

An unordered list is a list where the order of the items doe not matter. Like this:

  • New York
  • Albany
  • Buffalo

Let’s Break This Down

The HTML for this list uses two tags, ul and li. The ul stands for “unordered” and the li means “list item.” It could not be more straightforward.

To start the list , I use the <ul> tag and, as you’ll see, the entire list ends with </ul>. I use <li> and </li> to enclose each list item (such as New York).

Like this:

Code View

New York</li>

Here’s how that simple, unordered list looks in your browser:

Browser View

  • New York
  • Albany
  • Buffalo

Go Ahead, Try It Yourself

Copy and paste the above list code in the box below or feel free to write your own code. Then click the "GIVE IT A TRY" box and check it out.

Test Your Code In This Box – The Code Tester

Here’s What You Did

What About Making An Ordered List

Oh yeah. I almost forgot.

Suppose I wanted to list the first five U.S. Presidents. Here’s the HTML for an ordered list.

Code View

George Washington</li>
John Adams</li>
Thomas Jefferson</li>
James Madison</li>
James Monroe</li>

Looks the same as an unordered list, but this time I used <ol> – ordered list – instead of <ul> as I did in the previous example.

Browser View

  1. George Washington
  2. John Adams
  3. Thomas Jefferson
  4. James Madison
  5. James Monroe

In this example, it’s the <ol> tag which creates the numbers 1 – 5. It saves me from having to type in the numbers, plus it’s the right way to do a list whose items have an order that is relevant.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials