HTML - Unordered Lists

Previous
Quiz
Next

An HTML unordered list is defined by <ul> tag where all list items are marked with bullets.

Unordered HTML Lists

An unordered list is a collection of list items that do not have a specific order or sequence and are marked with the bullets. An HTML unordered list is created by <ul> the tag, where each list item is defined by the <li> tag.

This type of list is used for describing a particular service or product, as it does not require any order to be followed.

The below figure shows an ordered list of groceries:

Unordered Lists

Creating Unordered Lists

To create an unordered list in HTML, we use the <ul> tag and nest <li> tags inside it. Each <li> element represents one item in the list. By default, the browser will automatically display disc bullet points for each item. However, we can change this bullet style using the type attribute on the <ul> element.

Example

The following example demonstrates how to create an unordered list in HTML:

<!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>

The above example displays an unordered list with default disc bullets.

HTML Unordered List - Specifying List Marker

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

S.No Value & Description
1

disc

It is the default type of marker.
2

square

List items will be displayed with a square marker.
3

circle

It will set the marker to a hollow circle.

Disc Marker

The following example illustrates disc marker with an unordered list in HTML:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <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>

Square Marker

The following example illustrates square marker with an unordered list in HTML:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Unordered List</title>
</head>
<body>
   <p>An unordered list with square marker:</p>
   <ul type="square">
      <li>Nuts</li>
      <li>Oats</li>
      <li>Eggs</li>
      <li>Dates</li>
   </ul>
</body>
</html>

Circle Marker

The following example illustrates circle marker with an 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>
</body>
</html>

The above examples display three unordered lists with default disc bullets, square and hollow circular bullets.

HTML Unordered List Without Bullets

You can also display the list items of an unordered list without showing the bullets. To display an unordered list without bullets, define the "none" to the list-style-type property.

Syntax

Following is the syntax to create an unordered list without bullets in HTML:

<ul style="list-style-type: none">
   <li>Item in list...</li>
   <li>Item in list...</li>
   <li>Item in list...</li>
</ul>

Example

Given below is an example of creating an unordered list without bullets in HTML:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
   <ul style="list-style-type: none">
      <li>Abdul</li>
      <li>Jason</li>
      <li>Yadav</li>
   </ul>
</body>
</html>

The above program creates an unordered list that contains elements Abdul, Jason, and Yadav without bullets.

Styling Unordered HTML Lists

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

Example

Below is the program example:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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>

The above program styles an unordered list with a square bullet. Each list item has a background color, border, and padding, creating a distinct card-like appearance. The items are separated by a margin, and hovering over an item triggers a smooth background color transition.

Nested Unordered Lists

HTML allows nesting of lists; you can create nested unordered lists to display a list of items inside an item of the outer list element.

Example

The following example deonstartes the use of nested unordered lists:

<!DOCTYPE html>
<html>
<head>
  <title>Nested Unordered Lists</title>
</head>
<body>
<h2>Example of Nested Unordered Lists</h2>
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </li>
  <li>Vegetables
    <ul>
      <li>Carrot</li>
      <li>Broccoli</li>
      <li>Spinach</li>
    </ul>
  </li>
  <li>Dairy
    <ul>
      <li>Milk</li>
      <li>Cheese</li>
      <li>Yogurt</li>
    </ul>
  </li>
</ul>
</body>
</html>
Print Page
Previous
Next
Advertisements