html 101

Lists

Lists are an important way of organizing content. They're commonly used not just to set off displays of important information on your page, but also (when used in combination with CSS) to create navigation menus.

There are three types of lists: unordered, ordered, and definition. Unordered lists use the tag and look like this:

Unordered list

Ordered lists use the

tag and look like this:

Both types of lists use the tag to create the bullet or numbered points.

Ordered list

Notice that when you enter a new list item, the list re-numbering will be taken care of for you. Never hard-code numbered lists – let the HTML do it for you!

The final list type is a "definition list," which involves a main phrase, and then a definition for that phrase that appears indented and on a separate line.

The tag defines the definition list. The tag is used for the main phrase The tag is for the definition itself (think "dd = Data Definition").

Definition lists

You can also "nest" your lists. For extra credit, try this: Place your cursor anywhere you might insert a normal list item. But instead of inserting an

start a whole new list instead, complete with or containers. Notice how the nested list is rendered by the browser, with logical indentation reflecting the hierarchy you've created. This can be a very powerful tool!

Nested lists