Learn HTML – Part 17 – ul Tag – Creating Unordered Lists

The HTML ul tag is used to create unordered lists in a web page. Unordered lists display items with bullet points and are commonly used for menus, feature lists, navigation links, and grouped content.

What is the ul Tag in HTML?

The ul tag stands for Unordered List. It groups related list items together.

Each item inside the list must be written using the li (List Item) tag.

Basic Syntax of ul Tag

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

The ul tag acts as a container, and the li tag defines each list item.

Example – Simple Unordered List

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>JavaScript</li>
</ul>

Output:

• HTML
• CSS
• JavaScript

How ul and li Work Together

• ul defines the unordered list container.
• li defines individual list items.
• Every list item must be placed inside a ul or ol tag.

Where Unordered Lists Are Used

• Website navigation menus
• Feature lists on landing pages
• Sidebar links
• Product specifications
• Blog categories

In WordPress themes, navigation menus are usually structured using unordered lists behind the scenes.

ul vs ol – Quick Comparison

Common Mistakes Beginners Make

• Forgetting to close the ul tag
• Adding text directly inside ul without li
• Incorrect nesting of lists

Conclusion

The HTML ul tag is essential for structuring grouped content using bullet points. It works together with the li tag to properly display list items.

Understanding lists is very important because navigation menus, sidebar widgets, and many layout structures in WordPress themes are built using unordered lists.

What’s Next?

Now that you understand the ul tag, the next step is learning about the ol tag, which is used to create ordered lists in HTML.

Next: Learn HTML – Part 18 – ol Tag – Creating Ordered Lists →

Series: Learn HTML Series