Home
HTML

Learn Basic HTML Complete Course part 13

2 min read

HTML Ordered List | HTML Numbered List


HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list:

  • Numeric Number (1, 2, 3)
  • Capital Roman Number (I II III)
  • Small Roman  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.


TypeDescription
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.

Start attribute

The start attribute is used with ol tag to specify from where to start the list items.

<ol type="1" start="5"> : It will show numeric values starting with "5".

<ol type="A" start="5"> : It will show capital alphabets starting with "E".

<ol type="a" start="5"> : It will show lower case alphabets starting with "e".

<ol type="I" start="5"> : It will show Roman upper case value starting with "V".

<ol type="i" start="5"> : It will show Roman lower case value starting with "v".


Reversed Attribute:

This is a Boolean attribute of HTML tag, and it is new in HTML5 version. If you use the reversed attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1).

Orderlist Example

<!doctype html>
<html>
    <body>
<h4>Order List</h4>
<ol> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr> 

<h4>Order List of type "I"</h4>
<ol type="I"> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr>

<h4>Order List of type "i"</h4>
<ol type="i"> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr> 

<h4>Order List of type "A"</h4>
<ol type="A"> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr>

<h4>Order List of type "a"</h4>
<ol type="a"> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr> 

<h4>Order List by predefine starting</h4>
<ol type="i" start="5"> 
<li>HTML</li> 
<li>Java</li> 
<li>JavaScript</li> 
<li>SQL</li> 
</ol><hr>

<h4>Reverse order list</h4>
<ol reversed> 
        <li>HTML</li> 
        <li>Java</li> 
        <li>JavaScript</li> 
        <li>SQL</li> 
        </ol> 
    </body>
</html>

output:

Order List

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

Order List of type "I"

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

Order List of type "i"

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

Order List of type "A"

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

Order List of type "a"

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

Order List by predefine starting

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

Reverse order list

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


You may like these posts

  • Learn Basic HTML Complete Course part 9
    HTML AnchorThe HTML anchor tag defines a hyperlink that links one page to another page. It can create hyperlink to other web page as well as files, location, or any URL. …
  • Learn Basic HTML Complete Course part 3
    HTML TagsHTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML co…
  • Learn Basic HTML Complete Course part 18
    HTML iframesHTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame.Iframe SyntaxAn HTML iframe is defined…
  • Learn Basic HTML Complete Course part 11
    HTML TableHTML table tag is used to display data in tabular form (row * column). There can be many columns in a row.We can create a table to display data in tabular form, using <…
  • HTML Complete Course A to Z By TopBlog Pk
    In this article, I am going to share some of the best, free online courses to learn Web Development using HTML and CSS. If you are new to web development space then you can use the…
  • Learn Basic HTML Complete Course part 22
    HTML HeadThe HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag.The head of an HTML document …

Post a Comment