Unordered lists (ul)

Hello, students! In this lesson, we will learn about HTML unordered lists.

Unordered lists are used to organize text on a web page.

They are identified by the <ul> tag.

Topics

• What are HTML unordered lists?
• Code examples
• Unordered list styles

What are HTML unordered lists?

Unordered lists are used to organize text on a web page.

They are used to create a list of items that do not have a specific order.

For example, a list of fruits or a list of hobbies.

Code examples

Here are some code examples for unordered lists:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The browser displays the list as follows:

• Item 1
• Item 2
• Item 3

You can also use <li> elements to create more complex item lists.

<ul>
  <li>Item 1
    <ul>
      <li>Subitem 1</li>
      <li>Subitem 2</li>
    </ul>
  </li>
  <li>Item 2</li>
</ul>

The browser displays the list as follows:

• Item 1
  • Subitem 1
  • Subitem 2
• Item 2

Unordered list styles

You can use CSS styles to change the appearance of unordered lists.

For example, you can use the list-style-type attribute to change the type of marker used for list items.

Possible values for the list-style-type attribute are:

• disc: Round markers
• circle: Circular markers
• square: Square markers
• none: No markers

<ul style="list-style-type: square;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The browser displays the list as follows:

• Item 1
• Item 2
• Item 3

You can also use the list-style-position attribute to change the position of the markers.

Possible values for the list-style-position attribute are:

• outside: Markers positioned outside the text
• inside: Markers positioned inside the text

<ul style="list-style-type: disc; list-style-position: inside;">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

The browser displays the list as follows:

• Item 1
• Item 2
• Item 3

Exercises

• Create an HTML document with an unordered list of fruits.
• Save the document and open it in a browser.

Observe how the browser displays the list.

Good luck!

Conclusion

Unordered lists are an important tool for organizing text on a web page.

Understanding how to use them correctly is essential for creating effective web pages.