**`<ul>`** groups a set of `<li>` (list item) children where order doesn't matter semantically — ingredients, feature lists, navigation links. Browsers render each `<li>` with a bullet marker by default, which CSS's `list-style-type` can change or remove entirely. If the sequence of items genuinely matters (steps in a recipe, ranked results), use `<ol>` instead, since that carries the correct 'this order matters' meaning.
1Understanding <ul>
`<ul>` groups a set of <li> (list item) children where order doesn't matter semantically — ingredients, feature lists, navigation links. Browsers render each <li> with a bullet marker by default, which CSS's list-style-type can change or remove entirely. If the sequence of items genuinely matters (steps in a recipe, ranked results), use <ol> instead, since that carries the correct 'this order matters' meaning.
Removing bullets with CSS (list-style: none) is common for nav menus built from <ul>/<li>, but the semantic meaning — 'this is a list of items' — is still valuable for screen readers even without visible bullets.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>2Practical Example
Here is a real-world application of <ul> showing how it is used in production HTML.
<!-- Common pattern: nav menu built from an unordered list -->
<nav>
<ul style="list-style: none; display: flex; gap: 1rem;">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>3Best Practices
Follow these guidelines when working with <ul>:
1. Use <ul> when item order has no meaning
2. Use <ol> instead when sequence/ranking matters
3. Style bullets via CSS list-style-type rather than manually typing bullet characters
Tip: Removing bullets with CSS (list-style: none) is common for nav menus built from <ul>/<li>, but the semantic meaning — 'this is a list of items' — is still valuable for screen readers even without visible bullets.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>