Home HTML Tutorial for beginners 21 HTML Ordered List

21 HTML Ordered List

19
0

HTML ordered list can also be called as HTML numbered list. An ordered list starts with <ol> tag and each list item starts with <li> tag. The list items will be marked with numbers or letters.

SYNTAX :

<ol type="numbering style">

<li>....

<li>....

.....

</ol>

The default numbering style is 1,2,3 is type attribute is not mentioned. The type attribute is optional. We can specify 5 different type of values for type attribute as below.

1 This is the default style. The list items are numbered with 1,2,3 ….
I The list items are numbered with uppercase roman numbers.
i The list items are numbered with lowercase roman numbers.
A The list items are numbered with uppercase alphabets
a The list items are numbered with lowercase alphabets

The Css list-style-type property can also be used to specify the type of bullet. The example for this is as below :

<ol style="list-style-type:A;">

We will write the below code in myskills.html page, after h1 tag.

<ol>

<li> HTML

<li> CSS

<li> Java Script

<li> WordPress

</ol>

The closing tag for <li> is optional but it is a good practice to write those. So we will write the above code again as below.

<ol>

<li> HTML </li>

<li> CSS </li>

<li> Java Script </li>

<li> WordPress </li>

</ol>

The numbering of the list items may not be visible, because these are hidden inside the boundary. So we will use padding for ol tag with in our style tag. write the below code with in style tag to provide ol tag a padding of 40px.

ol {padding:40px;}

Check your progress 

Q) The ordered list starts with a ___ tag.

  • ul
  • li
  • ol
  • None of these

Q) The numbered list starts with a ___ tag.

  • ul
  • ol
  • nl
  • None of these

Q) HTML5 does not support ordered list.

  • True
  • False

Q) TYPE attribute is compulsory for an ordered list.

  • True
  • False

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here