HTML- LIST

The three list types

There are three list types in HTML:

• unordered list—used to group a set of related items, in no particular order.
• ordered list—used to group a set of related items, in a specific order.
• definition list—used to display name/value pairs such as terms and their definitions, or times and events.

Each one has a specific purpose and meaning—they are not interchangeable!

Unordered lists

Unordered lists, or 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

These items are all part of one list, however, you could put the items in any order and the list would still make sense:

• bread
• coffee beans
• milk
• butter

Unordered list markup

Unordered lists use one set of <ul></ul> tags, wrapped around many sets of <li></li>

<ul>

<li>bread</li>

<li>coffee beans</li>

<li>milk</li>

<li>butter</li>

</ul>

<ul type=”square”>	<ul type=”disc”>	<ul type=”circle”>
Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread	Milk Toilet Paper Cereal Bread

Ordered lists

Ordered lists, or numbered lists, are used to display a list of items that need to be placed in a specific order. An example would be cooking instructions, which must be completed in order for the recipe to work:

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

If the list items were moved around into a different order, the information would no longer make sense:

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

Ordered lists can be displayed with one of several numbering or alphabetic systems—that is, letters or numbers. The default in most browsers is decimal numbers, but there are more options:

• 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…)

Ordered list markup

Ordered lists use one set of <ol></ol> tags, wrapped around many sets of <li></li>:

<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>

<ol type=”A”>	<ol type=”I”>	<ol type= “i”>
A) Gather ingredientsB)  Mix ingredients togetherC) Place ingredients in a baking dishD) Bake in oven for an hourE) Remove from ovenF) Allow to stand for ten minutes G) Serve	I) Gather ingredientsII)  Mix ingredients togetherIII) Place ingredients in a baking dishIV) Bake in oven for an hourV) Remove from ovenVI) Allow to stand for ten minutes VII) Serve	i) Gather ingredientsii)  Mix ingredients togetheriii) Place ingredients in a baking dishiv) Bake in oven for an hourv) Remove from ovenvi) Allow to stand for ten minutes vii) Serve

Nesting lists

A list item can contain another entire list—this is known as “nesting” a list. It is useful for things like tables of contents, such as the one at the start of this article:

1. Chapter One
   1. Section One
   2. Section Two
   3. Section Three
2. Chapter Two
3. Chapter Three

The key to nesting lists is to remember that the nested list should relate to one specific list item. To reflect that in the code, the nested list is contained inside that list item. The code for the list above looks as follows:

<ol>

<li>Chapter One

<ol>

<li>Section One</li>

<li>Section Two </li>

<li>Section Three </li>

</ol>

</li>

<li>Chapter Two</li>

<li>Chapter Three  </li>

</ol>