Coding: XHTML: List Tags
Whether you want to create an unordered list or ordered list, there are tags to help you with the formatting.
Unordered Lists
Unordered lists are what you usually think of as bullet lists. The default is a bullet, but you can indicate the type as a disc, circle, or square also. You begin with the <ul> tag and end with the </ul> tag. You use <li> and </li> for each item in the list.
If you want to change the type of dingbat or symbol use type and the particular symbol such as type="circle" between the start and end tag of the item.
You can also choose where to start such as <ol start="10">
You can also force a particular item to have a specific value such as <li value="3">
A fun thing to try is customized icons. For this, you need to indicate the graphic you wish to use instead of the bullet symbol. This can be set in your style sheet.
Practice an unordered list at TryIt Editor.
Example
<ul>
<li type="square">Content Aspects</li>
<li type="square">Design Aspects</li>
<li type="square">Technical Aspects</li>
</ul>
Result
- Content Aspects
- Design Aspects
- Technical Aspects
Ordered Lists
Ordered lists are usually numbers, but you can also choose to count with letters. You begin with the <ol> tag and end with the </ol> tag. You use <li> and </li> for each item in the list.
If you want to change the type of number/letter system use type and the particular symbol such as type="A" between the start and end tag of the item.
Practice an ordered list at TryIt Editor.
Example
<ol>
<li type="A"> First item </li>
<li type="A"> Second item </li>
<li type="A"> Third item </li>
</ol>
Result
- First item
- Second item
- Third item
Definition Lists
Definition lists help with indentation. You begin with the <dl> tag and end with the </dl> tag.
You use <dt> and </dt> for first item or term item. Use <dd> and </dd> for the definition or indented item. Many people use these when creating web lists and pathfinders.
Practice an definition list at TryIt Editor.
Example
<dl>
<dt> Frogs </dt>
<dd> A frog is a cute, little green critter. </dd>
</dl>
Result
- Frogs
- A frog is a cute, little green critter.
Nested Lists
Nested lists are simply lists inside lists. The "nests" are indented.
Practice a nested list at TryIt Editor.
Example
<ul>
<li>Ice Cream</li>
<li>Chocolate
<ul>
<li>Chocolate Chip</li>
<li>White Chocolate</li>
</ul>
</li>
<li>Vanilla</li>
</ul>
Result
- Ice Cream
- Chocolate
- Chocolate Chip
- White Chocolate
- Chocolate Chip
- Vanilla
| Unordered List | <ul> </ul> | type="disc/circle/square" |
| Ordered List | <ol> </ol> | type="I/A/1/a/i" start="value to start counting" |
| List Item | <li> </li> | type=all ul and ol options |
| Definition List | <dl> </dl> | |
| Definition List Item | <dt> </dt> | |
| Definition List Definition | <dd> </dd> |
Try It!
Create a list of topics. Then, try making an ordered or unordered list. Remember to include the start and end tags for the list. If you can't think of a topic to try, consider a list of foods (healthy and unhealthy), destinations (US, Europe, Elsewhere), or television programs (by category).
Your Document
Your document should now look something like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Annette Lamb's Personal Page</title>
<meta name="author" content="Annette Lamb" />
<meta name="keywords" content="pet, dog, puppy, cat, kitten, fish" />
<meta name="description" content="Choosing a pet." />
<meta name="copyright" content="© 2007 Annette Lamb" />
</head>
<body>
<h1>Choosing A Pet</h1>
<p>Before you choose a pet, it's a good idea to explore the possibilities. Are you ready for the responsibility of a pet? Read the book <b>Pets for Kids</b>.</p>
<p>The most popular pets are:</p>
<ul>
<li type="square">Dog</li>
<li type="square">Cat</li>
<li type="square">Fish</li>
</ul>
</body>
</html>
Learn More
Learn more about lists at w3schools including the <ul> tag, <li> tag, <ol> tag, <dl> tag, <dd> tag, and <dt> tag.