HTML Lists

There are two types of lists in HTML: ordered lists (with numbers by default) or unordered lists (bullet items). The syntax for the two is very similar, so let’s start with an unordered list:

                	
...
<body>
	<!-- unordered list tag is ul -->
 	<ul>
		<!-- list items are li for both unordered and ordered lists -->
		<li>Apples</li>
		<li>Oranges</li>
		<li>Blueberries</li>		
	</ul>
</body>
…
					
                

The previous list is an unordered list with three items - “Apples”, “Oranges”, and “Blueberries”. The tags with exclamation points and dashes is an HTML comment - it is always a good idea to comment your code, no matter what language you’re using - and HTML is no exception.

Let’s take a quick look at an ordered list now, which is almost identical to the unordered list:

                	
…
<body>
	<ol>
		<li>Go to the supermarket</li>
		<li>Have the car’s oil changed</li>
		<li>Take a nap</li>
	</ol>
</body>
…
					
				

As you can see, the only difference between coding an ordered list and an unordered list is the name of the tag: unordered lists are “ul”, and ordered lists are “ol”. The unordered list will dispay with bullets, and the ordered list with numbers, by default.

There may be topics or problems that are best illustrated by using multi-level lists - similar to an outline when you prepare to write a research paper or a lengthy memo. This can be achieved easily enough, by nesting lists inside of one another - let’s see an example of a multi-level unordered list:

                	

...
<body>
	<ul>
		<li>First-level item 1
			<ul>
				<li>Descendant #1 of Item 1 first-level</li>
				<li>Descendant #2 of Item 1 first-level</li>
			</ul>
		</li>
		<li>First-level item 2</li>
		<li>First-level item 3
			<ul>
				<li>Descendant #1 of Item 3 first-level</li>
			</ul>
		</li>
	</ul>
</body>
…

						
					

This example only goes two levels down, but it illustrates the general technique that can be used to create multi-level lists of any depth.