Teach Yourself HTML Home   Basics Main Tags Fonts Tables Lists Links
 
Numbered or Bulleted Lists

HTML provides a simple way to show numbered lists ("ordered lists") or bullet lists ("unordered lists"). Use the container tags <ol> and <ul> to make ordered lists and unordered lists, respectively. Inside the container tags, use the <li> tag to denote the start of a list item.

For example:

This is an ordered list:
<ol>
<li>First item
<li>Second item
<li>Third item
</ol>

This is an unordered list:
<ul>
<li>First item
<li>Second item
<li>Third item
</ul>

and will be rendered respectively as follows:

This is an ordered list:

  1. First item
  2. Second item
  3. Third item
This is an unordered list:
  • First item
  • Second item
  • Third item

Inside the list items, you can put whatever you want - links, images, tables or even other lists. Nested lists are actually quite common, useful for outlines or cascading menus.

Less common, but still useful, are "definition lists", which contain an alternating set of terms and definitions. Enclose the entire list in the <dl> container tag, and use <dt> and <dd> to denote the start of terms and definitions, respectively. For example,

Here's a definition list:
<dl>
<dt>Term 1
<dd>Definition of Term 1
<dt>Term 2
<dd>Definition of Term 2
</dl>

and will be rendered as:

Term 1
Definition of Term 1
Term 2
Definition of Term 2

Be sure to end your lists with </ol>, </ul>, and </dl>, or the rest of your page will show up as part of the final list item (if at all).

Contact me   Back to top