HTML and CSS Reference
Lesson 8. Creating Lists
Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes
provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of in-
structions. With a list for nearly everything, it's easy to understand why they are also popular
When we want to use a list on a website, HTML provides three different types to choose
from: unordered, ordered, and description lists. Choosing which type of list to use—or
whether to use a list at all—comes down to the content and the most semantically appropri-
ate option for displaying that content.
In addition to the three different types of lists available within HTML, there are multiple
ways to style these lists with CSS. For example, we can choose what type of marker to use
on a list. The marker could be square, round, numeric, alphabetical, or perhaps nonexist-
ent. Also, we can decide if a list should be displayed vertically or horizontally. All of these
choices play significant roles in the styling of our web pages.
An unordered list is simply a list of related items whose order does not matter. Creating an
unordered list in HTML is accomplished using the unordered list block-level element, <ul>
(see Figure 8.1 ). Each item within an unordered list is individually marked up using the list
item element, <li> .
Figure 8.1 An unordered list with three list items whose order doesn't matter
By default, most browsers add a vertical margin and left padding to the <ul> element
and precede each <li> element with a solid dot. This solid dot is called the list item marker,
and it can be changed using CSS.