🌱BeginnerLists
Unordered Lists
Create bulleted lists with <ul> and <li>, the most common list type in HTML.
Overview
An unordered list (<ul>) displays a collection of items where order does not matter like a shopping list, a set of features, or a group of links. Each item in the list is wrapped in an <li> (list item) element.
By default, browsers render unordered lists with bullet points (•). CSS can completely change this many navigation menus are built on unstyled <ul> elements.
Unordered lists are one of the most versatile HTML structures. Nearly every website's navigation menu is an unstyled <ul>. They also communicate to screen readers that items belong to a group.
Key Points
- •<ul> is the container; each item is an <li> inside it
- •Only <li> elements should be direct children of <ul>
- •Browsers render bullets by default; CSS list-style-type changes the style
- •Navigation menus are commonly built as <nav><ul><li><a>... structures
- •<li> items can contain any HTML: text, links, images, even nested lists
- •Use <ul> when order does not matter; use <ol> when order matters
Examples
A simple unordered list
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Cherries</li>
</ul>Navigation menu as an unordered list
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>This is the standard pattern for navigation menus. CSS removes the bullets.
List items with rich content
<ul>
<li><strong>Feature 1:</strong> Fast loading</li>
<li><strong>Feature 2:</strong> Mobile responsive</li>
<li><strong>Feature 3:</strong> SEO friendly</li>
</ul>Common Mistakes
- Putting elements other than <li> as direct children of <ul> (e.g., <div> or <p>)
- Using <ul> just to indent text use CSS padding/margin instead
- Forgetting that the list structure communicates grouping to screen readers
Note
Navigation menus on nearly every website are built from <ul> lists. CSS sets list-style: none and display: flex to transform them into horizontal nav bars.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4