An unordered list typically is a bulleted list of items. There are no sequential numbers of the list items in an unordered list. This article is a quick guide on how to code an unordered List in HTML with examples.
What does an unordered HTML list look like
An unordered list will display in the browser as follows
- Unordered list with example 1
- Unordered list with example 2
- Unordered list with example 3
What tags do you use in an unordered HTML list
To create an unordered list in HTML, you use the <ul> tags. The <ul> tags are responsible for creating the list itself and not the list items. A <li> tag is wrapped around the list item to create each list item.
How can you format an unordered HTML list
You can format your list in one of two ways, inline styling (which we don’t recommend, you can see why here) or adding a class attribute to the list and styling your list with CSS.
Unordered List coding example
In the below example, we started with the Basic HTML document structure, with basic metadata in the head tag. If you are unsure what is being added to the <head> tag you can go read our full article on Metadata to include in head tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Unordered List with Example</title>
</head>
<body>
<ul>
<li>Unordered List with example 1</li>
<li>Unordered List with example 2</li>
<li>Unordered List with example 2</li>
</ul>
</body>
</html>
The above code should render the following unordered list in the browser:
Conclusion
Creating an unordered list in HTML requires defining the list element with the <ul> tag and wrapping each list item in a <li> tag. Unordered and Ordered lists are very similar. The only different thing is the list is created with the <ol> tag, and rather than bullets, the ordered list renders with sequential numbing in the browser. You can find our ordered list with code examples here.
Did you know that there are more than two lists in HTML? The third list is called a description list. Click here for our description list with code examples.
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
