❮ Previous Next ❯

HTML <ul> tag

The <ul> tag is used to define unordered list. There must be one or more <li> inside this element. Each list is defined by <li> element.

Type: Block Element

Syntax of <ul> tag

<ul>
 <li> List 1 </li>
 <li> List 2 </li>
</ul>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<ul> Yes Yes Yes Yes Yes
<ul> tag can't be used alone without any <li> tag.

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3> Example of unorder list </h3>
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
</body>
</html>
Run The code »

Output on the browser

Example of unorder list

  • List 1
  • List 2
  • List 3

Attributes of <ul> tag

Attribute Value Note
type disk
(Default value)
square
circle		 It specifies which bullet type will be displayed.
compact
(boolean attribute)		 compact It defines the smaller gap between each list (by vertically) rather than the normal.
A boolean attribute is an attribute that does not need its value, its presence alone defines "true".

Example of type attribute (Obsolete)

<ul type="square">
  <li> List 1 </li>
  <li> List 1 </li>
</ul>

Modern CSS replacement

<ul style="list-style-type: square;">
  <li>List 1</li>
  <li>List 2</li>
</ul>

Old type values vs CSS replacement

Old type value CSS replacement
disk (●) list-style-type: disk;
circle (○) list-style-type: circle;
square (■) list-style-type: square;

Example of using compact attribute (Obsolete)

It reduces space between each list.

<ul compact>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

Modern replacement using CSS

    ----
<style>

ul {
  margin: 0;
  padding-left: 20px;
}

li {
  margin: 2px 0;
}

</style>
-------
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>
--------

More reference

You can make nested unordered list or multi-level list as shown in below. 

<h3>Example of nested unordered list </h3> 
<ul>

  <li> HTML
    <ol style="list-style-type: lower-alpha;">
      <li> Elements </li>
      <li> Tags </li>
      <li> Attributes</li>
    </ol>
  </li>

  <li> CSS </li>
  <li> JavaScript </li>

</ul>

Output on the browser

Example of nested unordered list

  • HTML
    1. Elements
    2. Tags
    3. Attributes
  • CSS
  • JavaScript

Default CSS properties of <ul> tag

ul {
  display:list-item;
  list-style-type:disk;
  margin:1em 0;
  padding-left:40px;
}
❮ Previous Next ❯