You don't know HTML Lists

Turns out your humble web list has secret rules—and the comments are losing it

TLDR: A new article says web lists are far more complicated than most people realize, with different list types meant for different jobs. Readers were split between impressed and horrified, with the biggest uproar aimed at Apple’s mobile browser reportedly not handling some features properly.

A seemingly innocent post about how to make lists on web pages somehow turned into a full-on "wait, I’ve been doing this wrong for years?" moment. The article’s big reveal is that there isn’t just one kind of list hiding in plain sight: there are several, and each has a different job. In plain English, the writer argues that if order matters, use one kind; if it’s a set of labels and definitions, use another; if people are choosing from a box, that’s a different beast entirely. It’s the kind of niche topic that sounds boring until veteran developers start admitting they learned something new.

And oh, they did. One commenter confessed they’d been a front-end lead for years and still found "lots of useful information" they plan to use at work, which is basically the professional version of "I’ve been exposed". Another called it the thing they "always wanted to know about lists and never dared to ask," giving the whole thread a support-group energy. But the real drama came from Apple’s mobile browser, with multiple people saying some of these fancy list tools seem shaky or flat-out broken there. One hot take was brutal: if a feature has problems on mobile Safari, there’s "essentially no scenario" where it’s worth using.

Naturally, the jokes arrived right on cue. One commenter responded with cursed old-school web magic, posting a scrolling <MARQUEE> around an ordered list like it was 2002 again. So yes, the article is about lists—but the real entertainment is watching the community swing between admiration, panic, browser rage, and chaotic nostalgia.

Key Points

  • The article explains that HTML provides multiple list mechanisms beyond basic unordered and ordered lists.
  • It offers a decision framework for choosing among `<select>`/`<option>`, `<input>`/`<datalist>`, `<ol>`, `<dl>`, `<menu>`, and `<ul>` based on the content’s purpose.
  • For fixed user-selectable options in forms, the article recommends using native `<select>` and `<option>` elements.
  • The article shows that the `multiple` attribute enables multi-selection in a select control without requiring ARIA listbox patterns.
  • It demonstrates using `<optgroup>` to organize related options and applying `disabled` to an optgroup to make grouped options unavailable.

Hottest takes

"Lots of useful information I wasn't aware of after being a front-end lead for years" — jimmaswell
"there’s essentially no scenario in which it’s worth using" — appplication
"What I always wanted to know about lists and never dared to ask!" — zombot
Made with <3 by @siedrix and @shesho from CDMX. Powered by Forge&Hive.