HTML Elements for Lists

Once you master HTML’s basic text elements, you can tackle HTML’s list elements. HTML lets you create three types of list:

  • Ordered lists give each item in a list a sequential number (as in 1, 2, 3). They’re handy when sequence is important, like when you list a series of steps that tell your relatives how to drive to your house.

  • Unordered lists are also known as bulleted lists, because a bullet appears before each item. To some degree, you can control what the bullet looks like. You’re reading a bulleted list right now.

  • Definition lists are handy for displaying terms followed by definitions or descriptions. For example, the dictionary is one huge definition list. In a definition list on a web page, your browser left-aligns the terms and indents the definitions underneath them.

In the following sections, you’ll learn how to create all three types of list.

Ordered Lists

In an ordered list, HTML numbers each item consecutively, starting at some value (usually 1). The neat part about ordered lists in HTML is that you don’t need to supply the numbers. Instead, the browser automatically adds the appropriate number next to each list item (sort of like the autonumber feature in Microsoft Word). This is handy for two reasons. First, it lets you insert and remove list items without screwing up your numbering. Second, HTML carefully aligns the numbers and list items, which isn’t as easy if you do it on your own.

To create an ordered list, use <ol>, a block element (<ol> stands ...

Get Creating a Website: The Missing Manual, 3rd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.