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:
- Liz
- Chris
- Joe
- 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. Liz
- 2. Chris
- 3. Joe
- 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.
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.
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
Nooooooooo! Oh, well – okay then. You can tell them about our UL/OL .. just don’t let them know about the secret handshake, eh?
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. 🙂
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! 🙂
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.
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!
Glad to be your memory. Keep those questions coming if you have them. Hope to see you tomorrow night . . . ? 🙂
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.
But your comment software stripped my BR tags 🙂
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. 🙂 🙂
I just put BR tags before the parenthesed stuff – it makes it drop down, just gives you a different looking list..
That’s what makes you a programmer and me a writer. I could have turned that sentence into an entire blog post. 🙂