Follow us on Facebook

HTML Unordered List | HTML Bulleted List

HTML Unordered List or Bulleted List displays elements in bulleted format . We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list:
  • disc
  • circle
  • square
  • none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
TypeDescription
Type "disc"This is the default style. In this style, the list items are marked with bullets.
Type "circle"In this style, the list items are marked with circles.
Type "square"In this style, the list items are marked with squares.
Type "none"In this style, the list items are not marked .

HTML Unordered List Example

  1. <ul>  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  
Test it Now
Output:
  • HTML
  • Java
  • JavaScript
  • SQL

ul type="circle"

  1. <ul type="circle">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  
Test it Now
Output:
  • HTML
  • Java
  • JavaScript
  • SQL

ul type="square"

  1. <ul type="square">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  
Test it Now
Output:
  • HTML
  • Java
  • JavaScript
  • SQL

ul type="none"

  1. <ul type="none">  
  2.  <li>HTML</li>  
  3.  <li>Java</li>  
  4.  <li>JavaScript</li>  
  5.  <li>SQL</li>  
  6. </ul>  
Test it Now
Output:
  • HTML
  • Java
  • JavaScript
  • SQL

Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style-type. Following is the example to show the CSS property for ul tag.

  1. <ul style="list-style-type: square;">  
  2.     <li>HTML</li>  
  3.     <li>Java</li>  
  4.     <li>JavaScript</li>  
  5.     <li>SQL</li>  
  6.   </ul>  
Code:
  1. <!DOCTYPE html>  
  2. <html>  
  3.  <head>  
  4.   </head>  
  5.  <body>  
  6.  <h2>The type attribute with CSS property</h2>  
  7.    <ul style="list-style-type: square;">  
  8.     <li>HTML</li>  
  9.      <li>Java</li>  
  10.            <li>JavaScript</li>  
  11.            <li>SQL</li>  
  12.     </ul>  
  13.  </body>  
  14. </html>     
Test it Now
Output:
HTML Unordered List | HTML Bulleted List

Supporting Browsers

Elementchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<ul>YesYesYesYesYes

Post a Comment

0 Comments