HTML/CSS: Lists

List Types

Often, when creating web content, we look for ways to organize information to make it more readable. One way to organize text is in lists. There are two types of lists: ordered (numbered, lettered, etc) and unordered (bulleted). To create an ordered list, we use the <ol> tag. To create an unordered list, we use the <ul> tag. Each of these tags require a closing and we will be placing tags inside of them.
Example of an ordered list:
  1. Get Toothbrush
  2. Put toothpaste on brush
  3. Brush Teeth
  4. Rinse
Example of an unordered list:
  • Mow the lawn
  • Do the dishes
  • Feed the dog

List Items

Inside of each of these list types, we will create list items. Depending on the list type (ul / ol), each list item generates the necessary list header (the number, letter or bullet). List items are generated using the <li> tag.
Below, you can see the code used to generate the lists above.
Example of Ordered List Code
<ol>
	<li>Get Toothbrush</li>
	<li>Put toothpaste on brush</li>
	<li>Brush Teeth</li>
	<li>Rinse</li>
</ol>
Example of Unordered List Code
<ul>
	<li>Mow the lawn</li>
	<li>Do the dishes</li>
	<li>Feed the dog</li>
</ul>

Styling Lists

List appearances can be altered using styles. The list-style css property allows a variety of list styles to be implemented. Some of the optional values for the list-style command include disc, circle, square, decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, and upper-roman. Use the form below to experiment with list styles.

List Type:






  1. Item
  2. Item
  3. Item
<head>
	<style>
		ol{
			list-style:decimal;
		}
	</style>
</head>
<body>
	<ol>
		<li>Item</li>
		<li>Item</li>
		<li>Item</li>
	</ol>
</body>

Nesting Lists

When lists are nested in each other, they automatically indent and take on outline type characteristics. The best way to build a nested list is one level at a time. For example, build all of the list items for the main list and then build sub-lists inside. Styles should be applied through internal (not inline) styling for consistency. Here is an example of a nested list:

<head>
   <style>
      ol { list-style:upper-roman }
      ol ol { list-style:upper-alpha }
      ol ol ol {list-style:decimal }
   </style>
</head>
<body>
   <ol>
      <li>Main Topic 1</li>
      <ol>
         <li>Sub-Topic 1</li>
         <li>Sub-Topic 2</li>
            <ol>
               <li>Item 1</li>
               <li>Item 2</li>
               <li>Item 3</li>
            </ol>
      </ol>
      <li>Main Topic 2</li>
      <li>Main Topic 3</li>
   </ol>
</body>
  1. Main Topic 1
    1. Sub-Topic 1
    2. Sub-Topic 2
      1. Item 1
      2. Item 2
      3. Item 3
  2. Main Topic 2
  3. Main Topic 3
The list above was built in parts. First, the main list consisting of lines 9,10,20,21,22 was constructed. Then, the sub-list (lines 11, 12, 13, 19). Finally, the Item list (lines 14-18). Styles were then set for the list style of each level.