Questions tagged [html-lists]

Lists in HTML can be either ordered (typically numbered, using the <ol> tag) or unordered (typically bulleted, using the <ul> tag) and can contain any number of list items (<li>), which could also contain nested lists within them.

Any time you are listing things which should follow a logical order, such as instructions, you should use an ordered list. Any time you are listing things in which the order doesn't matter, such as your grocery list, you should use an unordered list.

Ordered List

<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ol>

Output

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

Unordered List

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

Output

• Item 1
• Item 2
• Item 3

Nesting Lists

Here's an example of how lists should be nested within each other:

<ul>
  <li>Test</li>
  <li>Items
    <ul>
      <li>Test</li>
    </ul>
  </li>
  <li>Test Test
    <ul>
      <li>Test</li>
    </ul>
  </li>
</ul>

Output

• Test
• Items
  • Test
• Test Test
  • Test

Notice how a nested list is part of a list item. Another list cannot be (semantically) opened directly inside a list, it must be opened within one of its list items.

Styling Lists

There are several styles which can be used in order to determine how lists will appear. The default values of each style property are italicized.

• list-style-position: inside, outside, or inherit
  Determines where the bullets or numbering will appear within the list. If set to inside, they will appear inline at the beginning of each item. If set to outside, they will appear outside, where each number or bullet is aligned to the right and pushed outside the actual list.

• list-style-image: url, none, inherit
  Defines an image to be used for the bulleting of the list rather than a standard text number or bullet. If the image cannot be loaded, it will fall back to the type which is defined for the list.

• list-style-type
  Defines what type of bulleting or numbering to use for the list. The default is different depending on whether it's ordered or unordered. All of the following are valid list types which you can use:

  • armenian
  • circle
  • cjk-ideographic
  • decimal (Default for ordered lists)
  • decimal-leading-zero (01, 02, 03, etc)
  • disc (Default for unordered lists)
  • georgian
  • hebrew
  • hiragana
  • hiragana-iroha
  • inherit
  • katakana
  • katakana-iroha
  • lower-alpha (a, b, c, etc)
  • lower-greek
  • lower-latin (Same as lower-alpha)
  • lower-roman (i, ii, iii, etc)
  • none
  • square
  • upper-alpha (A, B, C, etc)
  • upper-latin (Same as upper-alpha)
  • upper-roman (I, II, III, etc)

• list-style
  Allows you to define all three of the above in one declaration, in the order: list-style-type, list-style-position, then list-style-image. You can also set it to inherit or none to set all three properties to inherit or none.

Description Lists (Definition Lists)

<dl> description list, <dt> term (name), and <dd> value (description) tags can be used to create a lists which associate specific names with values. For instance in a receipe:

<dl>
 <dt>Castor Sugar</dt>
  <dd>Finely granulated white sugar.</dd>
 <dt>Self-raising flour</dt>
  <dd>A pre-mixed combination of flour and leavening agents (usually salt and baking powder).
  </dd>
 </dl> 

Output

Castor Sugar
  Finely granulated white sugar.
Self-raising flour
  A pre-mixed combination of flour and leavening agents (usually salt and baking powder).

References

W3C HTML lists

List examples

Contextual styles and Bootstrap lists