Learn the Front-end Beta Search

<ol>

Draft

Definition

The <ol> HTML element is used to create an ordered list, which represents a list of items that are ordered or numbered. Each item in the list is represented by the <li> (list item) element.

Here’s an example of how to use the <ol> element:

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

In this example, the <ol> element wraps three <li> elements, each representing an item in the ordered list. By default, the list items will be numbered sequentially, starting from 1.

You can also use different types of numbering for ordered lists by specifying the type attribute on the <ol> element. Here are some common type attribute values:

  • type="1" (default): Numeric numbering (1, 2, 3, …)
  • type="A": Uppercase alphabetical numbering (A, B, C, …)
  • type="a": Lowercase alphabetical numbering (a, b, c, …)
  • type="I": Uppercase Roman numeral numbering (I, II, III, …)
  • type="i": Lowercase Roman numeral numbering (i, ii, iii, …)
<ol type="A">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

In this example, the ordered list will be displayed with uppercase alphabetical numbering.

The <ol> element can also be nested to create hierarchical or nested lists. You can simply include another <ol> or <ul> element within an <li> element to create the nested structure.

<ol>
  <li>First item</li>
  <li>
    Second item
    <ol>
      <li>Nested item 1</li>
      <li>Nested item 2</li>
    </ol>
  </li>
  <li>Third item</li>
</ol>

In this example, the second item in the list contains a nested ordered list.

By using the <ol> element, you can create structured and ordered lists with different numbering styles. The list items within the <ol> element are automatically numbered, providing a clear and organized representation of information.

Related posts