HTML Unordered List

In HTML, we have <ul> tag which defines the unordered list. And it is also known as bulleted list, because as we know it is not ordered list therefore it starts with bullets. So an unordered html list starts with <ul> tag and ends with </ul> tag as usual. In unordered list, we do have <li> tag to input some data into our unordered list, it starts with <li> tag and ends with </li>. The list items will be marked with bullets which are small black circles by default.

For example:

<ul>
<li>cat</li>
<li>dog</li>
<li>lion</li>
</ul>

Therefore, its output will be:

• cat
• dog
• lion

Choose list item marker: unordered html list

In CSS, we have a property named as list-style-type, which is used to define the style or we can say it is used to change the default style of our list item marker. It can have of the following values.

Values and description:

1. Disc: sets the list item marker to a bullet by default.
2. Circle: sets a list item marker to a circle.
3. Square: sets the list item marker to a square
4. None: the list item will not be marked.

For example (disc):

<ul style=”list-style-type:disc;”>
<li>coffee</li>
<li>tea</li>
<li>milk</li>
</ul>

Nested unordered HTML list:

Nested lists are same as we have seen in ordered lists. Nested lists means we can have lists inside list.

For example:

<ul>
<li>coffee</li>
<li>tea
<ul>
<li>green tea</li>
<li>lemon tea</li>
</ul>
</li>
<li>milk</li>
</ul>

Output:

• coffee
• tea
  • green tea
  • lemon tea
• milk

A list item can contain a new list in html, and it can also contain html elements like images, links and few other things as well.

Horizontal list with CSS: CSS can be used to style html lists in many different ways.