List-Item
A list-item is a basic building block used across documents, interfaces, and code to present related pieces of information in an ordered or unordered sequence. It improves readability, groups content logically, and helps users scan and act on information quickly.
Where list-items appear
- Documents: bullets or numbered points in articles, reports, and notes.
- User interfaces: menu entries, settings, notifications, and task lists.
- Code and data: HTML
- elements, JSON arrays, and markdown lists.
- Design systems: components like cards or list rows that repeat similar content.
Benefits
- Clarity: Breaks complex information into digestible parts.
- Scannability: Enables quick scanning and prioritization.
- Consistency: Standardizes presentation across contexts.
- Accessibility: Properly structured lists help screen readers convey order and grouping.
Best practices
- Keep each list-item concise—one idea per item.
- Use parallel structure (same grammatical form across items).
- Order intentionally: by importance, chronology, or alphabet.
- Use sub-items for nested information, but avoid deep nesting.
- Ensure semantic markup (e.g.,
- /
- in HTML) for accessibility.
- with
Examples
- Shopping list: eggs, milk, bread.
- To-do list: 1) Draft report 2) Review edits 3) Send final.
- Settings menu: Profile, Notifications, Privacy.
Implementation tips (web)
- HTML: wrap items in
- or
- with <
A well-crafted list-item makes content easier to understand and act on—use them deliberately to improve information structure and user experience.
Leave a Reply