Lists

Lists have been in the HTML standard since the beginning. There's two parts to a list, the element that defines the type of the list, and then a nest of list items to populate it.

Unordered vs. ordered lists

HTML provides for two types of lists, unordered, or bulleted, and ordered, or numbered. Both work exactly the same, but will render out the list markers differently.

To use an unordered list, use the <ul> tag, and to use an ordered list, use the <ol> tag.

List items

To populate the list, you'll need to use the <li>, or list item, tag. There should be as many pairs of <li> tags as there are items in the list, and they all need to be nested inside the <ul> or <ol> tags.

<h3>Mudhoney - <cite>Superfuzz Bigmuff</cite> tracklist</h3>
<ol>
	<li>"Need"</li>
	<li>"Chain That Door"</li>
	<li>"Mudride"</li>
	<li>"No One Has"</li>
	<li>"If I Think"</li>
	<li>"In 'n' Out of Grace"</li>
</ol>

Mudhoney - Superfuzz Bigmuff tracklist

1. "Need"
2. "Chain That Door"
3. "Mudride"
4. "No One Has"
5. "If I Think"
6. "In 'n' Out of Grace"

Anything can be placed inside these list item tags: text, links, images, and so on.

It's best to close your list item tags; many early HTML documents don't have these closed, but it's generally bad form and can slow down page rendering.

Nesting lists

To nest a list inside another one, you'll need to start it inside an open <li> tag, like so. (The new list can be either type.)

<ol>
	<li>"Need"
		<ul>
			<li>Guitar, vocals - Mark Arm</li>
			<li>Guitar, backing vocals - Steve Turner</li>
			<li>Bass - Matt Lukin</li>
			<li>Drums - Dan Peters</li>
			<li>Recorded at Reciprocal by Jack Endino</li>
		</ul></li>
</ol>

1. "Need"
   • Guitar, vocals - Mark Arm
   • Guitar, backing vocals - Steve Turner
   • Bass - Matt Lukin
   • Drums - Dan Peters
   • Recorded at Reciprocal by Jack Endino

Remember that whitespace in HTML is completely ignored. This is the cleanest and most readable way to format lists.