• Skip to main content
  • Skip to primary sidebar
  • Skip to secondary sidebar
  • Skip to footer

Computer Notes

Library
    • Computer Fundamental
    • Computer Memory
    • DBMS Tutorial
    • Operating System
    • Computer Networking
    • C Programming
    • C++ Programming
    • Java Programming
    • C# Programming
    • SQL Tutorial
    • Management Tutorial
    • Computer Graphics
    • Compiler Design
    • Style Sheet
    • JavaScript Tutorial
    • Html Tutorial
    • Wordpress Tutorial
    • Python Tutorial
    • PHP Tutorial
    • JSP Tutorial
    • AngularJS Tutorial
    • Data Structures
    • E Commerce Tutorial
    • Visual Basic
    • Structs2 Tutorial
    • Digital Electronics
    • Internet Terms
    • Servlet Tutorial
    • Software Engineering
    • Interviews Questions
    • Basic Terms
    • Troubleshooting
Menu

Header Right

Home » Html » Tutorial » HTML OL – Ordered lists
Next →
← Prev

HTML OL – Ordered lists

By Dinesh Thakur

An Ordered list is one that is numbered and may also be used to indicate sequential form of information. <ol> and </ol> are opening and closing tags for an ordered list respectively. The code used for ordering the List as below:

<html> 
  <head><title>ordered list without numbers</title></head> 
    <body> 
        software testing methods 
        <ol> black box testing 
             white box testing 
             control structure testing 
        </ol> 
    </body> 
</html>

We observe from above code that text is indented during the actual printing of the list. However, the listed items have not been printed on separate lines. HTML does not recognize line breaks, unless it is told by using <p> or <br> tags. The list item tag <li> is used to remove this problem. It can be noticed in the code as shown below:

<html> 
     <head><title>ordered list with numbers</title></head> 
     <body> 
        software testing methods 
        <ol> 
           <li> black box testing 
           <li> white box testing 
           <li> control structure testing 
        </ol> 
     </body> 
</html>

When the browser encounters the tag <li> for each item, it starts a new line, indents and adds a number. Thus we get the output as seen in the above figure1.15. Ordering is typically rendered by a numbering scheme, using Arabic numbers, letters or Roman numerals.

By default numbered lists use Arabic numerals (1, 2, 3, 4). So by writing <ol type = a> instead of just <ol> we have overridden the default & created a numbered list which uses alphabets for numbering. The code shows the ol listing as:

<html> 
   <head><title>ordered list with numbers</title></head> 
   <body> 
      software testing methods 
      <ol type= a> 
        <li> black box testing 
        <li> white box testing 
        <li> control structure testing 
      </ol> 
  </body> 
</html>

The values & Styles for the type attribute are given below:

Value              Style                            Example

1 (default)         Arabic                          1, 2, 3, 4, ….

a                      Lower case alpha         a, b, c, d, ….

A                     Uppercase alpha           A, B, C, D….

I                       Uppercase Roman        I, II, III, …..

i                       Lower case Roman       i, ii, iii,…….

The start attribute: This attribute is used to override default list numbering when a list is divided into multiple parts. The use of start attribute can be shown in the code as.

<html>

    <head><title>ordered list with numbers</title></head> 
      <body> impact printers 
         <ol> 
               <li> dot matrix 
               <li> chain printer 
               <li> drum printer 
               <li> ink jet printer 
        </ol> <p>non-impact printers 
              </p> <olstart=5> 
              <li> laser printer 
              <li> electrostatic printer 
              <li> wax printer 
        </ol> 
    </body> 
</html> 

The use of <OL start = 5> instead of <OL> makes the browser understand that the numbering of the second list is to start from 5 & not 1 (The default value)

Nested Lists

A nested list is a list within a list that can extend up to several levels. One of the most common places where we can see a nested list is in the contents of a book. To create a nested list a new set of ordered list tags is to be included within the current list tags. The code shows the insertion of a new list within the original list i.e. (nested list).

<html> 
    <head><title>nested list </title></head> 
     <body> type of printers 
       <ol type=a> 
            <li> impact printers 
               <ol type=1> 
                  <li>character printers 
                    <ol type=i> 
                      <li> dot matrix 
                      <li> ink jet printer 
                      <li> letter quality 
                    </ol> 
                       <li>line printers 
                           <ol type=i> 
                             <li>chain printers 
                             <li>drum printers 
                           </ol> </ol> 
                               <li>non-impact printers 
                                  <ol type= a> 
                                    <li> laser printer 
                                    <li> electrostatic printer 
                                    <li> wax printer 
                                    <li> ink jet printer 
                                  </ol> </ol> 
    </body> 
</html> 

 

You’ll also like:

  1. HTML UL – Unordered lists – Bulleted lists
  2. HTML Lists
  3. CSS Styling Lists
  4. What is Circular Linked Lists
  5. What is Linked Lists
Next →
← Prev
Like/Subscribe us for latest updates     

About Dinesh Thakur
Dinesh ThakurDinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular Computer Notes blog. Where he writes how-to guides around Computer fundamental , computer software, Computer programming, and web apps.

Dinesh Thakur is a Freelance Writer who helps different clients from all over the globe. Dinesh has written over 500+ blogs, 30+ eBooks, and 10000+ Posts for all types of clients.


For any type of query or something that you think is missing, please feel free to Contact us.


Primary Sidebar

HTML Tutorials

HTML Tutorials

  • HTML - Home
  • HTML - History
  • HTML - Lists
  • HTML - Unordered List
  • HTML - Ordered Lists
  • HTML - Frame Tag
  • HTML - Input Type
  • HTML - Input Type="File"
  • HTML - Input Type="Hidden"
  • HTML - Form Tag
  • HTML - Img Tag
  • HTML - Anchor Tag
  • HTML - Table Tag
  • HTML - Span Tag
  • HTML - Button Tag
  • HTML - Doctype
  • HTML - Fieldset Tag
  • HTML - Links Tag
  • HTML - Drop Down Menu
  • HTML - Accesskey
  • HTML - Cgi
  • HTML - Post Method
  • HTML - Background Image
  • HTML - Text Area
  • HTML - TabIndex
  • HTML - Align Center
  • HTML - Address Tag
  • HTML - Thumbnails
  • HTML - Marquee Tag
  • HTML - Line Break
  • HTML - Blockquote
  • HTML - HR Tag
  • HTML - Image Center
  • HTML - Center Text
  • HTML - Link CSS
  • HTML - Html Vs Html5

Other Links

  • HTML - PDF Version

Footer

Basic Course

  • Computer Fundamental
  • Computer Networking
  • Operating System
  • Database System
  • Computer Graphics
  • Management System
  • Software Engineering
  • Digital Electronics
  • Electronic Commerce
  • Compiler Design
  • Troubleshooting

Programming

  • Java Programming
  • Structured Query (SQL)
  • C Programming
  • C++ Programming
  • Visual Basic
  • Data Structures
  • Struts 2
  • Java Servlet
  • C# Programming
  • Basic Terms
  • Interviews

World Wide Web

  • Internet
  • Java Script
  • HTML Language
  • Cascading Style Sheet
  • Java Server Pages
  • Wordpress
  • PHP
  • Python Tutorial
  • AngularJS
  • Troubleshooting

 About Us |  Contact Us |  FAQ

Dinesh Thakur is a Technology Columinist and founder of Computer Notes.

Copyright © 2023. All Rights Reserved.