Header Ads

HTML Order List UnOrder List Multilevel List Reversed List

March 07, 2022

                                                  CHAPTER – 4

HTML Language has code you can use that allows you to make a “bulleted” , “numbered” list or definition list form. HTML offers three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contains 

1.    <ul>  Ordered list.

2.    <ol>  Unordered list.

3.     <dl> Definition list.

 

There are three different types of list tags. The <ol> (ordered list) , <ul> (unordered list) and Definition list. Ordered lists are lists that order items by numbers or roman numerals. Unordered lists are bulleted points that can have circles or squares instead of numbers. Each ordered and unordered list has <li> elements within it. The <li> tags display each list item.

 

Ordered List

 

This is the opening tag to tell the web browser the following content is to be contained in an ordered list. Now, you will need to add an <li> tag which stands for list item. After adding the list item tags and closing them our code will look like this. Don’t forget to close the tags </ol>.

Note : If <ol> tag is written without type then it will By default Order List is Numbered(1,2,3).

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

     <body>

<b>Computer Application Software</b>

      <ol>

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-Power Point</li>

         <li>Photoshop</li>

      </ol>

   </body>

  

</html>

 

 

The code  will produce the following result:

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Photoshop

The type Attribute

You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options 

<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

Following is an example where you used <ol type = "1">

<!DOCTYPE html>

<html>

    <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "1">

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

 

This will produce the following result:

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Powerpoint
  4. Internet

Example

Following is an example where we used <ol type = "I">

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "I">

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

 

This will produce the following result −

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Internet

Example

Following is an example where we used <ol type = "i">

<!DOCTYPE html>

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "i">

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

 

This will produce the following result –

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Internet

Example

Following is an example where we used <ol type = "A" >

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "A">

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

 

This will produce the following result −

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Internet

Example

Following is an example where we used <ol type = "a">

 

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "a">

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

This will produce the following result:

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Internet

The feature of start Attribute

You can use start attribute for <ol> tag to specify the starting point of numbering you need. Following are the possible options:

<ol type = "1" start = "2">     Numerals starts with 2.

<ol type = "I" start = "2">     Numerals starts with II.

<ol type = "i" start = "2">     Numerals starts with ii.

<ol type = "a" start = "2">     Letters starts with b.

<ol type = "A" start = "2">     Letters starts with B.

 

Example

Following is an example where we used <ol type = "i" start = "2" >

<html>

   <head>

      <title>HTML Ordered List</title>

   </head>

   <body>

<b>Computer Application Software</b>

      <ol type = "a" start=2>

         <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

      </ol>

   </body>

</html>

 

Computer Application Software

  1. Ms-Word
  2. Ms-Excel
  3. Ms-Power Point
  4. Internet


Reversing The Order

If in any case you want to show your numbers (or letters) in reverse order, then this is really easy too. This can be done by adding the word reversed into your Ordered List opening tag:

<ol reversed>

          <li>Ms-Word</li>

         <li>Ms-Excel</li>

         <li>Ms-PowerPoint</li>

         <li>Internet</li>

</ol>

The output of the code look like this:

4. Ms-Word

3. Ms-Excel

2. Ms-Power Point

1. Internet

 

Unordered List

 

This is the opening tag to tell the web browser the following content is to be contained in an Unordered list. Now, you will need to add an <li> tag which stands for list item. After adding the list item tags and closing them our code will look like this. Don’t forget to close the tags </ul>.

Note : If <ul> tag is written without type then it will By default Unordered List will assumed as disc.

The process is the same for the unordered list. The only difference is the opening and closing tag of the actual list. Don’t forget to close your tags or the lists will not display correctly. 

The type Attribute

You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is a disc. Following are the possible options 

    1. <ul type = "square">
    2. <ul type = "disc">
    3. <ul type = "circle">

 

<!DOCTYPE html>

<html>

    <head>

      <title>HTML Unordered List</title>

   </head>

    <body>

      <ul type = "square">

         <li>Mango</li>

         <li>Bananna</li>

         <li>Apple</li>

         <li>Orange</li>

      </ul>

   </body>

 

This will produce the following result:−

 


    Example

    Source Code For Unorder list disc you write like this <ul type = "disc">

    <!DOCTYPE html>

    <html>

       <head>

          <title>HTML Unordered List</title>

       </head>

        <body>

          <ul type = "disc">

             <li>Mango</li>

             <li>Bananna</li>

             <li>Apple</li>

             <li>Orange</li>

          </ul>

       </body>

     

    The Output of the above code result 

     


      Example

      Following is an example where we used <ul type = "circle">

      <!DOCTYPE html>

      <html>

          <head>

            <title>HTML Unordered List</title>

         </head>

          <body>

            <ul type = "circle">

               <li>Mango</li>

               <li>Bananna</li>

               <li>Apple</li>

               <li>Orange</li>

            </ul>

         </body>

       

      This will produce the following result:

      Multi-Level Numbering List in HTML


      You can create a multilevel list. This is achieved by embedding one list inside another list:

      <ul>

       <li>Computer Application Software</li>

                  <ol type=A>

                  <li>Ms-Office</li>

                              <ol type=i>

                                  <li>Ms-Word</li>

                                  <li>Ms-Excel</li>

                                  <li>Ms-Powerpoint</li>

                              </ol>

              <li>Accounting Software</li>

              </ol>

      <li>Computer Programming Languages</li>

      <ol type=i>

          <li>C Language</li>

          <li>C++ Language</li>

      </ol></ol>

      The output of the code look like this:

       


      You can use a combination of <ul> and <ol>. That may be useful if you want bullet points under a numbered list.

      <ol>

       <li>Computer Application Software</li>

      <ol type=A>

      <li>Ms-Office

      <ul type=circle>

      <li>Ms-Word

      <li>Ms-Excel

      <li>Ms-Powerpoint

      </ul>

      <li>Accounting Software

      </ol>

      <li>Computer Programming Languages</li>

      <ul type=square>

      <li>C Language

      <li>C++ Language

      </ul></ol>

      The output of the code look like this:

       


       

      HTML Definition Lists

      HTML supports a list style which is called Definition list where entries are listed like in a dictionary or encyclopedia. The definition list is the best way to represent data in way to present a glossary, list of terms, or other name value list.

      Definition List makes use of following three tags.

      •     <dl>  Defines the start of the definition list
      •     <dt>  A definition term
      •     <dd>  Term data definition
      •     </dl>  Defines the end of the definition list

      Example


      <!DOCTYPE html>

      <html>

          <head>

            <title>HTML Definition List</title>

         </head>

         <body>

            <dl>

               <dt><b>HTML</b></dt>

               <dd>This stands for Hyper Text Markup Language</dd>

               <dt><b>HTTP</b></dt>

               <dd>This stands for Hyper Text Transfer Protocol</dd>

            </dl>

         </body>

      </html>

        

      This will produce the following result :

      HTML

      This stands for Hyper Text Markup Language

      HTTP

      This stands for Hyper Text Transfer Protocol

       

      CHAPTER 1     CHAPTER 2    CHAPTER 32  CHAPTER 4    CHAPTER 5     

      CHAPTER 6   CHAPTER 7    CHAPTER 8    CHAPTER 9    CHAPTER 10


        Blog Disclaimer :

      This is a personal blog. Any views or opinions represent in this blog are web based information and personal teaching experience and belong solely to the blog owner. All contents provided on this blog is for informational purpose only. 

      Post a Comment

      No comments

      Subscribe to: Post Comments ( Atom )
      Powered by Blogger.