The html ordered list tags are used to list items in an ordered sequence.
Here is a basic example. First of all on line 9 we add the opening <ol> tag and closing </ol> tag.

On line 10 inside the ‘ol‘ tags we add an opening <li> and closing </li> tag. In between the ‘li’ tags the text ‘item one’ is also added.

HTML Ordered List Tags. List with one item.
A html ordered list with one item.

On lines 11, 12 and 13 we add another three sets of ‘li’ tags. Inside each set of ‘li’ tags we add the list item text as shown below.

HTML Ordered List Tags. List with four items.

CSS styles can change the size of the text and the line height of ‘li’ elements. On line 6 a ‘li’ selector is placed between the ‘style’ tags. On line 7 the ‘line-height’ for the ‘li’ elements is given a value of ‘2em’. On line 8 the ‘font-size’ for the ‘li’ elements are given a also given a value of ‘2em’. The ’em’ is a ‘css unit‘. The ’em’ unit expresses length. A value of ‘2em’ will increase the current value by two times. Effectively doubling the amount.

HTML Ordered List Tags. Line height and font size doubled.
Line height and font size doubled.

Below on line 6 an ‘ol’ selector is added. Lastly the ‘list-style-type’ is altered to ‘upper-latin’ on line 7.

HTML Ordered List Tags. The list-style-type changed to upper-latin.
A list-style-type of upper-latin instead of decimal.

HTML Ordered List Tags – ol

In the earlier examples no ‘list-style-type’ was declared for the ‘ol’ element. By default the browser sets a ‘list-style-type’ value of ‘decimal’ from the browsers stylesheet. The browser stylesheet is loaded behind the scenes. By setting a ‘list-style-type’ of ‘upper-latin’ we have overridden the ‘list-style-type’ value of ‘decimal’set by the browsers css.

HTML5 logo. HTML Ordered List Tags

CSS logo. HTML Ordered List Tags

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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