Practical HTML for Bloggers - Lists

Now that you've learned all about HTML headings and HTML paragraphs, you're ready to move on to making lists! Today I'll show you how to add bullet-pointed lists and numbered lists to your blog posts with HTML.

It's true, you can make lists with the word processing features of a visual editor on most blogging platforms. But, I'm going to show you how to do it in HTML for three reasons (which I will present to you in an ordered list):

1. By the end of this tutorial series, I want you to be able to write entire blog posts in HTML with confidence.
2. You can make nested lists in HTML that are impossible to make in a visual editor.
3. I find it easier to edit HTML lists, while lists created in a visual editor can get messy in a rewrite.

Two Types of HTML Lists

The two most commonly used HTML list styles are: Unordered Lists and Ordered Lists.

An unordered list is a "bullet point" list, like this:

• Red
• Blue
• Yellow

An ordered list is a numbered list, like this:

1. Red
2. Blue
3. Yellow

Writing An Unordered List

An unordered list opens with a <ul> tag. UL stands for "unordered list".

The items in an unordered list are wrapped with <li> tags. LI stands for "list item". Makes sense, right?

So here's the very beginning of an unordered list:

<ul>
<li>Red</li>

Each additional item in the list gets wrapped in the <li></li> tags just like the first one, on and on until you've written the whole list. Once you've completed the list, close it with </ul>. This tells the browser that the list has ended and it's time to stop bulleting. Here's the markup of a completed unordered list:

<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>

Here's what that list will look like in the browser:

• Red
• Blue
• Yellow

Writing An Ordered List

The only markup difference between an unordered list and an ordered list is that an ordered list opens and closes with <ol> </ol> tags. OL stands for "Ordered List".

Here's the beginning of an ordered list:

<ol>
<li>Jump to the left.</li>

Each additional item in an ordered list gets wrapped in the <li></li> tags just like in an unordered list. Once you've completed the list, close it with </ol>. This tells the browser to stop numbering. Here's the markup of a completed ordered list:

<ol>
<li>Jump to the left.</li>
<li>Step to the right.</li>
<li>Put your hands on your hips.</li>
<li>Bring your knees in tight.</li>
<li>Pelvic thrust.</li>
<li>Do it again!</li>
</ol>

Now, here's how it looks in the browser:

1. Jump to the left.
2. Step to the right.
3. Put your hands on your hips.
4. Bring your knees in tight.
5. Pelvic thrust.
6. Do it again!

I just taught you how to do some HTML and the Time Warp. Multitasking!

Advanced List-Making

Now that you're familiar with how to make unordered and ordered lists, I'm going to show you how to combine them to make nested lists. This is handy for any list that has subtasks or multiple-choice steps/ingredients.

For this example I'm going to show you the finished list first, then the HTML markup.

1. Tulle
2. Your choice of:
   • ribbon
   • baker's twine
   • burlap sash
3. Washi tape
4. Hot glue
5. Glitter

See the sub-list of material choices? That's an unordered list nested inside our ordered list as a list item. Here's how I inserted the unordered list into the ordered list (I've highlighted the <li> and <ul> tags so you can see how that works):

<ol>
<li>Tulle</li>
<li>Your choice of:
<ul>
<li>ribbon</li>
<li>baker's twine</li>
<li>burlap sash</li>
</ul>
</li>
<li>Washi tape</li>
<li>Hot glue</li>
<li>Glitter</li>
</ol>

Make sure to close both the unordered list and the list item, otherwise the list will get all screwed up.

Editing HTML Lists

If you forgot an item or need to move things around in an HTML list, all you need to do is cut the list item you want to move, then paste it at the correct position in the list. Make sure you cut and paste the entire list item, including the starting <li> and the closing </li>. Isn't that tidy? No stray bullets, no extra numbers, just cut & paste!

What's Next?

Now you're ready to learn about strength, emphasis, bolding, and italicizing in Practical HTML for Bloggers - Strength and Emphasis

Title cards for this series designed by the dazzlingly wonderful Jenna from Little Bit Heart.