HTML - <ul> Tag

An unordered list(ul) is used for grouping a collection of items that do not have a numerical ordering. Unordered-list items are displayed as bullets, that can be in various forms, like a dot, a circle, or a square. The unordered list contains the multiple <li> tags inside the <ul></ul> tag to represent an items in the list.

Following is the list of global attributes that you can use within the <ul> tag to display the list of items in different bullet styles −

  • compact − It is the Boolean attribute that indicates that an unordered list should be presented in a compact style.
  • type − This attribute sets the different bullet styles of the list items.

The type attribute has various bullet formats as follows −

  • type ='circle' − for the circle bullet format.
  • type ='square' − for the square bullet format.
  • type ='disc' − for the number bullet format.

The unordered list includes the global attributes. The global attributes are attributes common to all HTML elements, they can be used on all elements, though they may not affect some elements.

Syntax

Following is the syntax of the <ul> tag −

<ul>.....</ul>

Example

In the following example, we are creating an unordered list in HTML to display the related items of the list in the default bullet format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Unordered lists</title>
</head>
<body>
   <!--create an unordered list-->
   <ul>
      <li>RED</li>
      <li>BLACK</li>
      <li>GREEN</li>
   </ul>
</body>
</html>

When we run the above code, it will generate an output consisting of the list items displayed on the webpage.

Example

Following is another example of the unordered list. Here, we are using the type = ‘square’ attribute to display the list of items in the square bullet formats.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Unordered lists</title>
</head>
<body>
   <!--create an unordered list-->
   <ul type="square">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>PHP</li>
   </ul>
</body>
</html>

On running the above code, the output window will pop up, consisting of list items displayed as square format on the webpage.

Example

In this example, we are creating an unordered list and using the type = ‘circle’ attribute within the <ul> tag to display the list of items in the circle bullet format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Unordered lists</title>
</head>
<body>
   <!--create an unordered list-->
   <ul type="circle">
      <li>Raman</li>
      <li>Kritika</li>
      <li>Rahul</li>
      <li>Aman</li>
   </ul>
</body>
</html>

When we run the above code, it will generate an output displaying the list items with a circle format on the webpage.

Example

In this program, we are creating an unordered list and giving the type attribute value as "disc" to display the list items in the bullet format.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Unordered lists</title>
</head>
<body>
   <!--create an unordered list-->
   <ul type="disc">
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
      <li>Grapes</li>
   </ul>
</body>
</html>

On running the above code, it will generate an output displaying the list items with a disc format on the webpage.

Example

In the following example, we are creating the nested unordered list to display the related items of the lists.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Unordered lists</title>
</head>
<body>
   <!--create an unordered nested lists-->
   <ul type="disc">
      <li>Fruits</li>
      <ul type="circle">
      <li>Apple</li>
      <li>mango</li>
      </ul>
      <li>Colors</li>
      <ul type="square">
      <li>Red</li>
      <li>Blue</li>
      </ul>
   </ul>
</body>
</html>

When we run the above code, it will generate an output displaying the nested list items on the webpage.

html_tags_reference.htm
Advertisements