Frames and Lists in HTML - Lists in HTML
(Page 4 of 6 )
There are three types of lists in HTML: the ordered list, the unordered list, and the definition list. They allow you to create bulleted and numbered lists of data in HTML.
The Ordered List
The ordered list creates lists of data with a numeric value in front of it. It uses the <ol> tag to begin the list, and the <li> tag for each item in the list, like so:
<html>
<body>
<h4>My Awesome Pasta Recipe:</h4>
<ol>
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
</body>
</html>
The result of this code would be:
My Awesome Pasta Recipe:
Pasta
Goat Cheese
Roasted Red Peppers
Sun-dried Tomatoes
Chopped Eggplant
Mozzarella
Fresh Basil
Turkey Sausage (optional)
Grated Parmesan Cheese
And the result of that dish would be a very satisfied stomach (you can sub Chorizo for the hot turkey sausage to kick it up a notch. BLAM!)
You can of course create other types of ordered lists, such as the ways indicated by this extensive code:
<html>
<body>
<h3>To Create a Numbered list:</h3>
<ol>
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
<h3>To Create a Letters list:</h3>
<ol type="A">
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
<h3>To Create a Lowercase letters list:</h3>
<ol type="a">
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
<h3>To Create a Roman numerals list:</h3>
<ol type="I">
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
<h3>To Create a Lowercase Roman numerals list:</h3>
<ol type="i">
<li>Pasta</li>
<li>Goat Cheese</li>
<li>Roasted Red Peppers</li>
<li>Sun-dried Tomatoes</li>
<li>Chopped Eggplant</li>
<li>Mozzarella</li>
<li>Fresh Basil</li>
<li>Turkey Sausage (optional)</li>
<li>Grated Parmesan Cheese</li>
</ol>
</body>
</html>
Next: The Unordered List >>
More HTML Articles
More By James Payne
/ 5 
