Tuesday, August 27, 2019

HTML Lists


   I hope you read my HTML font and text formatting tags articles.


   Let's learn how to list the thing in HTML. 


Lists in HTML 

   Lists are used to organize items in the browser window. there are two type of list.


      Unordered list :

   It can be also called Bulleted list. That list items with no particular order.
  • An unordered list starts with the <ul> tag.
  • Each list item starts with the <li> tag.

               Example code
                    <ul>
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ul>

   It has 4 type of unordered list symbols as disc,circle,square and none
  • disc : Sets the list item marker to a bullet. It is the default one.

               Example code
                    <ul type="disc">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ul>


  • circle : Sets the list item marker to a circle

               Example code
                    <ul type="circle">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ul>
  • square : Sets the list item marker to a square

               Example code
                    <ul type="square">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ul>
  • none : The list items will not be marked

               Example code
                    <ul type="none">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ul>


     Ordered list :

   It can be also called numberd list. It has proper order.

  • An ordered list starts with the <ol> tag. 
  • Each list item starts with the <li> tag.

               Example code
                    <ol>
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                   </ol>

   It has 5 type of unodered list symbols as numbers, uppercase letters, lowercase letters,uppercase roman numbers and lowercase roman numbers.


  • type="1" : The list items will be numbered with numbers. It is the default one.

               Example code
                    <ol type="1">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ol>
  • type="A" : The list items will be numbered with uppercase letters

               Example code
                    <ol type="A">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ol>
  • type="a" : The list items will be numbered with lowercase letters

               Example code
                    <ol type="a">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ol>
  • type="I" : The list items will be numbered with uppercase roman numbers

               Example code
                    <ol type="I">
                         <li>Coffee</li>
                         <li>Tea</li>
                         <li>Milk</li>
                    </ol>
  • type="i" : The list items will be numbered with lowercase roman numbers

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

   HTML also supports description list. It means a list of terms, with a description of each term.

  • <dl> tag : defines the description list
  • <dt> tag : defines the term (name)
  • <dd> tag : describes each term.

               Example code
                    <dl>
                         <dt>Coffee</dt>
                              <dd>- black hot drink</dd>
                         <dt>Milk</dt>
                              <dd>- white cold drink</dd>
                    </dl>

   An ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute

  If you think you want to start counting from 50.                
               Example code
                   <ol start="50">
                        <li>Coffee</li>
                        <li>Tea</li>
                        <li>Milk</li>
                    </ol>

   I think now you can create the list in web page.


   See you soon with the HTML table.


5 comments: