Successful Blog

  • Home
  • Community
  • About
  • Author Guidelines
  • Liz’s Book
  • Stay Tuned

ul and ol — The Secret Life of HTML Lists

July 10, 2006 by Liz 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

Filed Under: Blog Basics, Successful Blog, Tech/Stats, Tools Tagged With: bc, coding, new-bloggers, ordered-lists, unordered-lists

Comments

  1. jon says

    July 10, 2006 at 4:21 PM

    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
  2. ME Strauss says

    July 10, 2006 at 4:27 PM

    You’re more than welcome, Jon.
    Thanks for letting me know that you could use it.

    Let me know if there are other things you need.

    lizsun2@gmail.com

    Reply
  3. HART (1-800-HART) says

    July 10, 2006 at 6:53 PM

    Nooooooooo! Oh, well – okay then. You can tell them about our UL/OL .. just don’t let them know about the secret handshake, eh?

    Reply
  4. ME Strauss says

    July 10, 2006 at 6:55 PM

    Oh HART!
    I worked too hard to get to know the secret handshake. I’m not giving that one away without much coersion and money. 🙂

    Reply
  5. Starbucker says

    July 10, 2006 at 7:10 PM

    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. ME Strauss says

    July 10, 2006 at 7:40 PM

    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
  7. Starbucker says

    July 10, 2006 at 10:23 PM

    Got it. I managed to get your SOB on my sidebar a week or two ago, but I’d be darned if I remembered how I did it. Now I do – thanks!

    Reply
  8. ME Strauss says

    July 10, 2006 at 10:25 PM

    Glad to be your memory. Keep those questions coming if you have them. Hope to see you tomorrow night . . . ? 🙂

    Reply
  9. Tony Lawrence says

    July 11, 2006 at 8:21 AM

    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
  10. Tony Lawrence says

    July 11, 2006 at 8:22 AM

    But your comment software stripped my BR tags 🙂

    Reply
  11. ME Strauss says

    July 11, 2006 at 8:23 AM

    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
  12. Tony Lawrence says

    July 11, 2006 at 9:04 AM

    I just put BR tags before the parenthesed stuff – it makes it drop down, just gives you a different looking list..

    Reply
  13. ME Strauss says

    July 11, 2006 at 9:06 AM

    That’s what makes you a programmer and me a writer. I could have turned that sentence into an entire blog post. 🙂

    Reply

Leave a Reply Cancel reply

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

Recently Updated Posts

6 Keys to Managing Your Remote Workforce

9 Reasons To Use WordPress

Useful Marketing Tools That Wont Bust Your Budget

Do You Have What It Takes To Be A Successful Blogger?

Do You Have What It Takes To Be A Successful Blogger?

6 Tips for the Serial Side Hustler

How to Make Your Blog Popular



From Liz Strauss & GeniusShared Press

  • What IS an SOB?!
  • SOB A-Z Directory
  • Letting Liz Be

© 2023 ME Strauss & GeniusShared