W3Schools HTML UL Tag: Master Unordered Lists Quickly

The

tag in HTML is a fundamental element used to create unordered lists on webpages. It's a building block that allows developers to present content in an organized, scannable manner, enhancing user experience.

Unordered lists using the

tag are typically displayed with bullets, with no specific bullet style defined by default. They're ideal for situations where the sequence or numbering of items isn't significant.

Understanding the

Tag Structure

The

tag forms the container for the list, with each list item defined by the
• tag. The basic syntax looks like this:

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

Types of List Items

Each

• Text: A simple piece of text detailing the list item.
• Links: A hyperlink using the tag, directing users to another webpage.
• Other HTML Elements: Nested lists, images, or even paragraphs using
  ,
  , , or

  tags respectively.

basic

Styles and Options

While the default bullet style is webpage-specific, browsers typically display filled bullets by default. However, you can use CSS to change the bullet style to an open circle, square, or custom image.

You can also adjust the list's spacing, indentation, and other layout properties using CSS.

The Power of Nesting Lists

One of the most versatile features of the

tag is its ability to nest lists. This means you can place a list inside a list item, creating a hierarchy that's easy to navigate and understand.

To nest an ordered or unordered list, simply place the new list (

or
) inside a list item (
• ).

Nesting Unordered Lists

Here's an example of nesting unordered lists:

<ul>
<li>Item 1</li>
<li>Item 2<
  <ul>
    <li>Subitem 2.1</li>
    <li>Subitem 2.2</li>
  </ul>
</li>
<li>Item 3</li>
</ul>

You can also mix ordered and unordered lists in your nesting. This outputs as subpoints or sub-subpoints, denoting a further level of hierarchy:

<ol>
<li>Step 1</li>
<li>Step 2<
  <ul>
    <li>Substep 2.1</li>
    <li>Substep 2.2</li>
  </ul>
</li>
<li>Step 3</li>
</ol>

So, dive in, experiment with nestings, and create compelling, easy-to-navigate lists on your next web project!