List Tag : Ordered List in HTML

The ordered list is used to group a set of related items in a specific order. The ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default. Example of Ordered list :
<!DOCTYPE html>
<html>
   <body>
	<h1>Web Technology</h1>
	<ol>
	    <li>HTML</li>
	    <li>CSS</li>
	    <li>Javascript</li>
	    <li>PHP</li>
	    <li>Mysql</li>
	</ol>
   </body>
</html>
Output :


Web Technology

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql


Attribute of Ordered List <ol> : The <type> attribute is used in the <ol> tag, which defines the type of the list items sequence (number or char). The values used in type attribute are :

type="1"  :  The list items will be numbered with numbers. This is the default value.
type="A"  :  The list items will be numbered with uppercase letters.
type="a"  :  The list items will be numbered with lowercase letters.
type="I"  :  The list items will be numbered with uppercase roman numbers.
type="i"  :  The list items will be numbered with lowercase roman numbers

Example :
<!DOCTYPE html>
<html>
   <body>
	<h1>Numbers :</h1>
	<ol type="1">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
	<h1>Uppercase Letters :</h1>
	<ol type="A">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
	<h1>Lowercase Letters :</h1>
	<ol type="a">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
	<h1>Uppercase Roman Numbers :</h1>
	<ol type="I">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
	<h1>Lowercase Roman Numbers :</h1>
	<ol type="i">
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
   </body>
</html>
Output :


Numbers :

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql

Uppercase Letters :

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql

Lowercase Letters :

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql

Uppercase Roman Numbers :

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql

Lowercase Roman Numbers :

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql


By default, an ordered list will start counting from 1. At here we can also control the list counting by start attribute. Example :
<!DOCTYPE html>
<html>
   <body>
	<h1>Web Technology</h1>
	<ol start=100>
		<li>HTML</li>
		<li>CSS</li>
		<li>Javascript</li>
		<li>PHP</li>
		<li>Mysql</li>
	</ol>
   </body>
</html>
Output :


Web Technology

  1. HTML
  2. CSS
  3. Javascript
  4. PHP
  5. Mysql




Next Topic :