How to Create an Unordered List in HTML [+Examples]

Designing a web page to be easily readable, skimmed, and understood can be easily done by using an unordered list element in HTML. Adding images and drop caps are common methods. Adding bullet points is another way that’s ideal for blog posts and product pages.

The unordered list element is used for grouping items when the order doesn't matter. Product descriptions, for example, don’t need to follow a particular order. Recipe instructions, on the other hand, do need to.

Use the following jump links to navigate the article, or just keep scrolling:

• How to Create an Unordered List in HTML
• HTML Unordered List Examples
• How to Use Unordered List in HTML
• Using the HTML Tag for an Unordered List

How to Create an Unordered List in HTML

It’s easy to create an unordered list with the HTML <ul> tag. Let’s break the process down step by step below.

Step 1: Write out your list items.

To start, write out the text that will become your list items, or bullet points. Here is some placeholder text below:

List Item 1

List Item 2

List Item 3

Step 2: Wrap each list item in <li> tags.

Next, wrap each word or phrase in <li> tags. These will become your list items. Each list item should have an opening and closing tag.

Note: List items do not have to only contain text. They can contain other HTML elements as well. For example, a list of anchor elements, or links, would look like this:

Step 3: Wrap all list items in a <ul> tag.

Finally, wrap all list items in a <ul> tag. This will tell the browser to render an unordered list of items, which is a bulleted list by default.

Here’s the complete code snippet:

Here’s how the unordered list will appear on the front-end:

Now that you understand how to create a basic unordered list, let’s look at some ways you can style the list.

HTML Unordered List Examples

An HTML unordered list can be styled to change the default list item marker, to nest one list inside another, and to change the default layout from vertical to horizontal. We’ll walk through how to create each of these possibilities in the examples below.

Disc Marker

The CSS list-style-type property defines the marker of a list item. By default, the value is “disc,” which sets the marker to a bullet. An unordered list will therefore appear as a bulleted list whether the CSS list-style-type property is set to “disc” or not defined at all.

There are multiple ways to add CSS to HTML. We’ll add internal CSS, as shown in the Pen below:

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

Circle Marker

To change the default list item marker to a circle, set the CSS list-style-type property to “circle.”

See the Pen HTML Unordered List Example: Disc Marker by HubSpot (@hubspot) on CodePen.

Square Marker

To change the default list item marker to a square, set the CSS list-style-type property to “square.”

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

No Marker

You can also remove the list item marker altogether by setting the CSS list-style-type property to “none.” The list items will still be indented, but no marker will appear before them.

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

Nested List

You can create a list inside another list — otherwise known as a nested list — in HTML. You can nest an unordered or ordered list inside an unordered one, but we’ll focus on the former since the topic of this post is unordered lists.

To create a nested unordered list, simply add the second unordered list below a list item in the first unordered list. This second list should also contain a parent <ul> element and child <li> elements. You must include the closing </ul> tag or the browser will render all the following list items as nested.

See the Pen HTML Unordered List Example: Nested by HubSpot (@hubspot) on CodePen.

Custom Indented List

The HTML <ul> tag will indent its list items by default. If you’d like to change the indentation distance, then you can use the CSS margin-left or padding-left property. A positive value will push the list items to the right, whereas a negative value will push the items to the right.

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

Horizontal List

By default, list items will be listed vertically, but you can display them horizontally with some CSS. This is often a popular choice when creating a navigation menu.

The example below displays a list of anchor elements horizontally. CSS is applied to the unordered list element to remove the list item markers and set the margin, padding, and background color. The overflow property is also set to “hidden” to hide any overflow from rendering outside the element’s box.

Each list item is defined by the CSS float property and set to “left” so that they float to the left of their container (ie. the unordered list element).

Finally, each anchor element is styled by CSS to appear bolded, centered, navy blue, and without underline. The display and padding property ensures there is space between each list item.

See the Pen Untitled by HubSpot (@hubspot) on CodePen.

How to Use Unordered List in HTML

We’ve walked through how to create several types of unordered lists. Let’s recap what we’ve learned so far:

• The HTML <ul> tag defines an unordered list.
• The HTML <li> element defines a list item.
• List items can contain other HTML elements, like anchor elements.
• The CSS list-style-type property defines the list item marker.
• Unordered lists can be nested.
• The margin-left or padding-left property can be used to change the default indentation distance of an unordered list.
• The CSS float property can be used to display an unordered list horizontally

Using the HTML Tag for an Unordered List

With the HTML <ul> tag and CSS, you can create and style unordered lists in your web pages. These lists can help improve the readability of your blog posts, landing pages, product pages, and more.