Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

HTML Lists



HTML Lists


In HTML we have two types of list available.

1. Unordered list

2.Ordered List

Unordered List


  • In HTML we use <ul> tag to declare unordered list .
  • Items start's with <li> tag.
  • By default list style is bullet type.



    •   
  
    <ul>
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>

</ul>


    list-style-type property

    By default unordered list style is bullets but we can change list style by using list-style-type property in style attribute.List style can be circle type,square or none. 


      
  
    <ul style="list-style-type:circle; ">
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>

</ul>
    
     




      
  
    <ul style="list-style-type:square; ">
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>

</ul>
    
     




      
  
    <ul style="list-style-type:none; ">
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>

</ul>


    Ordered List


  • In HTML we use <ol> tag to declare ordered list.
  • List items start's with<li> tag.
  • Default list style is number type. 


    •   
  
    <ol>
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>

    type attribute in ordered List

    We use type attribute inside ordered list to define type of the list according to our requirement.Type can be number ,upper case lower case,upper case roman number,lower case roman number etc. 

      
  
    <ol type="1">
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>

    
     




      
  
    <ol type="A">
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>
    
     





      
  
    <ol type="a">
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>
    
     




      
  
    <ol type="I">
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>
    
     




      
  
    <ol type="i">
  
  <li>Java</li>
  <li>Python</li>
  <li>PHP</li>
  <li>Android</li>


</ol>





    More Topics