HTML Lists
There are three types of lists - Unordered, Ordered and Definition. 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:
- Unordered List: List of bullet points
- Ordered List: Sequence of numbers or letters instead of bullet points
- Definition List: 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 list item should be contained between the <li> tags (the li stands for list item).
<ul>
<li>An item</li>
<li>Another item</li>
<li>Yet another item</li>
</ul>
The items are indented. There is some extra space between the left margin and the beginning of each list item.
The list items are marked with bullets 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.
Each item begins a new line. When a list item is displayed, it is shown on a new line.
Attributes: list-style-type
2. Ordered List
In an ordered list, rather than prefixing each list item 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 list item should then be nested inside the <ol> element and contained between the <li> tag.
<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.
Attributes: type, start, revered
3. Definition List
The definition list is a special kind of list for providing terms followed by a short text definition or description for them. It is useful when you have have to display name and value pairs. Definition lists are contained inside the <dl> 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>
Definition lists (<dl>) don't use bullets or numbers. Instead, they have two elements. Definition terms (<dt>) are usually words or short phrases. Definition descriptions (<dd>) are the extended text blocks that contain the actual definition.