HTML Lists

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.

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 term you will be defining. The <dd> element contains the definition 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>
Subscribe for Free Updates

Please enable the javascript to submit this form