How to create an ordered list in HTML5?

To create an ordered list in HTML5, use the

and <li> tags, 1. Use
to define the ordered list, and use <li> to represent each item internally. 2. You can specify the starting number through the start property, 3. Set the number type such as numerals, letters or Roman numerals through the type property. 4. It is recommended to use the list-style-type of CSS or a custom counter to achieve more flexible style control to separate structures and styles.



Creating an ordered list in HTML5 is simple. You only need to use the <ol></ol> tag and then nest the <li> tag to represent each item. It will be numbered by default, but the numbering style can also be modified through CSS.



Create basic ordered lists using <ol></ol> and <li>

Ordered lists are defined using the <ol></ol> (abbreviation of ordered list) tag, and each list item is wrapped with <li> (list item). for example:

 <ol>
  <li>Step 1: Prepare the materials</li>
  <li>Step 2: Mix raw materials</li>
  <li>Step 3: Baking and forming</li>
</ol>

The list written in this way will be automatically added with a number and will be incremented from 1. This is the most basic and common usage.



If you want the number to start with a specific number, you can add the start attribute:

 <ol start="5">
  <li>Step 5: Check the finished product</li>
  <li>Step 6: Package and shipment</li>
</ol>

This will start with 5.



Set numbering type through type attribute

By default, ordered lists use Arabic numerals (1, 2, 3...), but you can also change the numbering style via type attribute:

<li> type="1" : number (default)<li> type="a" : lowercase English letters<li> type="A" : capital letters<li> type="i" : lowercase Roman numeral<li> type="I" : capital Roman numeral

For example:

 <ol type="A">
  <li>Option A</li>
  <li>Option B</li>
  <li>Option C</li>
</ol>

The display effects are A, B, and C.

It should be noted that type attribute is still valid in HTML5, but in some modern development practices, it is recommended to use CSS to control numbering styles because this can better separate structures and styles.

Use CSS to control numbering styles (more flexible)

Although HTML provides type attributes, if you need more complex numbering styles, such as bracketed numbers (1., 2., 3.), or custom prefixes, it is recommended to use list-style-type attribute of CSS.

For example:

 <ol style="list-style-type: lower-roman;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

This can be displayed as i, ii, iii.

You can also implement more advanced styles in combination with custom CSS counters, such as:

 ol {
  counter-reset: my-counter;
  list-style: none;
}

ol li::before {
  counter-increment: my-counter;
  content: ""th" counter(my-counter) "step:";
}

In this way, the formats such as "Step 1" and "Step 2" will be displayed before each list item.

Basically that's it. Creating an ordered list is not complicated in itself, but you need to choose the appropriate method according to the scene, such as whether semantics are required, whether style customization is required, etc.

The above is the detailed content of How to create an ordered list in HTML5?. For more information, please follow other related articles on the PHP Chinese website!