Lists

Unordered (bulleted) Lists

Lists are an easy way for web pages to present a series of points. For example, you've seen an unordered list at the top of each section of this website giving key points about the section. In HTML, unordered lists (sometimes called bulleted lists) are inserted using the <ul> tag. Unlike previous tags, however, the <ul> tag itself doesn't do much. Instead, it requires another tag, <li> (list item) to define each item within the list:

Click to view Live Example

<ul>
	<li>This is the first item.</li>
	<li>This is the second item.</li>
	<li>This is the third item.</li>
</ul>
A simple unordered list

In the previous example, note how each <li> tag is within the main <ul> tag. That is how the web browser knows the list items are related and should be added to the same list. Also, it's easy to forget to include the end tags for <li>, but just like paragraphs, it can cause problems later.

Ordered (numbered) Lists

The other common type of HTML list is the ordered list (also called a numbered list). The basic usage of the ordered list is almost identical to unordered lists: instead of using <ul>, just use <ol>. The browser will automatically number each item in the list.

Click to view Live Example

<ol>
	<li>This is the first item.</li>
	<li>This is the second item.</li>
	<li>This is the third item.</li>
</ol>
A simple ordered list

The <li> tag is still used to indicate a list item, but using <ol> tells the browser to add numbers instead of bullets to the beginning of each item.

Definition Lists

HTML defines a third type of list, though it is much less common. A definition list does not use <li> tags to denote each list item. Instead, these lists have two parts for each item: a term (name) and a description. Descriptions are indented on the line after each term in the list. The tags for definition lists are <dl> (definition list), <dt> (definition term), and <dd> (definition description):

Click to view Live Example

<dl>
	<dt>First term</dt>
		<dd>Description of the first term</dd>
	<dt>Second term</dt>
		<dd>Description of the second term</dd>
	<dt>Third term</dt>
		<dd>Description of the third term</dd>
</dl>
A simple definition list

Note that the <dd> is not inside the <dt> tag. Indenting has only been added to help visualize what the list will look like in a web browser.