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:
- List Item 1
- List Item 2
- 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.
Step 3: Wrap all list items in a <ul> tag.
Here’s the complete code snippet:
Here’s how the unordered list will appear on the front end:
- List Item 1
- List Item 2
- 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.
