Successful Blog

ul and ol — The Secret Life of HTML Lists

by

Things that Folks Don’t Tell Each Other

When I learn things, I pay attention to the things that folks don’t tell each other. They are usually obvious little details that people who know them don’t even think about. When they appear they can be a total surprise, or hard to look up, or interrupt when I’m in the middle of things.

I remember clearly the first time I wanted to make a numbered list in HTML. I didn’t have a clue how to do it. I knew it had something to do with those two tags — ul and ol, but that was as far as my knowledge went.

Now I know and if you don’t, I am going to reveal the dirty details, the secret life of making lists in HTML.

The Secret Life of HTML Lists

I started out confused. What’s new about that? Since the ul tag is used for link lists, I made the wrong assumption that the L stood for links. Sometimes I’m too quick to think I know things. Here’s what the tags really stand for.

<ul></ul> tags an unordered list.
<ol></ol> tags an ordered list.

That little piece of information helped a lot once I found it, and here are the details of the secret life of HTML Lists.

Do this:
<ul>
Liz
Chris
Joe
Mark
</ul>

and you will get this:

    Liz
    Chris
    Joe
    Mark

Do this:
<ul>
<li>Liz</li>
<li>Chris</li&t
<li>Joe</li>
<li>Mark</li>
</ul>

and you will get this:

  • Liz
  • Chris
  • Joe
  • Mark

Do this:
<ol>
Liz
Chris
Joe
Mark
</ol>

and you will get this:

    Liz
    Chris
    Joe
    Mark

Do this:
<ol>
1. Liz
2. Chris
3. Joe
4. Mark
</ol>

and you will get this:

    1. Liz
    2. Chris
    3. Joe
    4. Mark

Do this:
<ol>
<li>Liz</li>
<li>Chris</li>
<li>Joe</li>
<li>Mark</li>
</ol>

and you will get this:

  1. Liz
  2. Chris
  3. Joe
  4. Mark

Do this:
<ol>
<li>1. Liz</li>
<li>2. Chris</li>
<li>3. Joe</li>
<li>4. Mark</li>
</ol>

and you will get this:

  1. 1. Liz
  2. 2. Chris
  3. 3. Joe
  4. 4. Mark

Do this:
<ul>
<li>1. Liz</li>
<li>2. Chris</li>
<li>3. Joe</li>
<li>4. Mark</li>
</ul>

and you will get this:

  • 1. Liz
  • 2. Chris
  • 3. Joe
  • 4. Mark

There you have it. Every permutation of ul and ol that I could think of and what you get when you code them.

C’mon It’s Your Turn

Your Turn. If you have similar niggly little questions, or even big ones, please send them on over to me. I’m betting that I had them before you did and that there are other folks who have them too. I’ll be happy to write them up like this one so that everyone can see exactly how the code works, and if I don’t know, then we’ll all find out together.

It’s not hard to start telling each other.

–ME “Liz” Strauss

Related articles
See the articles, especially the How to Code Links series on the NEW BLOGGER PAGE.