<ol> : Ordered List element

by

Introduction

The <ol> (Ordered List) element in HTML is used to create a list of items where the order or sequence of items is important. Each item in the list is represented by the <li> (List Item) element.

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

In this example, the numbers 1, 2, and 3 will be automatically generated by the browser, indicating the order of the items. The default rendering is usually as a numbered list.

You can also use attributes with the <ol> element to customize its appearance or behavior.

# Type Attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol type="A">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

# Start Attribute:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol start="5">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
  </ol>  
</body>
</html>

Output :

The <ol> element is often used in conjunction with the <li> element to create structured and ordered lists on web pages. It is commonly employed in instructional content, recipes, steps of a process, or any scenario where the order of items is significant.

Leave a Comment