HTML tags | ol-ul-li

They are used to represent a list of items. With <ol> (ordered list) we create an ordered list and with <ul> (unordered list) we create an unordered list. In both cases, each of the elements of the list will be created by adding <li> (list item) as children.

To know when to use one or the other, it is enough to alter the order of the elements in the list: if the meaning of the content changes, you have to use an <ol>. If it stays the same, a <ul>. An example of <ol> would be a recipe, in which the order of the steps matters, and that of a <ul> a menu, in which the order of the sections can vary over time.

Both types of lists can be nested as many times as desired, alternating between <ul> and <ol> without restrictions.

Normally the <ul> are presented with an indicator for each element, in the form of a point, circle, square ... depending on the degree of depth that the element has. This default value can be changed using the CSS property list-style-type.

The <ol> are presented with a number for each element, and have some specific attributes:

• reversed: to turn the numbering of the elements around and start from the highest to the lowest.
• start: an integer from which to start numbering the elements of the list. It will always be an Arabic number (1, 2, 3…) even if the numbering used in the list is of another type (letters or Roman numerals). For example, to start numbering from the letter “d” or from the Roman numeral IV, you would have to use start="4".
• type: select the type of numbering from the list:
  • a for lowercase letters
  • A for uppercase letters
  • i for lowercase Roman numerals
  • I for uppercase Roman numerals
  • 1 for Arabic numbers (default value)

As in the <ul>, the numbering of the <ol> can be controlled with the CSS property list-style-type, which is recommended unless it is very important to respect the numbering, as in the case of legal texts or technical documents.

The <li> have a value attribute that only has meaning when it is a child of an <ol>. It is used to establish the number that will serve as the indicator for the element, and from which subsequent elements will count. As in the start attribute of <ol>, an Arabic number will always be used regardless of the type of indicators that are being used in the list (letters or Roman numerals).

The <ol> and <ul> have an implicit ARIA role list, and the <li> listitem.

• Type: block / block / list-item
• Self-closing: No / No / No
• Semantic value: No / No / No

Definition and example <ol> - Definition and example <ul> - Definition and example <li> | Support <ol> - Support <ul>