Successful Blog

ul and ol — The Secret Life of HTML Lists

by 13 Comments

Things that Folks Don’t Tell Each Other

New Blogger Logo

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.

Print Friendly, PDF & Email

Comments

  1. Thank you for taking the time to put this up.

    I’ve found using Ecto saves me the trouble of having to handcode it but this is a good post to add to del.icio.us for those times when WYSIWYG isn’t available.

    Reply

  5. Thanks Liz – as a neophyte I had often wondered about this as I was hopelessly lost in my Blogger template. You are like that commercial that said “we do the work so you don’t have to” (what product was that for, BTW?). While we are at it, is there a secret to imbedding pictures (like your SOB symbol) I need to know too? Maybe HART will even let me know the secret handshake! 🙂

    Reply

  6. Hi Starbucker,
    Glad to help. You want to put the image in your sidebar. Is that right?

    You will need to host the image at where you hosted your picture. Then get the get the image file that looks like this Use

    [img src=”http:www.YOURIMAGE.jpg” ]

    Then put that in your side bar. To link it put the [a href=”http:successful-blog.com/”][img src= REST OF IMAGE.com] [/a]

    Sorry, it took so long. I ended up using [] instead of the greater than, less than signs because WordPress kept eating the code, even when I uncoded it.

    Reply

  9. You can combine lists with BR tags..

    First we do this(and this)
    Next we do that(but don’t forget..)

    For the more adventurous, lists can be affected by css styles also.

    Reply

  11. Hi Tony
    Yeah, you’re right about both. I wasn’t ready to tackle those yet. You want to write those posts for me? I’ll make a big deal out of them. 🙂 🙂

    Reply

Leave a Reply

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