How to Create an Unordered List in HTML with Examples

HTML 5 | June 13, 2022
How to Create an Unordered List in HTML with Examples

We all use lists in times of our lives. We craft them to organize our days and tasks with to-do lists. We utilize them in recipes so we aren’t in peril with misguidance. And we use it when we want to shop for groceries.

These are just a few examples of how we use lists to keep us well-organized. 

So it makes sense that lists make their way into front-end web development as well. 

Unordered, ordered, and description lists are the three kinds of lists in HTML. In this blog, you’ll get to learn how to create an unordered list in HTML

Let’s get started!

Download Now: How to Choose the Right PSD to HTML Partner [Free Guide]

How to Create an Unordered List in HTML

To begin, write out the names of the list that will become your unordered list or bullet points. Here is a placeholder text below:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Step 2: At the end and beginning add <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.

How to Create Unordered Lists in HTML with Examples
How to Create Unordered Lists in HTML with Examples

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

Here’s the complete code snippet:

How to Create Unordered Lists in HTML with Examples

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

  1. List Item 1
  2. List Item 2
  3. List Item 3

Now that you got a gist of how to create a basic unordered list in HTML, we hope that your set to create your own.

RELATED: Expertise Required Converting PSD To HTML In Front End Developer

How to change the default styling of unordered lists

As you’ve noticed, the default styling of unordered lists is bullet points beside each list item.

But you can morph the styling using the list-style-type property in a separate .css file.

The default value of the property is a disc.

HTML Unordered List Examples

Example – Disc

<ul style=”list-style-type:disc;”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Example – Circle

<ul style=”list-style-type:circle;”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Example – None

<ul style=”list-style-type:none;”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

Example – Square

<ul style=”list-style-type:square;”>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

HTML List Tags

Tags Description
<ul>Defines an unordered list
<ol>Defines an ordered list
<li>Defines a list item
<dl>Defines a description list
<dt>Defines a term in a description list
<dd>Describes the term in a description list

Conclusion

You can now easily craft and style unordered lists in your webpage with the help of HTML <ul> tag and CSS. These lists can assist you to enhance the readability of your posts, pages, and more.

How to choose the right PSD to HTML agency

SUBSCRIBE TO OUR NEWSLETTER