Loading Please Wait...

Logo Lynxsia IT Solutions

HTML Ordered Lists

Ordered Lists (Number Lists)

Ordered lists are defined by <ol> tag and each list item is defined by <li> tag.

By default each item is marked with numbers (starting from 1) but this can be change by CSS style.

Let's see with some example
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
              </ol>
            </body>
          </html>
        
      
List Item Markers

We can define list item marker by type attribute. The attribute have the following value

  • type="1" Sets the marker with numbers(Default)
  • type="A" sets the marker with uppercase letters
  • type="a" sets the marker with lowercase letters
  • type="I" sets the marker with uppercase roman numbers
  • type="i" sets the marker with lowercase roman numbers
Number Marker
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol type="1">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
Uppercase Letters
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol type="A">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
Lowercase Letters
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol type="a">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
Uppercase Roman
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol type="I">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
Lowercase Roman
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol type="i">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
Set Marker With CSS

We can define list item marker by list-style-type CSS property as well. The property :have the following value

  • list-style-type: armenian; Sets the marker with Armenian numbers
  • list-style-type: cjk-ideographic; Sets the marker with plain ideographic numbers
  • list-style-type: decimal; Sets the marker with numbers(Default)
  • list-style-type: decimal-leading-zero; Sets the marker with numbers with leading zero that is 00, 01, 02, etc.
  • list-style-type: georgian; Sets the marker with Georgian numbers
  • list-style-type: hebrew; Sets the marker with Hebrew numbers
  • list-style-type: hiragana; Sets the marker with Hiragana numbers
  • list-style-type: hiragana-iroha; Sets the marker with Hiragana Iroha numbers
  • list-style-type: katakana; Sets the marker with Katakana numbers
  • list-style-type: katakana-iroha; Sets the marker with Katakana Iroha numbers
  • list-style-type: lower-alpha; Sets the marker with lowercase letters
  • list-style-type: upper-alpha; Sets the marker with uppercase letters
  • list-style-type: lower-greek; Sets the marker with lowercase Greek
  • list-style-type: upper-greek; Sets the marker with uppercase Greek
  • list-style-type: lower-latin; Sets the marker with lowercase Latin
  • list-style-type: upper-latin; Sets the marker with uppercase Latin
  • list-style-type: lower-roman; Sets the marker with lowercase Roman
  • list-style-type: upper-roman; Sets the marker with uppercase Roman
Armenian Marker
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol style="list-style-type: armenian;">
                <li>Item 1</li>
                <li>Item 2</li>
              </ol>
            </body>
          </html>
        
      
List Counting

By default list counting start from 1 but you can change it from start attribute.

Let's see with some example
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol start="13">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
              </ol>
            </body>
          </html>
        
      
Nested List

We can define define nested list (lists inside another list).

Let's see with some example
					 
        
          <!DOCTYPE html>
          <html>
            <body>
              <ol>
                <li>Item 1</li>
                <li>Item 2
                  <ol>
                    <li>Item 2.1</li>
                    <li>Item 2.2</li>
                  </ol>
                </li>
              </ol>
            </body>
          </html>
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved