How

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
    • 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.

If you want examples in Markdown, CSS snippets, or accessible patterns, say which one.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *