Lists

Lists, both ordered (numbered) and unordered (bulleted) have been in the HTML standard since the very beginning. They're good for links and navigation or for just plain listing information.

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

Unordered vs. ordered lists

Both unordered and ordered lists will render the same except for the list's markers. If you use an ordered list, numbers will be used; if you use an unordered list, bullets will be used.

To create a list, use either the ul (unordered) or ol (ordered) elements.

<ol>
</ol>

Or:

<ul>
</ul>

List items

To populate the list, you'll want to nest the li, or list item, element, one for each item you want in the list.

<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"

You can put just about anything you want in an list item: text, links, images, even other lists.

Nesting lists

You can actually nest a list inside of another list if, say, you have a table of contents with links to subsections, or really anything where you need to get more granular than just a few top-level items. To nest a list, you'll need to start a new list inside of an open list element. (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