Html Ordered List

Html Ordered List

  • An Ordered List is also a list of items.
  • The List items are marked with numbers.
  • An Ordered List starts with the <ol> tag.
  • Each list item starts with the <li> tag.  Inside a list we can put paragraph, line breaks, images, links, other lists, etc.

HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. There can be different types of numbered list:

  • Numeric Number (1, 2, 3)
  • Capital Roman Number (I II III)
  • Small Romal Number (i ii iii)
  • Capital Alphabet (A B C)
  • Small Alphabet (a b c)

To represent different ordered lists, there are 5 types of attributes in <ol> tag.

Type Description
Type “1” This is the default type. In this type, the list items are numbered with numbers.
Type “I” In this type, the list items are numbered with upper case roman numbers.
Type “i” In this type, the list items are numbered with lower case roman numbers.
Type “A” In this type, the list items are numbered with upper case letters.
Type “a” In this type, the list items are numbered with lower case letters.

HTML Ordered List Example


Let’s see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type=”1″ because it is the default type.

ol type=”1″

Let’s see the example to display list in number.

<ol>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”I”

Let’s see the example to display list in roman number uppercase.

<ol type=“I”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”i”

Let’s see the example to display list in roman number lowercase.

<ol type=“i”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”A”

Let’s see the example to display list in alphabet uppercase.

 <ol type=“A”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

ol type=”a”

Let’s see the example to display list in alphabet lowercase.

<ol type=“a”>

<li>HTML</li>

<li>Java</li>

<li>JavaScript</li>

<li>SQL</li>

</ol>

Output:

  1. HTML
  2. Java
  3. JavaScript
  4. SQL

Code for Ordered List in html:

Html Ordered List
Html Ordered List Code


Output for Ordered List in html:

Html Ordered List
Html Ordered List Output



 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.