HTML Unordered List <ul>

The unordered list is the first type of HTML list.

We use it when the order of the information is unimportant.

Don’t be misguided by the word “unordered” – the items inside the list will still be presented in the same order, you typed in the HTML code.

The bullet points will be displayed next to each list item by default.

Here’s an example:



<p>What's your favorite color?</p>

<ul>
 <li>Blue</li>
 <li>Orange</li>
 <li>Purple</li>
</ul>


Output:

What’s your favorite color?

  • Blue
  • Orange
  • Purple

So as you can see, the formatting is neat and tidy, however you can use CSS to adjust the formatting as well as the element used as the marker / bullet point.

You can take your lists one step further by nesting them.

Nesting essentially allows us to have sub-bullet points in our lists.

To have sub-items, you essentially insert a whole new list, starting with the ul tag, within the li item you want sub points for.

Here’s how:



<p>What's your favorite car?</p>

<ul>
 <li>Jaguar</li>
 <li>Land Rover</li>
 <li>Mercedes</li>
 <li>BMW
  <ul>
	<li>3 Series</li>
	<li>5 Series</li>
	<li>7 Series</li>
  </ul>
 </li>
</ul>


Output:

What’s your favorite car?

  • Jaguar
  • Land Rover
  • Mercedes
  • BMW
    • 3 Series
    • 5 Series
    • 7 Series

As you can see, we now have sub points under BMW.

Your list can have any combination and any order of single list items and nested list items.

We could have continued adding single items after the BMW nested list, like this:

  • Jaguar
  • Land Rover
  • Mercedes
  • BMW
    • 3 Series
    • 5 Series
    • 7 Series
  • Audi
  • Lexus

And even added multiple nested items like this:



<p>What's your favorite car?</p>

<ul>
 <li>Jaguar</li>
 <li>Land Rover</li>
 <li>Mercedes</li>
 <li>BMW
  <ul>
	<li>3 Series</li>
	<li>5 Series</li>
	<li>7 Series</li>
  </ul>
 </li>
 <li>Audi</li>
 <li>Lexus
  <ul>
	<li>ES Models</li>
	<li>GS Models</li>
	<li>LS Models</li>
  </ul>
 </li>
</ul>


Output:

  • Jaguar
  • Land Rover
  • Mercedes
  • BMW
    • 3 Series
    • 5 Series
    • 7 Series
  • Audi
  • Lexus
    • ES Models
    • GS Models
    • LS Models