HTML Lists

Adding Lists To Your Web Pages

There are 3 kinds of html lists you can use in your web pages:

  • Ordered Lists
  • Unordered Lists
  • Definition Lists

Ordered Lists

An ordered list is a list that numbers each list item. Use the <ol> tag to define an ordered list and the <li> tag to define each list item contained within the <ol> element.

Html Code:

<ol>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>etc etc</li>
</ol>

Browser Display:

  1. This is the first item
  2. This is the second item
  3. This is the third item
  4. etc etc

Unordered Lists

An unordered list, also known as a bullet list displays circles or dots next to each item instead of numbers. Use the <ul> element to contain each list item contained by the <li> element

Html Code:

<ul>
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item</li>
  <li>etc etc</li>
</ul>

Browser Display:

  • This is the first item
  • This is the second item
  • This is the third item
  • etc etc

Definition Lists

Definition lists are used to display a term and a description for the term. Its usage is slightly diferent than an ordered or unordered list. Use the definition list element (<dl>) to contain the entire list, the definition term element (<dt>) to contain the term being defined, and the definition description element (<dd>) to contain the description or definition.

Html Code:

<dl>
  <dt>Propeller</dt>
  <dd>A mechanical device for propelling a boat or aircraft, consisting of a 
    rotating shaft and two or more broad, angled blades attached to it.
  </dd>
  <dt>HTML</dt>
  <dd>Hypertext Markup Language, a standardized system for tagging text files to 
	achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
  </dd>
</dl>

Browser Display:

Propeller
A mechanical device for propelling a boat or aircraft, consisting of a rotating shaft and two or more broad, angled blades attached to it.
HTML
Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

List items are displayed as block elements by default. This means that each list item will be displayed in its own block below the previous one. By using the CSS "display" property you can change list items to display inline to use an unordered list as a horizontal navigation bar.

Html Code:

<ul>
	<li style="display:inline;">
		<a href="">This is the first item</a></li> |
	<li style="display:inline;">
		<a href="">This is the second item</a></li> |
	<li style="display:inline;">
		<a href="">This is the third item</a></li> |
	<li style="display:inline;">
		<a href="">etc etc</a></li>
</ul>

Browser Display:

Note: In the examples the href value was left blank since these links weren't actually intended to link anywhere.

HTML Tutorials