Unordered List in HTML
HTML

Unordered List in HTML

Editorial Team
Editorial Team

Follow us on Discord or Telegram to get access to free tutorials and updates.

In HTML, an unordered list is used to group related items. An unordered list can be created by using the <ul> tag. By default, unordered list items are marked with a bullet symbol.

Example

<!DOCTYPE html>
<html>
<head>
    <title>Unodered List<title>
</head>
<body>
    <ul>
        <li>Apple</li>
        <li>Orange</li>
        <li>Grapes</li>
    </ul>  
</body>
</html>

Output

  • Apple
  • Orange
  • Grapes

Styling an unordered list

The list-style-type attribute of CSS can be used to apply different types of list item markers to the list.

Example – Disc

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Circle

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – Square

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example – None

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Other HTML List tags