HTML Unordered Lists

In this article, we’ll examine HTML unordered lists and how they work. This lesson will cover the syntax of creating unordered lists, including how to add and customize bullet styles.

<ul> HTML tag represents an unordered list in HTML.

HTML Unordered List displays elements in bulleted format. It is possible to display items in an unordered list when we do not need to present them in a specific order. An unordered list is created using the HTML <ul > tag.

Unordered HTML List

HTML unordered lists begin with the <ul> tag. <li> tags are used to start each list item.

HTML unordered lists are marked with bullets (small black circles) by default:


<!DOCTYPE html> <html> <body><ul> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul></body> </html>

Unordered HTML List – Choose List Item Marker

The style of the list item marker is specified using the CSS list-style-type property. Any of the following values may be present:

discMarks the list item with a bullet (default)
circleCreates a circle for the list item marker.
squareA square is set as the list item marker.
noneThere will be no marking of the items on the list.



<!DOCTYPE html> <html><body><br><br><br><ul style="list-style-type:square;"><br><li>Hot Tea</li><br><li>Mango Juice</li><br><li>Cold Cofee</li><br></ul><br><br><br> </body></html>



<!DOCTYPE html> <html><body><br><br><br><br><ul style="list-style-type:disc;"><br><li>Hot Tea</li><br><li>Mango Juice</li><br><li>Cold Cofee</li><br></ul><br><br><br> </body></html>



<!DOCTYPE html> <html><body><br><br><br><br><ul style="list-style-type:circle;"><br><li>Hot Tea</li><br><li>Mango Juice</li><br><li>Cold Cofee</li><br></ul><br><br><br> </body></html>



<!DOCTYPE html> <html><body><br><br><br><ul style="list-style-type:none;"><br><li>Hot Tea</li><br><li>Mango Juice</li><br><li>Cold Cofee</li><br></ul><br><br><br> </body></html>

Here is the combined list of all the unodered types:


<!DOCTYPE html> <html> <body> <ul style="list-style-type:disc;"> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul> <ul style="list-style-type:circle;"> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul> <ul style="list-style-type:square;"> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul> <ul style="list-style-type:none;"> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul> </body> </html>

Nested HTML Lists

Nested lists (lists within lists) are as follows:


<!DOCTYPE html> <html> <body><ul> <li>My Tea cup</li> <li>My Juice glass <ul><li>Has Black Cofee</li> <li>And Green Drink</li> </ul></li> <li>Mango Juice</li> </ul></body> </html>


CSS can also be applied on the unordered list here is how:


<!DOCTYPE html> <html> <head><style> li{ list-style-type: square; } </style> </head><body> <ul> <li>Hot Tea</li> <li>Mango Juice</li> <li>Cold Cofee</li> </ul> <ul> <li>Tesla</li> <li>Microsoft</li> <li>Facebook</li> </ul> </body> </html>

Horizontal List with CSS

There are many different methods CSS can be used to style HTML lists.

The following is an example of how to create a navigation menu by styling a list horizontally:


<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #ddd; }li { float: right; }li a { display: block; color: black; text-align: center; padding: 32px; text-decoration: none; }li a:hover { background-color: #fff; } </style> </head> <body><ul> <li> <a href="#home">Home</a> </li> <li> <a href="#news">About</a> </li> <li> <a href="#contact">Gallery</a> </li> <li> <a href="#about">contact</a> </li> </ul></body> </html>
We have lots of CSS lessons coming up that can help you learn more about it.

HTML List Tags

<li>Specifies a list item in HTML Unordered List
<ol>This tag represents an ordered list.
<ul>An unordered list is determined when it comes to HTML Unordered List.
<dd>Defines the term in a description list
<dt>Represents a term in a description list
<dl>A description list is specified as it comes to HTML Unordered List.

This concludes our discussion of HTML unordered lists. Our HTML Tag Reference contains a complete list of all HTML tags.

Chapter Summary

  • To create an unordered list, utilise the HTML <ul> element.
  • To specify the list item marker, use the CSS list-style-type property.
  • To determine a list item, operate the HTML <li> element.
  • Nesting lists are possible.
  • Other HTML elements may be included in list items.
  • To portray a list horizontally, operate the CSS attribute float:left.
Kindly leave your reaction below as a token of appreciation or feedback for the betterment of this site.

We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *