Unordered List: What It Is and How to Use It
An unordered list is a simple HTML structure used to group related items where order doesn’t matter. It helps present information cleanly and scannably, making content easier to read. Below are what it is, when to use it, and practical examples.
What is an unordered list?
An unordered list displays items with bullet points (•) instead of numbers. In HTML it’s created with the
- tag and each item with
- . Visually,
When to use unordered lists
- Grouping features, benefits, or attributes
- Navigation menus and sidebars
- Checklists where order doesn’t matter
- Short sets of examples or options
- Presenting multiple related links or resources
Accessibility and semantics
- Use semantic
- and
- elements (not just styled
s) so screen readers and assistive tech interpret the content correctly.
- Avoid overly long lists; break into sections with headings if needed.
- Add aria-label or aria-labelledby to clarify purpose when context isn’t obvious.
- elements (not just styled
Styling tips
- Keep bullets consistent with your design by using CSS:
css
ul { list-style: disc; margin-left: 1.2rem; }ul.circle { list-style: circle; }ul.none { list-style: none; padding-left: 0; }- For custom icons, use list-style-image or background images on li, or use ::before pseudo-element with content and font icons.
- Control spacing with margin and padding on ul and li for better readability.
Examples
- Simple feature list:
- Fast performance
- Low memory usage
- Cross-platform support
- Navigation menu (semantic):
- Home
- About
- Services
- Contact
Best practices
- Prefer unordered lists for unordered content — don’t use them to fake layout.
- Keep list items concise; long paragraphs inside li reduce scannability.
- Use headings to organize multiple lists.
- Ensure sufficient contrast for bullets and text for readability.
An unordered list is a small, flexible tool that improves clarity and structure when used properly.
Leave a Reply