Unordered Lists
An unordered list (<ul>) groups items where the order doesn't matter — a shopping list, a set of features, a list of navigation links. Each item lives inside an <li> (list item), and browsers render them with a bullet by default.
Basic Syntax
ul-basic.html
<ul> <li>Milk</li> <li>Eggs</li> <li>Bread</li> </ul>
Each <li> is a separate item, and the <ul> wraps the whole group. Browsers indent the list and prefix each item with a bullet (•) by default.
Default Bullet Styling
The bullet character, indentation, and spacing are all CSS territory — the browser's default stylesheet applies list-style-type: disc and some padding, but you can restyle or remove them entirely.
ul-styled.html
<style>
.plain-list {
list-style-type: none;
padding-left: 0;
}
.square-list {
list-style-type: square;
}
</style>
<ul class="plain-list">
<li>No bullet, no indent</li>
<li>Useful for nav menus</li>
</ul>
<ul class="square-list">
<li>Square bullet</li>
<li>Another item</li>
</ul>disc (default), circle, square, and none are the most common values. You can also swap in a custom marker image with list-style-image, or use the ::marker pseudo-element for finer control (covered in the list-items tutorial).Nesting Unordered Lists
Put a <ul> inside an <li> to create a sub-list. Browsers usually change the bullet style at each nesting level (disc → circle → square) to help visually distinguish levels.
ul-nested.html
<ul>
<li>Frontend
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Databases</li>
</ul>
</li>
</ul>Semantic Use — Order Doesn't Matter
The defining trait of <ul> is that shuffling the items wouldn't change the meaning. If sequence is meaningful — steps in a recipe, rankings, a numbered procedure — use <ol> instead (covered next).
Good <ul> candidates: a list of features, tags, ingredients, navigation links, or search results.
Bad <ul> candidates: numbered installation steps, a race's finishing order, a top-10 countdown — these need <ol>.
Quick Reference
Attribute/Property | Purpose |
|---|---|
<ul> | Wraps the whole unordered list |
<li> | One list item (must be a direct child of <ul>) |
list-style-type (CSS) | Controls the bullet marker style |
<ul> should only directly contain <li> elements (or <script>/<template> for edge cases). Never put text or other block elements directly inside <ul> outside of an <li>.