HTML Ordered List

Introduction

In HTML, we can create an ordered list by using the <ol> tag. The ordered list is a list of items numbered in a particular order. The <ol> tag is used to create the ordered list and the <li> tag is used to define each item in the list.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/BasicStructureGroup -.-> html/head_elems("`Head Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/lists_desc("`Lists and Descriptions`") subgraph Lab Skills html/basic_elems -.-> lab-70806{{"`HTML Ordered List`"}} html/head_elems -.-> lab-70806{{"`HTML Ordered List`"}} html/text_head -.-> lab-70806{{"`HTML Ordered List`"}} html/lists_desc -.-> lab-70806{{"`HTML Ordered List`"}} end

Set up the HTML file

In this step, we will create a basic HTML file and set up the <ol> tag. Open the "index.html" file and type the following code:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
    </ol>
  </body>
</html>

Add more items to the list

In this step, we will add more items to the ordered list. To do this, simply add more <li> tags between the opening and closing <ol> tags:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

Change the number type

In this step, we will change the type of numbering used in the ordered list. By default, the ordered list uses decimal numbering. However, we can change this to other number types, such as Roman numerals or letters. To change the type of numbering, use the type attribute in the <ol> tag. For example:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

In the above code, we've set the type attribute to I, which is upper-case Roman numerals.

Start numbering from a specific number

In this step, we will change the starting number of the ordered list items. By default, the first item in the ordered list starts with "1". However, we can change this to start from a specific number. To change the starting number, use the start attribute in the <ol> tag. For example:

<!doctype html>
<html>
  <head>
    <title>Ordered list Example</title>
  </head>
  <body>
    <h1>Ordered List Example</h1>
    <ol start="3">
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ol>
  </body>
</html>

In the above code, we've set the start attribute to 3, which means the first item in the ordered list will be numbered as "3".

Summary

In this lab, we learned how to create an ordered list in HTML using the <ol> tag. We also learned how to add items to the list, change the numbering type and start the numbering from a specific number. With this knowledge, we can create professional-looking lists on our web pages.