<!DOCTYPE html> <html lang="en"> <head> <style> /* Set item-marker as circle */ ul.circ { list-style-type: circle; } /* Set item-marker as square */ ul.sqr { list-style-type: square; } /* Set item-marker as decimal lists */ ol.d { list-style-type: decimal; } /* Set item-marker as lower-case roman numerals */ ol.i { list-style-type: lower-roman; } /* Set item-marker as lower-case alphabet */ ol.a { list-style-type: lower-alpha; } /* Set item-marker as upper-case roman numerals */ ol.I { list-style-type: upper-roman; } /* Set item-marker as upper-case alphabet */ ol.A { list-style-type: upper-alpha; } </style> </head> <body> <ul class="circ"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> <ul class="sqr"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> <li>Python</li> </ul> <ol class="d"> <li>Mercury</li> <li>Venus</li> <li>Earth</li> <li>Mars</li> <li>Jupiter</li> <li>Saturn</li> <li>Uranus</li> <li>Neptune</li> <li>Pluto</li> </ol> <ol class="i"> <li>January</li> <li>February</li> <li>March</li> <li>April</li> <li>May</li> <li>June</li> <li>July</li> <li>August</li> <li>September</li> <li>October</li> <li>November</li> <li>December</li> </ol> <ol class="a"> <li>Mango</li> <li>Banana</li> <li>Orange</li> <li>Guava</li> <li>Cashew</li> </ol> <ol class="I"> <li>Apple</li> <li>Samsung</li> <li>Blackberry</li> <li>LG</li> <li>Google</li> </ol> <ul class="A"> <li>StackOverflow</li> <li>Quora</li> <li>Reddit</li> </ul> </body> </html>