Slacker's Guide to HTML: HTML Lists

Bulleted Lists

Bulleted lists are very useful. If you have a list of things or a table of contents (or even a shopping list!) you can use a bulleted list to enhance the way you display that information. Bulleted lists have two elements in them, and the role each element plays will make sense to you when you see how a bulleted list comes together with the use of just a few tags.

Here are the tags used in a bulleted list: <ul> is the opening tag for a bulleted list, <li> is the tag for a bullet to appear, and </ul> is the closing tag for the list.

Now I will show you a list and following that list will be the HTML used to make it.

Ate Food
Took Dump
Drank Beer

And here is the HTML for that list:

<ul>Things I Did Today
<li>Ate Food
<li>Took Dump
<li>Drank Beer
</ul>

You might have noticed that the ul tag indents things. That is nice to place the title of that list right after that ul tag.

Each of the tags has a specific meaning and function. The opening tag (ul), means "unordered list". The li tag means "list item" and it should be placed before each item in the list.

Numbered Lists

A numbered list is the exact same as a bulleted list except for the fact that numbers appear running down the left instead of bullets. Even the HTML is almost identical. Here is an example of a numbered list, and after that will be the HTML:

Download.com
Tucows.com
WikiPedia

And this is the source code for that list:

<ol>Websites that Rock
<li>Download.com
<li>Tucows.com
<li>Wikipedia
</ol>

OK. Pretty easy, huh? Now I'll quickly run through what the individual tags mean: ol means "ordered list" and li means list item".

Definition Lists

Definition lists are lists in which the text being "defined" is not indented, and the definition, or explanatin of that text, is indented. They can be used when listing links with explanations of descriptions of the links included. Or you can just make a list.

Webmonkey: A great site dedicated to providing a community and various resources to webmasters.
C|NET: An Internet technology resource site with news, downloads, product reviews, and more.

And here is the HTML for that list:

<dl>
<dt><a href="http://www.webmonkey.com">Webmonkey</a>
<dd>A great site dedicated to providing a community and various resources to webmasters.
<dt><a href="http://www.cnet.com">C|NET</a>
<dd>An Internet technology resource site with news, downloads, product reviews, and more. 
</dl>

Now I will explain what the different tags in that code stand for.

dl stands for "definition list" and is the opening tag, dt is the tag placed before the thing to be defined and it means "definition term", and dd is the tag placed before the "definition" and it means "definition data".

And that's it for definition lists.

In fact, that's it for the entire section on HTML lists.