In HTML, there are three kinds of lists, each appropriate for a different kind of information. An unordered list made with <ul> and </ul> tags is meant for elements that have no order or the order is unimportant (typically shown with bullets). An ordered list created using the <ol> and </ol> tags is typically shown with numbers and is used for elements whose order matters such as a sequence of steps to perform. Finally, there are definitions lists, created with <dl> and </dl> tags.
Ordered lists provide a list of items, each of which are preceded by an incremental number starting from 1.
<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Unordered lists display a list of items, each of which is prefixed by a bullet.
<ul> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul>
Definition lists display a list of bolded terms, followed by the definition on a new line and prefixed by a tab (by default).
<dl> <dt>Term 1</dt> <dd>Definition of Term 1</dd> <dt>Term 2</dt> <dd>Definition of Term 2</dd> </dl>
If two terms share the same definition they can be grouped together like so:
<dl> <dt>Cascading Style Sheets</dt> <dt>CSS</dt> <dd>Definition of Cascading Style Sheets (aka CSS)</dd> <dt>Term 2</dt> <dd>Definition of Term 2</dd> </dl>
If a term has two alternative definitions use a separate
dd element for each definition, e.g.
<dl> <dt>Mouse</dt> <dd>Small mammal</dd> <dd>Input device for a computer</dd> </dl>
Longer definitions can be broken up into paragraphs by nesting
p elements within the
<dl> <dt>Term 2</dt> <dd> <p>First paragraph of the definition.</p> <p>Second paragraph of the definition.</p> </dd> </dl>
Lists can be nested. An example:
<ul> <li>Lists <ul> <li>Numbered Lists</li> <li>Unnumbered Lists</li> </ul> </li> </ul>
When nesting, nested list elements should be within a parent list item element.
An example of incorrect nesting:
<ul> <li>Lists</li> <ul> <li>Numbered Lists</li> <li>Unnumbered Lists</li> </ul> </ul>
A further example of incorrect nesting, with two consecutive UL elements:
<ul> <li> Outer list item <ul> <ul> <li> Inner list item within two consecutive UL elements </li> </ul> </ul> </li> </ul>
The above descriptions of each of the three list types refer to the default rendering of the corresponding HTML code by the web browser. However, by using CSS, you are able to change the formatting of the lists. For example, with CSS you are able to make the lists horizontal as opposed to the vertical.
An example of using lists to mark up a recipe for pancakes.
<!DOCTYPE html> <html lang="en"> <head> <title>Pancakes</title> </head> <body> <h1>A Recipe for Pancakes</h1> <p>From <a href="http://www.it1me.com/books?s=Cookbook:Pancake">Wikibooks Cookbook</a>.</p> <p>These pancakes make a good breakfast for a family. They go well with real maple syrup. They are healthy too (as long as you don't over do the syrup) since whole wheat flour contributes to your fiber intake. </p> <h2>Ingredients</h2> <ul> <li>1 cup whole wheat flour</li> <li>1 tablespoon common granulated sugar</li> <li>2 teaspoons baking powder</li> <li>1/4 teaspoon salt</li> <li>1 egg</li> <li>1 cup milk</li> <li>2 tablespoons oil</li> <li>additional oil for frying</li> </ul> <h2>Procedure</h2> <ol> <li>Oil a frying pan.</li> <li>Mix the dry ingredients in one bowl.</li> <li>In another bowl, scramble the egg, then add the other wet ingredients. This includes the 2 tablespoons of oil.</li> <li>Mix the dry and wet ingredients together, well enough to eliminate dry spots but no more.</li> <li>Heat the frying pan to medium temperature. The pan is hot enough when a drop of water dances around rather than simply boiling away.</li> <li>Pour a pancake, about 4 inches in diameter using about a 1/4 cup of batter.</li> <li>The pancake will bubble. When the bubbling settles down and the edges are slightly dry, flip the pancake.</li> <li>When the pancake looks done, remove it and start another one.</li> </ol> <h2>Toppings</h2> <p>Traditionally, pancakes are topped with butter and maple syrup. Other toppings can include strawberries, applesauce, cinnamon, or sugar. </p> </body> </html>
Manage research, learning and skills at IT1me. Create an account using LinkedIn to manage and organize your IT knowledge. IT1me works like a shopping cart for information -- helping you to save, discuss and share.