An unordered list is a way to present a group of related items where order doesn’t matter. Key points:
- Purpose: Display simple collections (features, options, ingredients) without implying sequence.
- Visuals: Typically shown with bullets (•, –, ○) or custom icons.
- HTML: Use the
- element with
- children.
- Example:
- Item A
- Item B
- Item C
- Example:
- Accessibility:
- Keep list items short and self-contained.
- Use semantic lists for screen readers; avoid using lists solely for layout.
- If items contain complex content, wrap each in a block element (e.g.,
or
) inside the
- .
- Styling:
- Control bullets with CSS (list-style-type, list-style-image, list-style-position).
- Remove default spacing with margin/padding adjustments.
- Use flex/grid inside
- for complex layouts.
- When to use:
- Use unordered lists for non-sequential or grouped items; use ordered lists (
- ) when sequence or ranking matters.
- Use unordered lists for non-sequential or grouped items; use ordered lists (
- children.
If you want examples in Markdown, CSS snippets, or accessible patterns, say which one.
Leave a Reply