Learn how to structure non-sequential content using the HTML unordered list element (<ul>) and its list items (<li>).
What it is
An unordered list, represented by the <ul> tag, is a block-level element used to group related items where the order does not convey meaning. Each item within the list is wrapped in an <li> (list item) tag. Browsers typically render these with bullet points, though this can be changed via CSS. This structure is semantic, meaning it tells assistive technologies like screen readers that the content is a collection of discrete items.
Why it matters
- Semantic Clarity: It clearly defines groups of navigation links, features, or ingredients for search engines and accessibility tools.
- Consistent Styling: Provides a standard hook for CSS to apply spacing, indentation, and bullet styles uniformly.
- Nesting Capability: Allows for hierarchical data structures by placing one
<ul>inside another<li>. - Accessibility: Screen readers announce the number of items in the list, helping users understand the scope of the content.
Syntax or steps
The basic pattern requires opening the <ul> tag, adding one or more <li> elements containing text or other HTML, and closing the </ul> tag. The <li> tags are direct children of the <ul>. You cannot place text directly inside <ul>; it must be inside <li>.
Example
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact</li>
</ul>In this example, the browser will display three bulleted items: "Home", "About Us", and "Contact". If you wanted to nest a sub-list under "About Us", you would place a new <ul> inside that specific <li>.
Common mistakes
- Missing
<li>wrappers: Placing text directly between<ul>tags causes invalid HTML and unpredictable rendering. Always wrap content in<li>. - Using lists for layout: Do not use
<ul>just to create columns or grids without semantic grouping. Use CSS Flexbox or Grid for layout instead. - Forgetting closing tags: While browsers often auto-close
<li>, explicitly closing them ensures consistent parsing across different environments. - Incorrect nesting: A
<ul>cannot contain another<ul>as a direct child; the inner list must be inside an<li>of the outer list.
When to use it
Use <ul> when the sequence of items is irrelevant. Use <ol> (ordered list) when the sequence matters, such as step-by-step instructions or ranked results.
| Element | Best For | Visual Cue |
|---|---|---|
<ul> |
Navigation menus, feature lists, shopping carts | Bullets (•) |
<ol> |
Recipes, tutorials, top 10 rankings | Numbers (1., 2.) |
Practice
Guided Exercise: Create a simple navigation menu with three links: "Blog", "Portfolio", and "Resume". Wrap each link in an <li> and all items in a single <ul>.
Challenge: Modify your previous code to add a nested list under "Portfolio" containing two project names. Ensure the inner list is correctly placed inside the "Portfolio" <li>.
Quick check
Question: Can you place a paragraph (<p>) directly inside a <ul>?
Answer: No. Only <li> elements are valid direct children of <ul>. Any other content must be wrapped in an <li>.
Summary
The <ul> element is essential for structuring collections of items where order is not significant. By pairing it with <li> tags, you create accessible, semantically correct markup that serves both human users and machines effectively.