86 HTML - Ordered Lists

Ordered Lists

An ordered list is used to display a collection of items that have a specific order or sequence. For instance, we can use an ordered list to show the steps of a recipe, the ranking of a leaderboard, or the chronological order of events as shown in the below figure:

Ordered Lists

Creating Ordered Lists

To create an ordered list in HTML, we use the <ol> tag and nest <li> tags inside it. Each <li> element represents one item in the list. The numbering starts with 1 and is incremented by one for each successive ordered list element tagged with <li>. Like an unordered list, it also allows us to change the numbering style using the type attribute of the <ol> element.

Example

The following example demonstrates creating ordered lists in HTML:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Ordered List</title>
</head>
<body>
   <ol>
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ol>
</body>
</html>

If you click on Edit & Run the above example displays an ordered list.

Ordered List - type Attribute

The type attribute for the <ol> tag is used to specify the type of marker for the ordered list in HTML. By default, the type of list numbering is numbers starting with 1, 2, 3, and so on. You can change the type of numbers by using any of the values given below:

S.NoValue & Description
1

1

It is the default type of marker.

2

I

List items will be displayed with roman number marker.

3

A

It will set the marker to upper case alphabets.

4

a

It sets the marker to lower case alphabets.

Example

In the following example, we are using all values of the type attribute:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Ordered List</title>
</head>
<body>
   <p>Ordered list with counting numbers:</p>
   <ol type="1">
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ol>
   <p>Ordered list with roman numbers:</p>
   <ol type="I">
      <li>Aman</li>
      <li>Vivek</li>
      <li>Shrey</li>
      <li>Ansh</li>

   </ol>
   <p>Ordered list with upper case alphabets:</p>
   <ol type="A">
      <li>Bus</li>
      <li>Train</li>
      <li>Plane</li>
      <li>Boat</li>
   </ol>
   <p>Ordered list with lower case alphabets:</p>
   <ol type="a">
      <li>Item One</li>
      <li>Item Two</li>
      <li>Item Three</li>
      <li>Item Four</li>
   </ol>
</body>
</html>

The above example displays four ordered lists with counting numbers, roman numbers, and alphabets.

Ordered List - start Attribute

By default, the numbering starts with 1, but you can change it by using the start attribute with the <ol> tag. The style attribute defines the starting numbers of the ordered list.

Syntax

The following are the different syntaxes (use cases) to define number types and the initial (starting) number for the ordered list:

<ol type="1" start="4"> - Numerals starts with 4.
<ol type="I" start="4"> - Numerals starts with IV.
<ol type="i" start="4"> - Numerals starts with iv.
<ol type="a" start="4"> - Letters starts with d.
<ol type="A" start="4"> - Letters starts with D.

Example

Following is an example where we used <ol type="i" start="4" >:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Ordered List</title>
</head>
<body>
   <ol type="i" start="4">
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ol>
</body>
</html>

Styling Ordered List

Styling ordered lists with CSS allows customization of the appearance to match the design preferences of a website. The CSS styles can target both the list itself (<ol>) and the list items (<li>).

Example

Below is the program example that includes all the CSS styling for ordered list:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Styled Ordered List</title>
   <style>
      /* Basic Styling */
      ol {
         color: navy;
         font-family: 'Arial', sans-serif;
         margin-left: 20px;
      }
      li {
         font-size: 16px;
         margin-bottom: 8px;

      }
      /* Changing Numbering Style */
      ol.roman {
         list-style-type: upper-roman;
      }
      ol.letters {
         list-style-type: upper-alpha;
      }
      /* Adding Counters */
      ol.counter-list {
         counter-reset: my-counter;
      }
      ol.counter-list li {
         counter-increment: my-counter;
      }
      ol.counter-list li::before {
         content: counter(my-counter) '. ';
      }
      /* Changing Text Color on Hover */
      li.hover-effect:hover {
         color: #e44d26;
      }
   </style>
</head>
<body>
   <h1>Styled Ordered List Example</h1>
   <h2>Basic Styling</h2>
   <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ol>
   <h2>Changing Numbering Style</h2>
   <ol class="roman">
      <li>Roman I</li>
      <li>Roman II</li>
      <li>Roman III</li>
   </ol>
   <ol class="letters">
      <li>Letter A</li>
      <li>Letter B</li>
      <li>Letter C</li>
   </ol>
   <h2>Adding Counters</h2>
   <ol class="counter-list">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
   </ol>
   <h2>Changing Text Color on Hover</h2>
   <ol>
      <li class="hover-effect">Hover Effect 1</li>
      <li class="hover-effect">Hover Effect 2</li>
      <li class="hover-effect">Hover Effect 3</li>
   </ol>
</body>
</html>

The program creates a styled HTML document with ordered lists. It includes basic styling, changes numbering styles to Roman and letters, adds counters to items, and changes text color on hover.

Nested Ordered Lists

HTML allows nesting of lists; you can create nested ordered lists to display a list of items inside an item of the outer list element.

Note: You can also change the type of outer or inner lists. In the below example, the main list has decimal numbers, the list of the second list item has lowercase roman numbers, and the list of the third list item has uppercase roman numbers. You can also define the starting number as per your requirement.

Example

The following example deonstartes the use of nested ordered lists:

<!DOCTYPE html>
<html>
<head>
  <title>Nested Ordered Lists</title>
</head>
<body>
<h2>Example of Nested Ordered Lists</h2>
<ol>
  <li>Fruits
    <ol>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ol>
  </li>
  <li>Vegetables
    <ol type="i">
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ol>
  </li>
  <li>Dairy
    <ol type="I">
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ol>
  </li>
</ol>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

79 HTML - Tables

Image
HTML tables   represent data, such as text, images, etc. in a structured format with rows and columns. HTML tables  offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development. Why HTML Tables are Used? HTML tables are used for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include − Structuring Data  − Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information. Comparative Presentation  − When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format. Tabular Data Representation  − Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables. Creating an HTML Table You can create a table in HTML by using t...
Read more