Join Digital Nomads and Remote Workers to Ask Questions, Share Experiences, Find Remote Jobs and Seek Recommendations.

HTML Unordered List Tutorial


In this tutorial, we will talk about the HTML unordered list and look deeper of how an unordered list can do and achieve.

How Unordered List Looks

Before we start that, let me show you how it looks at the web page. The unordered list is good for listing items with without specific order, the list will start and end with dots. If you would like to list the items out without a specific order, this is the list you are looking for.

  • Monday
  • Tuesday
  • Wednesday
  • Thursday
  • Friday
  • Saturday
  • Sunday

Unordered List In HTML Code

To create an unordered list, you will start with <ul> element and creating the <li> element of each list inside of <ul>. This is how it looks at HTML code.


You can also change the dot to square or disc with a type attribute, but the type attribute on <ul> has been deprecated. If you which to change it, use CSS list-style-type property.

Nesting Unordered List

You can also nest the unordered lists. Here’s the sample code, you can run the code by clicking the button on the top-right side.

			<li>Read Blog 1</li>
                    <li>Take Notes for Tutorial</li>
                    <li>Ask Questions on Tutorial</li>
                    <li>Bookmark it</li>
                    <li>Share it to my friends</li>
			<li>Read Blog 2</li>

Here’s the output. You can also edit the code above and test run of it at the top-right corner of code snippet.

  • Monday
    • Read Blog 1
      • Take Notes for Tutorial
      • Ask Questions on Tutorial
      • Bookmark it
      • Share it to my friends
    • Read Blog 2
    • Contact
  • Tuesday

Thanks for readings, if you wish to learn more about the others type of HTML Lists, read my HTML Lists tutorial to get you start in real quick.

We Work From Anywhere

Find Remote Jobs, Ask Questions, Connect With Digital Nomads, and Live Your Best Location-Independent Life.