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.

<ul>
    <li>Monday</li>
    <li>Tuesday</li>
    <li>Wednesday</li>
    <li>Thursday</li>
    <li>Friday</li>
    <li>Saturday</li>
    <li>Sunday</li>
</ul>

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.

<ul>
	<li>Monday</li>
		<ul>
			<li>Read Jorcus.com Blog 1</li>
				<ul>
                    <li>Take Notes for Jorcus.com Tutorial</li>
                    <li>Ask Questions on Jorcus.com Tutorial</li>
                    <li>Bookmark it</li>
                    <li>Share it to my friends</li>
				</ul>
			<li>Read Jorcus.com Blog 2</li>
			<li>Contact Jorcus.com</li>
		</ul>
    <li>Tuesday</li>
</ul>

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 Jorcus.com Blog 1
• Take Notes for Jorcus.com Tutorial
• Ask Questions on Jorcus.com Tutorial
• Bookmark it
• Share it to my friends
• Read Jorcus.com Blog 2
• Contact Jorcus.com
• 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.