HTML 101

By Scot Hacker, Lisa Pickoff-White
Published May 16, 2007 in Web Development

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 <ul> tag and look like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<ul>
<li>Unordered information</li>
<li>Ordered information</li>
<li>Definition lists</li>
</ul>

</body>
</html>

Unordered listOrdered lists use the <ol> tag and look like this:

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<ol>
<li>Unordered information</li>
<li>Ordered information</li>
<li>Definition lists</li>
</ol>

</body>
</html>

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

Ordered listNotice 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 <dl> tag defines the definition list.
  • The <dt> tag is used for the main phrase
  • The <dd> tag is for the definition itself (think "dd = Data Definition").

<html>
<head>
<title>My First HTML Page</title>
</head>
<body style="background-color: #F5F5DC;">

<dl>
<dt>This names an item</dt>
<dd>This defines the item</dd>

<dt>This names another item</dt>
<dd>This defines the other item</dd>

</dl>

</body>
</html>

Definition listsYou 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 <li>, start a whole new list instead, complete with <ol> or <ul> 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! 

<ul>
    <li>Unordered information </li>
    <li style="list-style: none">
        <ul>
            <li>Peas</li>
            <li>Carrots</li>
            <li style="list-style: none">
                <ol>
                    <li>You can even mix list types</li>
                    <li>When nesting lists</li>
                </ol>
            </li>
        </ul>
    </li>
    <li>More information</li>
</ul>

Nested lists

Add your comment

Login to post a comment.