HTML - Unordered Lists

HTML Unordered List is used to display a collection of related items that do not have a specific order or sequence. We can make unordered in HTML using <li> element nested with <ul> element.

The below image shows an unordered list of groceries:

Unordered HTML List - Choose List Item Marker

The type attribute for <ul> tag is used to specify the type of bullet to the unordered list in HTML. By default, disc bullet type is used. But, we can change this with the help of following options.

Attribute Value	Description
disc	It is the default type of marker.
square	List items will be displayed with a square marker.
circle	It will set the marker to a hollow circle.

Examples of Unordered List

Below examples will illustrate the HTML Unordered list, where and how we should use this property of HTML.

Create a Unordered List

The following example demonstrates how to create an unordered list in HTML. The below example displays an unordered list with default disc bullets.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Unordered List</title>
</head>

<body>
   <ul>
      <li>Beetroot</li>
      <li>Ginger</li>
      <li>Potato</li>
      <li>Radish</li>
   </ul>
</body>

</html>

Nested Unordered List

In the following example we will create nested unordered list by defining list inside the list.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Nested Unordered List</title>
</head>

<body>
<ul>
   <li>Tutorialspoint</li>
   <li> Web Development
       <ul>
           <li>HTML</li>
           <li>CSS</li>
       </ul>
   </li>
   <li>Javascript</li>
</ul>
</body>

</html>

Changing Marker type of Unordered List

The following example illustrates different types of unordered list in HTML.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Unordered List</title>
</head>

<body>
   <p>
      An unordered list with hollow circle marker:
   </p>
   <ul type="circle">
      <li>Rice</li>
      <li>Pulses</li>
      <li>Flour</li>
      <li>Beans</li>
   </ul>
   <p>
      An unordered list with square marker:
   </p>
   <ul type="square">
      <li>Nuts</li>
      <li>Oats</li>
      <li>Eggs</li>
      <li>Dates</li>
   </ul>
   <p>
      An unordered list with default disc marker:
   </p>
   <ul type="disc">
      <li>Apple</li>
      <li>Guava</li>
      <li>Carrot</li>
      <li>Orange</li>
   </ul>
</body>

</html>

Unordered List without Bullets

By setting style="list-style-type: none" attribute for ul tag, you can create unordered list without bullet markers. Following code demonstrates this process.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Unordered List</title>
</head>

<body>
   <ul style="list-style-type: none">
      <li>Abdul</li>
      <li>Jason</li>
      <li>Yadav</li>
   </ul>
</body>
</html>

Horizontal Unordered List

Here in this example we will create an unordered list and make that list horizontal using CSS properties.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Horizontal Unordered List</title>
   <style>
      ul {
          overflow: hidden;
          background-color: gray;
          list-style-type: none;
      }
      li {
          float: left;
          text-decoration: none;
          color: white;
          padding: 0.5rem;
      }
   </style>
</head>

<body>
   <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Bootstrap</li>
   </ul>
</body>

</html>

Styling Unordered Lists

Styling an unordered list (HTML <ul>) using CSS allows for customization of the list's appearance, including modifying bullet points, spacing, and overall design. Below is the example program.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled Unordered List</title>
<style>
   ul {
      list-style-type: square;
      /* Custom bullet type */
      padding: 0;
      /* Removes default padding */
   }
   li {
      margin-bottom: 8px;
      /* Adds spacing between list items */
      background-color: #f0f0f0;
      /* Background color */
      border: 1px solid #ccc;
      /* Border */
      padding: 8px;
      /* Padding inside each list item */
      transition: background-color 0.3s;
      /* Smooth transition effect */
   }
   li:hover {
      background-color: #e0e0e0;
      /* Change background on hover */
   }
</style>
</head>

<body>
   <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
   </ul>
</body>

</html>

Print Page