HTML – Lists

Introduction

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read. In modern web development, lists are workhorse elements, frequently used for navigation as well as general content.

Lists are good from a structural point of view as they help create a well-structured, more accessible, easy-to-maintain document. They are also useful because they provide specialized elements to which you can attach CSS styles.

Finally, semantically correct lists help visitors read your website, and they simplify maintenance when your pages need to be updated.

The three list types

There are three list types in HTML:

1. unordered list — used to group a set of related items in no particular order

2. ordered list — used to group a set of related items in a specific order

3. description list — used to display name/value pairs such as terms and definitions

Each list type has a specific purpose and meaning in a web page.

Unordered lists

Unordered (bulleted) lists are used when a set of items can be placed in any order.

An example is a shopping list:

• milk
• bread
• butter
• coffee beans

Unordered lists use one set of <ul></ul> tags wrapped around one or more sets of <li></li> tags:

<ul>
  <li>bread</li>
  <li>coffee beans</li>
  <li>milk</li>
  <li>butter</li>
</ul>

Attribute	Value	Description
compact	compact	Not supported in HTML5. Specifies that the list should render smaller than normal
type	disc square circle	Not supported in HTML5. Specifies the kind of marker to use in the list

Ordered lists

Ordered (numbered) lists are used to display a list of items that should be in a specific order. An example would be cooking instructions:

1. Gather ingredients
2. Mix ingredients together
3. Place ingredients in a baking dish
4. Bake in the oven for an hour
5. Remove from oven
6. Allow standing for ten minutes
7. Serve

<ol>
  <li>Gather ingredients</li>
  <li>Mix ingredients together</li>
  <li>Place ingredients in a baking dish</li>
  <li>Bake in oven for an hour</li>
  <li>Remove from oven</li>
  <li>Allow to stand for ten minutes</li>
  <li>Serve</li>
</ol>

Attribute	Value	Description
compact	compact	Not supported in HTML5. Specifies that the list should render smaller than normal
start	number	Specifies the start value of an ordered list
type	1 A a I i	Specifies the kind of marker to use in the list

Ordered lists can be displayed with several sequencing options. The default in most browsers is decimal numbers, but there are others available:

• Letters
  • Lowercase ascii letters (a, b, c…)
  • Uppercase ascii letters (A, B, C…).
  • Lowercase classical Greek: (έ, ή, ί…)
• Numbers
  • Decimal numbers (1, 2, 3…)
  • Decimal numbers with leading zeros (01, 02, 03…)
  • Lowercase Roman numerals (i, ii, iii…)
  • Uppercase Roman numerals (I, II, III…)
  • Traditional Georgian numbering (an, ban, gan…)
  • Traditional Armenian numbering (mek, yerku, yerek…)

Description lists

Description lists (previously called definition lists, but renamed in HTML5) associate specific names and values within a list.

Examples might be items in an ingredient list and their descriptions, article authors and brief bios, or competition winners and the years in which they won.

You can have as many name-value groups as you like, but there must be at least one name and at least one value in each pair.

Description lists use one set of <dl></dl> tags wrapped around one or more groups of <dt></dt> (name) and <dd></dd> (value) tags.

You must pair at least one <dt></dt> with at least one <dd></dd>, and the <dt></dt>should always come first in the source order.

<dl>
  <dt>Name1</dt>
  <dd>Value that applies to Name1</dd>
  <dt>Name2</dt>
  <dt>Name3</dt>
  <dd>Value that applies to both Name2 and Name3</dd>
  <dt>Name4</dt>
  <dd>One value that applies to Name4</dd>
  <dd>Another value that applies to Name4</dd>
</dl>

Result:

Name1

  Value that applies to Name1

Name2

Name3

  Value that applies to both Name2 and Name3

Name4

  One value that applies to Name4

  Another value that applies to Name4

HTML list advantages

1. Flexibility :-

If you have to change the order of the list items in an ordered list, you simply move around the list item elements; when the browser renders the list, it will be properly ordered.

2. Styling :-

Using an HTML list allows you to style the list properly using CSS. The list item tags <li> are different from the other tags in your document, so you can specifically target CSS rules to them.

3. Semantics :-

HTML lists give the content the proper semantic structure. This has important benefits, such as allowing screen readers to tell users with visual impairments that they are reading a list, rather than just reading out a confusing jumble of text and numbers.

To put it another way, don’t code list items using regular text tags. Using text instead of a list makes more work for you and can create problems for your document’s readers. So if your document needs a list, you should use the correct HTML list format.