Skip to main content

HTML Unordered Lists

The HTML <ul> tag defines an unordered (bulleted) list.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example:

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Output:

Ordered List example

Choose List Item Marker​

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

ValueDescription
discSets the list item marker to a bullet (default)
circleSets the list item marker to a circle
squareSets the list item marker to a square
noneThe list items will not be marked

Disc​

<ul style="list-style-type:disc;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Output:

Disc Unordered List example

Circle​

<ul style="list-style-type:circle;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Output:

Circle Unordered List example

Square​

<ul style="list-style-type:square;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Output:

Square Unordered List example

None​

<ul style="list-style-type:none;">
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

Output:

None Unordered List example

Nested HTML Lists​

Lists can be nested (list inside list):

<ul>
	<li>Item</li>
	<li>Item
		<ol>
			<li>Sub-Item</li>
			<li>Sub-Item</li>
		</ol>
	</li>
	<li>Item</li>
</ul>

Output:

Nested Unordered List example

note

A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Horizontal List with CSS​

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

<!DOCTYPE html>
<html>
	<head>
		<style>
			ul {
			  list-style-type: none;
			  margin: 0;
			  padding: 0;
			  overflow: hidden;
			  background-color: #333333;
			}

			li {
			  float: left;
			}

			li a {
			  display: block;
			  color: white;
			  text-align: center;
			  padding: 16px;
			  text-decoration: none;
			}

			li a:hover {
			  background-color: #111111;
			}
		</style>
	</head>
	<body>

		<h2>Navigation Menu</h2>
		<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

		<ul>
			<li><a href="#home">Home</a></li>
			<li><a href="#news">News</a></li>
			<li><a href="#contact">Contact</a></li>
			<li><a href="#about">About</a></li>
		</ul>

	</body>
</html>

Output:

Navbar example

Table of Contents