Using Lists
Types of Lists
Lists have a variety of uses in web design. There are entire sites out there that almost all of their content is comprised of lists with different styling. They are arguably one of the most useful tags we have access to. By default they are always block elements.
Unordered Lists
The unordered list would be for something like a grocery list, where there is no particular order. So your basic bulleted list. The unordered list can be made with three different types of bullets. circle, disc, and square.
The list must first be created and the type declared. This would be done by using the ul tag. Then each item in the list must be named as so by using the li tag.
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Ordered Lists
The ordered list works in a similar fashion to the unordered list. You start the list by using the ol tag, and then each item that follows must also have the li tag. There is much more variety in the types of things you can use in an ordered list though. They are upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek, and decimal. Try them out and see what each does.
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>
Pesky Bullets
One thing I always find annoying when using lists is where the bullet appears. by default it is always on the outside of the margin. But this can easily be changed through CSS.
Did You Know?
When making your website's navigation an unordered list can be helpful. We talked about making block elements inline in the layout section. The same can be done for lists and list items. By making each list item inline they will become horizontal.