Frames and Lists in HTML - The Unordered List
(Page 5 of 6 )
The names ordered lists and unordered lists, to me, are misleading. Before you get up in arms and send me hate mail, I understand that the numerics in the ordered list are why it is called ordered. Still, I can put the data in any order I want in that list; it's the numerics preceding the data that are ordered. But you get my point. I hope.
Instead of numerics, unordered lists use bullets in front of the data. Their creation is very similar to that of ordered lists:
<html>
<body>
<h4>My Awesome Pasta Recipe:</h4>
<ul>
<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>
</ul>
</body>
</html>
As you can see, the only difference is the replacement of the <ol> tag with the <ul> tag. Also, just as there are different types of ordered lists, the same is true with our good buddy the unordered list:
<html>
<body>
<h4>To Create a Disc bulleted list:</h4>
<ul type="disc">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h4>To Create a Circle bulleted list:</h4>
<ul type="circle">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h4>To Create a Square bulleted list:</h4>
<ul type="square">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>
This displays:
To Create a Disc bulleted list:
To Create a Circle bulleted list:
To Create a Square bulleted list:
Note that there are other ways to display both types of lists, including custom bullets, but that is beyond the scope of this article.
Next: Working with Nested Lists >>
More HTML Articles
More By James Payne
/ 5 
