HTML Lists

There are three types of lists. Unordered lists contain bullet points. They are used when the order of elements in the list is not important. Ordered lists have some kind of numeric counter preceding each list item, and definition lists contain terms and their definitions.

There are three types of lists in HTML:

  1. Unordered lists, which are like lists of bullet points

  2. Ordered lists, which use a sequence of numbers or letters instead of bullet points

  3. Definition lists, which allow you to specify a term and its definition

1. Unordered List

If you want to make a list of bullet points, you write the list within the <ul> element (which stands for unordered list). Each bullet point or line you want to write should then be contained between opening <li> tags and closing </li> tags (the li stands for list item).

<ul>
  <li>An item</li>
  <li>Another item</li>
  <li>Yet another item</li>
</ul>

The list items are marked with bullets (small black circles) by default. The CSS list-style-type property can be used to define the style of the list item marker. The values can be "disc" (default), "circle", "square", "none".

2. Ordered List

In an ordered list, rather than prefixing each point with a bullet point, you can use either numbers (1, 2, 3), letters (A, B, C), or Roman numerals (i, ii, iii) to prefix the list item. An ordered list is contained inside the <ol> element. Each item in the list should then be nested inside the <ol> element and contained between opening <li> and closing </li> tags.

<ol>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol>

The type attribute of the <ol> tag, defines the type of the list item marker. The values can be "1", "A", "a", "I", "i". By default, an ordered list starts counting from 1. If you want to start counting from a specified number, you can use the start attribute.

HTML5 introduces a new Boolean attribute called reversed that, when present, reverses the order of the list items.

3. Definition Lists

The definition list is a special kind of list for providing terms followed by a short text definition or description for them. Definition lists are contained inside the <dl> element. The <dl> element then contains alternating <dt> and <dd> elements. The content of the <dt> element is the definition term you will be defining. The <dd> element contains the definition description of the previous <dt> element.

<dl>
  <dt>Coffee</dt>
    <dd>Bean-based caffeinated beverage </dd>
  <dt>Tea</dt>
    <dd>Leaf-based caffeinated beverage</dd>
  <dt>Water</dt>
    <dd>Standard H20</dd>
</dl>
Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive