How do we code different types of unordered lists?

In this example below you will see how to do a How do we code different types of unordered lists? with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 204805667, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 204805667 ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>How do we code different types of unordered lists?</title>
  
  
  
  
  
</head>

<body>

  <html>
  <head><title>Unordered List Practice</title></head>
<body>  
  
  <p><b>Note:</b> The type attributes of ul tag is deprecated in Html 4,
  and is not supproted in HTML5.
  Therefore we have used the style attribute and the CSS list-style-type
  property, to define different types of unordered lists below:</p>
  
  <h4>Disc bullets list:</h4>
  <ul style="list-style-type:disc"> 
    <li>Apples</li>
    <li>Bannas</li>
    <li>Lemons</li>
    <li>Oranges</li>
  </ul>
  
  <h4>Circle bullets list:</h4>
  <ul style="list-style-type:circle">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oramges</li>
  </ul>
  
  <h4>Square bullets list:</h4>
  <ul style="list-style-type:square">
    <li>Apples</li>
    <li>Bananas</li>
    <li>Lemons</li>
    <li>Oranges</li>
  </ul>
  
</body>
</html>
  
  

</body>

</html>

Comments