Programming

The unordered list “<ul>” supports an attribute named “type” that specifies type of display for bullets. The “type” attribute takes values: disc,circle,square.

The following displays a square instead of default disc style for bullets.

<ul type="square">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

display looks like following

• One
• Two
• Three

Similarly, a disc style appears as follows:

• One
• Two
• Three

Similarly, a circle style appears as follows:

• One
• Two
• Three

Otherwise, you can use “list-style-type” attribute in CSS as shown below:

ul {
  list-style-type: square;
}

You can customize the bullets further by specifying an image url in CSS as follows:

ul {
  list-style-type: url("/images/arrow.jpg");
}

The <li> tag can be used under an unordered list tag <ul> or ordered list tag <ol>.

The following shows how <li> tag can be used in an unordered list. Under unordered list, each <li> shows a bullet by default.

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

The above code appears in the browser as follows:

• One
• Two
• Three

You can use following CSS to disable left indentation:

ul {margin: 0;}

If you don’t want to display bullets, you can do the following.

ul {
 list-style-type: none;
 margin: 0;
}

You can use similar trick for ordered list

as well.