Using an HTML List in Web Design

Ordered lists, unordered lists, and definition lists

The HTML language supports three different types of list. By default, they use standard tags and render in standard ways, although a more elaborate styling for any of these elements generally requires a style sheet.

Three Types of Lists in HTML

HTML offers three use cases for listing content on a page.

  • Ordered Lists: These are sometimes called numbered lists because, by default, the list items contained in that list have a specific numerical order or ranking. Ordered lists are appropriate where the exact ordering of items are important to the meaning of the content. For example, a recipe would likely use an ordered list because the steps occur in sequence. Any step-by-step process is best presented as an ordered list.
  • Unordered Lists: These are sometimes called bulleted lists because the default visual appearance of an unordered list is to have small bullet icons in front of the list items. This type of list is best used when the order of the items isn't salient. The list items will appear in whatever order you code them in for the HTML, but you are determining that order and, unlike a recipe or step-by-step process, the order could be changed and the meaning of the content would not suffer.
  • Definition Lists: These are lists of items that have two parts, a term to be defined and the definition. They are commonly used to display a definition/description pair like you would find in a dictionary, but definition lists can also be used for many other kinds of content.

Lists in General

html list examples

With lists, all items are paired with opening and closing tags. These pairs govern both the list-type markers and the individual list-item elements.

Ordered Lists

Use the 

  1. tag (the ending
 tag is required), to create a numbered list with numbers starting at 1. The elements are created with the
  •  tag pair. 

    The HTML looks like this:

    1. Step One
    2. Step Two
    3. Step Three

    And the result looks like this:

    1. Step One
    2. Step Two
    3. Step Three

    Unordered Lists

    Use the

    •  tag (the ending  tag is required) to create a list with bullets instead of numbers. Just like with the ordered list, the elements are created with the
    • tag pair.

    The HTML looks like this:

    • Apples
    • Oranges
    • Pears

    And the result looks like this:

    • Apples
    • Oranges
    • Pears

    Definition Lists

    Definition lists create a list with two parts to each entry: the name or term to be defined and the definition. Use

    to create the list and use to specify the term and

    The HTML looks like this:


    Cat
    Cute four-legged animal.
    Internet
    Online community optimized for cat photos.

    And the result looks like this:

    example of a definition list
    Format
    mla apa chicago
    Your Citation
    Kyrnin, Jennifer. "Using an HTML List in Web Design." ThoughtCo, Sep. 30, 2021, thoughtco.com/types-of-html-lists-3466489. Kyrnin, Jennifer. (2021, September 30). Using an HTML List in Web Design. Retrieved from https://www.thoughtco.com/types-of-html-lists-3466489 Kyrnin, Jennifer. "Using an HTML List in Web Design." ThoughtCo. https://www.thoughtco.com/types-of-html-lists-3466489 (accessed March 28, 2024).