Updates
  • Starting New Weekday Batch for Full Stack Java Development on 15 September 2025 @ 02:00 PM to 04:00 PM
  • Starting New Weekday Batch for MERN Stack Development on 29 September 2025 @ 04:00 PM to 06:00 PM
Join Course

Ordered List

• Ordered lists in HTML are used to create lists with sequential numbering or letters.
• To create an ordered list, you use the <ol> tag as the container and <li> tags for each list item.
• The <ol> tag stands for "ordered list," and the <li> tag stands for "list item".
• Each list item is automatically numbered or lettered in ascending order, providing a clear sequence to the information.
• You can use CSS to customize the appearance of the numbering or lettering, such as changing the style, color, or starting value.

            
<!DOCTYPE html>
<html>
   <head>
      <title>HTML Ordered List</title>
   </head>
   <body>
      <h2>Ordered List</h2>
      <ol>
         <li>Tomato</li>
         <li>Potato</li>
         <li>Onion</li>
         <li>Garlic</li>
      </ol>
   </body>
</html>
        

Type and start attribute in Ordered list

• The type attribute in ordered lists (<ol>) is used to specify the numbering or lettering style of list items.
• Common values for type are "1" (for numerical), "A" (for uppercase letters), "a" (for lowercase letters), "I" (for uppercase Roman numerals), and "i" (for lowercase Roman numerals).
• The start attribute allows you to set the starting value for the numbering or lettering in an ordered list.
• For example, <ol type="A" start="3"> will create an ordered list starting with "C" as the first item.
• You can combine both attributes to create custom ordered lists with specific numbering or lettering styles and starting values.

            
<!DOCTYPE html>
<html>
   <head>
      <title>HTML Ordered List</title>
   </head>
   <body>
      <h2>Type and start attribute Ordered List</h2>
      <ol type="A" start="3">
         <li>Tomato</li>
         <li>Potato</li>
         <li>Onion</li>
         <li>Garlic</li>
      </ol>
   </body>
</html>