HTML code to create unordered list in fruit

HTML code to create an unordered list in fruit

Html code to create unordered lists tag defines a <ul> bulleted list.

Unordered list (ul)

An unordered list defined as <ul> tag starts list head with it and followed by list item <li> tag for each items.

The list items will be default marked by bullets list and if you want to change the marker.

Unordered list (ul) example:



<ul>
  <li>mango</li>
  <li>apple</li>
  <li>orange</li>
</ul>

Use CSS property to define the style of list item like list-style-type.

They are 4 types to create the marker list items following values:

1) disc - default bullet list item

2) square - list items followed by the square marker.

3) circle - list items followed by circle marker.

4) none - list items without the marker.

Disc example:


<html>
<head></head>
<body>
<ul style="list-style-type:disc;">
  <li>mango</li>
  <li>apple</li>
  <li>orange</li>
</ul>
</body>
</html>

Square example

  
  <html>
<head></head>
<body>
  <ul style="list-style-type:square;">
  <li>mango</li>
  <li>apple</li>
  <li>orange</li>
</ul> 
</body>
</html>

Circle example

  
  <html>
<head></head>
<body>
  <ul style="list-style-type:circle;">
  <li>mango</li>
  <li>apple</li>
  <li>orange</li>
  </ul>
</ul>
</body>
</html>

None example:

 
 <html>
<head></head>
<body>
<ul style="list-style-type:none;">
  <li>mango</li>
  <li>apple</li>
  <li>orange</li>
</ul>
</body>
</html>

How to use unordered lists and list items for example using nested loops in HTML?

 
 
<!DOCTYPE html>
<html>
<body>

<h2>Nested loop List</h2>
<p>nested loops:</p>

<ul>
  <li>Apples</li>
  <li>Pears</li>
  <li>Berries
    <ul>
      <li>Blueberries</li>
      <li>strawberries</li>
      <li>Kiwi fruits</li>
    </ul>
  </li>
  <li>citrus
    <ul>
      <li>limes</li>
      <li>Oranges</li>
      <li>grape fruits</li>
    </ul>
  </li>
  <li>Bananas</li>
  <li>Melons
    <ul>
      <li>honeydew melons</li>
      <li>watermelons</li>
      <li>rockmelons</li>
    </ul>
  </li>
</ul>

</body>
</html>

Output:

I hope you will learn how to create HTML code to create unordered list in fruit. If you Like share the Link to your Friends and family.