Using Lists

There are two different types of lists you'll be using most often: ordered and unordered lists.

Unordered Lists

Unordered lists are more commonly known as bulleted lists. They're called "unordered" in HTML because it doesn't matter what order the list items are collected, the list is the same either way. Think of this like your grocery list.

A typical unordered may look something like this:
<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </body> </html>

And will produce

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Ordered List

Ordered lists are more commonly known as numbered lists. They're called "ordered" in HTML because unlike bulleted lists, it does matter what order the list items are collected. Think of this like a table of contents. Chapter 1 should be listed before Chapter 2.

A typical unordered may look something like this:
<html> <head> <title>HTML for Beginners - Basic HTML</title> </head> <body> <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ol> </body> </html>

And will produce

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4

List Items

You'll notice that both lists above share the <li> element. This is the list-item element and as the name suggests it surrounds each item within the list.

«...Blockquotes & Others Tables...»

Advanced Tips

Ordered lists, unordered lists, and list items are all block-level elements so they will cause breaks in any other elements they're nested within.

A common technique at the moment is to use lists for navigation menus, since menus are essentially a list of links to other pages. You can see this in practice on this, and many other standards-conscious sites. Because all the elements are block-level they can be styled sophisticatedly using CSS.