Lists

In this lesson you will learn

• how
• to
• make

1. lists
2. like
3. this.

They are a little harder than a line break or a horizontal line, but they're not extremely difficult. To start a unordered list (the one with bullets), you must declare your opening tag. This tag is fairly simple.

<ul>

"Ul", as you may have assumed, stands for unordered list. Now that you have stated that the following items are in an unordered list, you need to declare the items in the list.

<li>This is a list item.</li>

That's simple enough. "Li" stands for "list item". Now, all we have to do is close the list.

</ul>

Note that if you don't close the list, everything below your opening tag will be in a list. It is important to always close your tags.

<ul>
<li>This is a list item.</li>
</ul>

That was easy. Now our finished product looks like this:

• This is a list item.

An ordered list is the exact same thing except that instead of bullets, numbers are placed before your list item.

<ol>
<li>This is also a list item.</li>
</ol>

1. This is also a list item.

Nesting tags is putting tags inside others. Nesting takes on a whole new meaning for ordered and unordered lists.

1. This is a numbered list item.
• This is an unordered list item.
1. This is another numbered list item.
• This is another unordered list item.

Yikes! What's going on there? This is an extreme case of nesting. Let's have a simpler example.

1. This is a numbered list item.
• This is an unordered list item.

This is not complicated. All you have to do is put the tags like the following:

<ol>
<li>This is a numbered list item.</li>
<ul>
<li>This is an unordered list item.</li>
</ul>
</ol>

Notice how the unordered list starts after the list item has been closed, but before the ordered list has been closed. This placement is important.

This is the code for the largely complicated bunch of nested lists above.

<ol>
<li>This is a numbered list item.</li>
<ul>
<li>This is an unordered list item.</li>
<ol>
<li>This is another numbered list item.</li>
<ul>
<li>This is another unordered list item.</li>
</ul>
</ol>
</ul>
</ol>

Once you learn something it isn't so hard, is it? That's about all for this lesson. The next lesson will focus on special characters, like >, <, ©, ®, ™, &,  (space), and others.