List-Item
A list-item is a fundamental unit in structured content—used in documents, web pages, applications, and data formats—to represent a single entry within an ordered or unordered list. Understanding list-items helps you present information clearly, improve readability, and enable programmatic processing.
Types and semantics
- Unordered list-item: typically rendered with bullets; conveys no inherent sequence.
- Ordered list-item: numbered; implies sequence or priority.
- Definition list-item: pairs a term with its description (term → definition).
- Interactive list-item: includes controls (checkboxes, links, buttons) for user actions.
Structure and formatting
- Plain text: each item on its own line, often prefixed with a dash or number.
- HTML: use
- or
- elements for list-items.
- containers with
Accessibility
- Use semantic elements (HTML
- ,
- ) so assistive
- ,
Design best practices
- Keep items short: one idea per item.
- Use parallel structure: consistent grammar across items.
- Group related items: split long lists into sublists or sections.
- Highlight actions: make clickable elements obvious and provide affordances.
Examples
- Shopping list (unordered): milk, eggs, bread.
- Steps to bake a cake (ordered): 1) Preheat oven, 2) Mix ingredients, 3) Bake.
- JSON array: [“milk”,“eggs”,“bread”] — each element is a list-item.
When to use
- Presenting multiple choices, steps, features, or tasks.
- Breaking complex information into digestible pieces.
- Enabling programmatic iteration, filtering, or reordering.
Concise, well-structured list-items improve comprehension and usability across content and interfaces.
Leave a Reply