Multimedia and Technology Training At the UC Berkeley Graduate School of Journalism
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>
Ordered 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.
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.
<dl> tag defines the definition list. <dt> tag is used for the main phrase <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>
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 <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>
Comments? Contact us | ©2007-2009 The Regents of the University of California.
Add your comment
Login to post a comment.