Unordered List: A Practical Guide
An unordered list is a simple HTML structure used to present items without implying a specific order. It’s commonly rendered as bullet points and is ideal for grouping related elements like features, steps without priority, or short collections.
When to use an unordered list
- Listing features or benefits
- Grouping navigation links
- Presenting short, related items where order doesn’t matter
HTML syntax
Use the
- tag for the list and
- for each item:
html
<ul><li>First item</li> <li>Second item</li> <li>Third item</li></ul>Styling tips (CSS)
- Change bullet style:
css
ul { list-style-type: disc; } /* options: circle, square, none */- Add spacing:
css
ul { margin: 0 0 1em 0; padding-left: 1.25em; }li { margin-bottom: 0.5em; }- Custom bullets:
css
li { list-style: none; }li::before { content: “•”; color: #1a73e8; display: inline-block; width: 1em; margin-left: -1em;}Accessibility best practices
- Use semantic
- /
- elements rather than styled
s.
- Ensure sufficient color contrast for custom bullets.
- For nested lists, keep structure clear and avoid overly complex nesting.
- elements rather than styled
Examples of use
- Feature list on a product page
- Steps in a non-sequential checklist
- Menu/navigation items
Summary
Unordered lists are a fundamental HTML tool for presenting non-sequential items clearly and accessibly; combine semantic markup with simple CSS for the best results.
Leave a Reply