HTML Lists

Introduction

List elements encode sequence and grouping semantically — screen readers announce item counts, browsers style bullets consistently, and search engines infer step-by-step content from ordered lists. Shopify checkout steps, BBC recipe methods, and Google help articles use proper ol/ul; div+br faux lists fail AT and snippet extraction.

Business problem

Fake lists with manual bullets or numbered paragraphs break list navigation, confuse ordered procedures (legal terms acceptance), and lose featured snippet eligibility for how-to content.

• Legal: Numbered policy steps as p tags — enforceability disputes when order ambiguous.
• A11y: VoiceOver list rotor empty on marketing features section — divs with emoji bullets.
• SEO: Recipe sites lost HowTo rich results after list markup regression.

Why this feature exists

Structured documents needed enumerations beyond plain paragraphs. ul/ol from early HTML; dl for term-definition pairs in glossaries and metadata-like patterns.

• History: type attribute on ol deprecated — use CSS list-style.
• Nested lists: Implicit structure for outlines — still valid for sitemaps in HTML.
• menu: Deprecated for toolbars — use ul nav patterns.

Browser internals

List items (li) generate list item accessibility nodes with position in set and level. Only li should be direct child of ul/ol — parser may fix invalid markup unpredictably. value attribute on li sets numbering continuation.

• CSS list-style: none removes marker — AT still counts items if semantic list.
• display:flex on li: Marker may disappear — use ::marker or padding.
• dl: dt/dd pairs — multiple dd per dt allowed.

ul → list role, children li → listitem
ol → list + ordered state
Invalid: ul > div > li — fix or broken hierarchy

Rendering workflow

List markers paint via list-item display — outside marker doesn't affect text box width in default CSS. Long lists increase DOM depth — 200 li FAQ on one page fine for SEO but consider details/summary chunking for INP on expand all.

• CLS: Custom bullet images without size shift text on load.
• Columns: column-count on ul splits list visually — DOM order preserved for AT.
• Print: ol counters continue across page breaks — CSS counter-reset may differ.

Feature deep dive

Choose list type: ul for unordered sets, ol when order matters (steps, rankings), dl for name-value pairs. Navigation menus are ul inside nav with links in li. Don't use br between items.

• Nested: Sub-steps in ol nested ol — numbering restarts per spec unless start/value set.
• aria: Rarely need role=list override — keep native semantics.
• Empty li: Avoid — remove or use aria-hidden spacer differently.

<nav aria-label="Footer">
  <ul>
    <li><a href="/about">About</a></li>
    <li><a href="/help">Help</a></li>
  </ul>
</nav>
<ol>
  <li>Preheat oven to 180°C</li>
  <li>Mix dry ingredients</li>
</ol>

Accessibility analysis

Screen readers say "list, 3 items" — aids skim. Ordered lists communicate step sequence — critical for instructions and error recovery steps. Removing list semantics with role=presentation on ul removes benefits intentionally only for decorative bullets.

• WCAG: 1.3.1 — lists programmatically determinable.
• Keyboard: Links inside li one tab per link — good.
• Definition lists: dt as term — announce paired dd.

SEO impact

Ordered lists help Google extract steps for featured snippets and HowTo schema alignment. FAQ pages with ul of questions benefit when paired with structured data — list HTML reinforces structure.

• Recipes: ol for instructions — image search + snippet pipeline.
• Breadcrumbs: ol with schema.org BreadcrumbList JSON-LD mirror.
• Keyword stuffing: 100-item ul of cities — thin content signal.

Security considerations

List injection in CMS comments as ul/li — XSS if li contains script. Low risk alone; sanitizer allowlist tags ul ol li dl dt dd. User profile hobby list — encode text nodes.

• Markdown: Auto ul generation — validate nested depth DoS.
• Email: List styles inconsistent — test Outlook bullet rendering.
• PDF gen: List counter manipulation — not web security but doc integrity.

Performance impact

Huge lists (10k li) rare in marketing HTML — search results pages paginate. Virtualized lists in React often wrongly use div role=list — native ul can't virtualize easily; acceptable tradeoff documented. Airbnb amenity lists ~30 items — negligible cost.

• DOM: Prefer single ul over 30 p with bullet character — smaller, semantic.
• Hydration: SSR list matches client — avoid re-wrapping items.
• CSS: list-style-image external URL — extra request per list type.

Real production example

Google support articles template: ol for numbered troubleshooting, ul for related links sidebar, dl for metadata (Applies to, Last updated). Consistent class on ul for spacing — not div lists.

• CMS: Rich text outputs ul/ol — block "fake list" paragraph style.
• Legal: Terms acceptance steps in ordered ol — print CSS preserves numbers.
• i18n: RTL lists mirror padding — logical properties in CSS.

<article>
  <h2>Steps to verify domain</h2>
  <ol>
    <li>Add TXT record at DNS host</li>
    <li>Click Verify in admin</li>
  </ol>
</article>

Enterprise usage

Design systems document List component wrapping ul/ol — never Fragment of li without parent. Enterprise wikis export to Confluence preserving list HTML for accessibility in intranet search.

• Lint: eslint-plugin-jsx-a11y enforces ul > li structure in React.
• PDF: Legal ol in contracts generated from same HTML template.
• Email: Inline styles on ul padding for clients stripping head CSS.

Common production failures

Recipe publisher changed ol to div for "design flexibility" — HowTo rich results dropped 90%. Insurance site numbered exclusions as paragraphs — regulators flagged ambiguous clause ordering.

• Nav regression: div flex nav — rotor couldn't list links as set.
• Nested abuse: 8-level nested ul for SEO footer links — manual action.
• Counter CSS: Broken @counter-style — steps showed all "1." visually while AT correct.

Architecture review questions

• Are enumerations using ul/ol/dl instead of paragraphs with manual markers?
• Does order matter — if yes, is ol used with correct start/value when resuming?
• Are navigation menus structured as ul > li > a inside nav?
• Do nested lists reflect true hierarchy without excessive depth?
• Are definition lists used for term/value pairs rather than styled div rows?
• Does list CSS preserve markers or provide accessible equivalent?

Hands-on project

Convert a features section from br-separated lines to ul with accessible links; add ordered setup guide ol with HowTo JSON-LD; validate in Rich Results test.

• Deliverable: VoiceOver list rotor demo.
• Verify: Print preview shows ol numbers.
• Stretch: dl glossary for technical terms on same page.

Interview questions

Try it yourself

Edit the HTML, CSS, or JS panels — the preview updates as you type.

Summary

Lists structure enumerable content for assistive technology, print, and search extraction. Staff content systems at BBC and Google enforce semantic ul/ol/dl in templates — never substitute br-separated paragraphs for real list markup.