Twitter icon
YouTube icon

Lists

Examples of lists

Types of List

There are three types of lists in web pages:

Unordered Lists
Unordered Lists can appear with or without Bullets next to each item
Ordered Lists
Ordered Lists appear with Numbers or Letters next to each item:
Definition Lists
Definition Lists consist of a Definition Term and Definition Description.
They can contain multiple Definition Descriptions including Paragraphs and even other lists.

The three items above are an example of a Definition List each contain a Definition Term and Definition Description(s).

Spacing - Below Headings

Unordered List appears the same distance below Headings as Paragraphs.

Example - An Unordered below a Heading

  • Item 1.1
  • Item 1.2
  • Item 1.3

Spacing - Below Paragraphs

Unordered Lists have special spacing below Paragraphs, they have a negative top-margin removing the space so that the list appears directly beneath the Paragraph.

This gives the visual appearance of a Line Break rather than a Paragraph Break.

Example - An Unordered List below a Paragraph

The list below begins below a paragraph:

  • Item 1.1
  • Item 1.2
  • Item 1.3

Spacing - Below Lists

Lists visually have the same spacing as a Paragraph beneath them.

Example - A Paragraph below an Unordered List

  • Item 1.1
  • Item 1.2
  • Item 1.3

This spacing is only applied to the initial List Item, subsequent Child Items do not have the additional margin beneath them allowing close and consistent nesting of List Items.

Nesting Lists

Example - An Unordered List

  • Item 1.1
    • Item 2.1
      • Item 3.1
      • Item 3.2
      • Item 3.3
    • Item 2.2
    • Item 2.3
  • Item 1.2
  • Item 1.3

Example - An Ordered List

  1. Item 1.1
    1. Item 2.1
    2. Item 2.2
      1. Item 3.1
      2. Item 3.2
      3. Item 3.3
    3. Item 2.3
  2. Item 2.2
  3. Item 2.3
  4. Item 2.4
  5. Item 2.5
  6. Item 2.6
  7. Item 2.7
  8. Item 2.8
  9. Item 2.9
  10. Item 2.10
  11. Item 2.11

Example - A Definition List

A Definition Term
A Definition Description
A Definition Term
A Definition Description
A Definition Term with two Definition Descriptions
A Definition Description
Another Definition Description

Below a Paragraph:

A Definition Term
A Definition Description
A Definition Term
A Definition Description
A Definition Term with two Definition Descriptions
A Definition Description
Another Definition Description