× Introduction HTML Editors Web Components Headings Paragraph Attributes Entities Images Comments Formatting Links File Paths Book Marks Image Links Unordered Lists Ordered Lists Tables Forms Other Form Elements Semantic tags Media Div and Span Examples Projects eBooks





☰







HTML Ordered Lists

In this tutorial you will learn specifying lists of information by Ordered Lists.

HTML Ordered Lists

If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. This list is created by using <ol> tag. The numbering starts at one and is incremented by one for each successive ordered list element tagged with <li>.

Example:   Try It

<ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
</ol>

Result:

  1. Beetroot
  2. Ginger
  3. Potato
  4. Radish


Ordered List Type attribute:

The type attribute of the <ol> tag, defines the type of the list item marker:

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example:   Try It

<ol type = "i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Result:

  1. Coffee
  2. Tea
  3. Milk


Description List or Definition List

A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.

Example:   Try It

<dl>
<dt>What is HTML?</dt>
<dd>The HyperTextMarkup Language</dd>
<dt>What is it used for?</dt>
<dd>Web page structure.</dd>
</dl>

Result:

What is HTML?
The HyperTextMarkup Language
What is it used for?
Web page structure.

Practice exercise:

1.Write an html code to display the web page as follows. View


Sri Hari Book Store

Mission

"Sriharibookstore.com is committed to bringing the most convenient, easy and secure shopping experience on the web."

Products

  1. 10 Million Books across 20+ Languages
  2. Audio Books
  3. Gadgets & Accessories
  4. Toys
  5. Electronics
  6. Mobiles & Tablets Accessories
  7. Health Care Devices

2.Write an html code to display the web page as follows. View


Sri Ramanuja e-Patashala

New Media and Web Design

Sri Ramanuja Media Design will bring your company’s Web presence to the next level. We offer a comprehensive range of services .

Courses

  1. Arduino Programming
  2. Scratch Programming
  3. Web Dvelopment
    1. HTML
    2. CSS
    3. Javascript
  4. Python Programming