HTML - Unordered Lists

An unordered list is used to display a collection of related items that do not have a specific order or sequence. This type of list is used to 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 −

html-unordered-lists

Unordered List in HTML

To create an unordered list in HTML, we use the <ul> element and nest <li> elements 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.

The type Attribute of Unordered List

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 −

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.

Example

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>

The above example displays three unordered lists with default disc bullets, square and hollow circular bullets.

Unordered list without bullets

The <ul> tag defines the unordered list. We use <li> tag to start the list of items. The list of items can be marked as bullets, square, disc and circle. We can also create an unordered list that does not contain any bullets.

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 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 program example −

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.

Advertisements