<ul> Unordered list
Bulleted list for items in no particular order.
Use <ul> for a list where the sequence carries no meaning, like a shopping list or a set of product features. Every item is an <li>.
A ul accepts only li elements as direct children. People often drop loose text, a <p> or a nested list straight into it, which is invalid; the nested list belongs inside an li. Bullet style comes from the CSS list-style property, since the old type attribute is obsolete.
The ul element section of the HTML Living Standard (opens in a new tab) defines it as a list whose order does not matter. You can practise in the Lists lesson.
Syntax
<ul>
<li>Item</li>
</ul>When to use it
If you could shuffle the items and nothing would change, you have a <ul>. Product features, a packing list, the tags under a blog post, a block of footer links and the links in a navigation bar all qualify. Put navigation links in a ul inside nav and screen reader users hear how many links the menu has before they start.
When the sequence counts (steps, a ranking), use ol. When each item is a name with a value, use dl. And two related sentences rarely need a list at all. Write a paragraph.
One Safari quirk catches people out. Strip the bullets with list-style:none and VoiceOver may stop announcing the element as a list in some contexts. Where the list semantics count, say on a product feature list, add role="list" to the ul to bring the announcement back.
Live example
Edit the code and watch the preview.
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Fruit
<ul>
<li>Apples</li>
<li>Pears</li>
</ul>
</li>
</ul>More examples
Navigation menu
A horizontal site menu made from a ul inside nav. The CSS drops the bullets and makes each item an inline block. The links sit side by side, and assistive technology still hears how many there are.
<style>
nav ul{list-style:none;margin:0;padding:0}
nav li{display:inline-block;margin-right:1em}
</style>
<nav aria-label="Main">
<ul role="list">
<li><a href="/">Home</a></li>
<li><a href="/menu/">Menu</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>Checkmarks instead of bullets
The CSS list-style-type property takes a text string, so a pricing plan can use checkmarks in place of dots. The checkmark is a CSS escape, and the source stays ASCII.
<style>
.features{list-style-type:"\2713 "}
</style>
<h3>Starter plan</h3>
<ul class="features">
<li>5 projects</li>
<li>Email support</li>
<li>Free custom domain</li>
</ul>Tip: ul takes only li children. Put nested lists inside an li.
Browser support
ul goes back to the first versions of HTML, and every browser and screen reader handles it. The type and compact attributes are obsolete. Use the CSS list-style-type property in their place; all current browsers also let it take a custom string such as a checkmark or an arrow.
Accessibility
A screen reader announces a list and its item count, so users know how long it is before they start. That needs real ul and li markup; lines starting with typed dashes or bullets get none of it. Real lists are one of the main examples in the W3C note Understanding Info and Relationships (opens in a new tab).
Common mistakes
Wrong
<ul>
<p>Fruit</p>
<li>Apple</li>
</ul>Right
<p>Fruit</p>
<ul>
<li>Apple</li>
</ul>Only li (and script or template) can sit directly in a ul.
Wrong
<ul>
<li>Fruit</li>
<ul><li>Apple</li></ul>
</ul>Right
<ul>
<li>Fruit
<ul><li>Apple</li></ul>
</li>
</ul>A nested list has to sit inside one of the parent ul's li elements.
Frequently asked questions
What is the difference between ul and ol in HTML?
Whether the order means something. A <ul> is for items in any order, like features or ingredients, and browsers give it bullets. An <ol> is for sequences, like recipe steps or a ranking, and gets numbers. Both hold only <li> elements. Choose by meaning; CSS can change the markers anyway. To see what list markup a visual editor writes, open a WYSIWYG HTML editor (opens in a new tab) that shows the source next to the preview.
How do I remove bullet points from a ul?
With CSS: ul{list-style:none;padding:0;margin:0}. list-style takes the markers away and zero padding removes the default indent. One catch: Safari with VoiceOver may stop announcing a list once it has list-style:none. If you need it announced, add role="list" to the ul.
Practise it
- Lists (Module 2: Text)
- Nested Lists (Module 2: Text)
- Project: Recipe Card (Module 2: Text)
- Relative and Absolute Paths (Module 3: Links and Media)
- New Tabs and Page Jumps (Module 3: Links and Media)
- Project: Travel Postcard (Module 3: Links and Media)