The Three Types of HTML Lists | Sams Teach Yourself HTML and CSS in 24 Hours (7th Edition)

It's often useful to present information on a web page as a list of items. There are three basic types of HTML lists. All three are shown in Figure 5.2, and Listing 5.2 reveals the HTML to construct them:

The numbered list is called an ordered list. It begins with the <ol> tag and ends with a closing </ol> tag. Numbers and line breaks appear automatically at each <li> tag, and the entire list is indented.
The bulleted list is called an unordered list. It opens with the <ul> tag and closes with </ul>. It looks just like an ordered list, except that bullets appear at each <li> tag instead of numbers. The "li" in the <li> tag stands for "list item."
The list of terms and their meanings is called a definition list. It starts with the <dl> and ends with </dl>. The <dt> tag goes in front of each term to be defined, with a <dd> tag in front of each definition. Line breaks and indentations appear automatically.
Ordered lists are indented lists that have numbers or letters in front of each item.
Unordered lists are indented lists with a special bullet symbol in front of each item.
Definition lists are indented lists without any number or symbol in front of each item.

Listing 5.2. Unordered Lists, Ordered Lists, and Definition Lists

 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   <head>     <title>How to be Proper</title>   </head>   <body>     <p>       Basic Etiquette for a Gentlemen Greeting a Lady Aquaintance     </p>     <ul>       <li>Wait for her acknowledging bow before tipping your hat.</li>       <li>Use the hand farthest from her to raise the hat.</li>       <li>Walk with her if she expresses a wish to converse; Never       make a lady stand talking in the street.</li>       <li>When walking, the lady must always have the wall.</li>     </ul>     <p>       Recourse for a Lady Toward Unpleasant Men Who Persist in Bowing     </p>     <ol>       <li>A simple stare of iciness should suffice in most instances.</li>       <li>A cold bow discourages familiarity without offering insult.</li>       <li>As a last resort: "Sir, I have not the honour of your       aquaintance."</li>     </ol>     <p>       Proper Address of Royalty     </p>     <dl>       <dt>Your Majesty</dt>       <dd>To the king or queen.</dd>       <dt>Your Royal Highness</dt>       <dd>To the monarch's spouse, children, and siblings.</dd>       <dt>Your Highness</dt>       <dd>To nephews, nieces, and cousins of the sovereign.</dd>     </dl>   </body> </html>

Figure 5.2. The three types of HTML lists, as they appear in the most current version of Mozilla Firefox.

By the Way

Remember that different web browsers can display web pages quite differently. The HTML standard doesn't specify exactly how web browsers should format lists, so people using older web browsers may not see the same indentation you see. Software of the future may also format HTML lists differently, though all current web browsers now display lists in almost exactly the same way.