HTML Lists

jimmaswell

Lots of useful information I wasn't aware of after being a front-end lead for years. I'll start using these at work for sure.

appplication

This was a fun little read. Just through testing the examples, I also learned datalist does not seem to work well on mobile safari (which is a large enough market I might even say there’s essentially no scenario in which it’s worth using if there’s a compatibility issue).

zombot

What I always wanted to know about lists and never dared to ask!

reconnecting

This is how real HTML magic should look like: <MARQUEE> <OL> <LI>One</LI> <LI>Two</LI> <LI>Three</LI> </OL> </MARQUEE>

VladVladikoff

>What if there’s a bunch of options, but for [reasons] we don’t want a user to be able to select a subset of them? Let’s add the disabled attribute to an optgroup Seems broken in mobile safari, not actually disabled I can still select the disabled items.

montroser

Good stuff, except don't get too excited about `datalist`. It just doesn't have enough hooks to be actually useful for anything other than a little prototype.

MagicMoonlight

That’s a really good article. It’s nice to see something which isn’t slop.

jdw64

HTML linters actually help distinguish things like that? I'm curious if there are any linters out there that can enforce this kind of semantic tag selection.

asveikau

Title reminds me of Joni Mitchell. I've looked at lists from both sides now From give and take and still somehow It's HTML lists' illusions I recall I really don't know HTML lists at all

WA

And yet, no native select + search combined, which is a very common kind of list. The datalist is basically unusable, because you don't know any of the options.

dzonga

this was a dope & comprehensive. unfortunately we have a new class of dev's that never learned html but went straight for React. Now with LLMs they will never learn HTML. hence they reach for react components where simple html would have been sufficient.

einpoklum

tl;dr: You _do_ know HTML lists, they're basicaly like they used to be 20 years ago. But there are HTML form controls which are list-like and this will tell you about them: <select> and <datalist> which have <option> elements and <menu> which has <li> elements. It's a nice read, not very long and you can kind of leisurely skim it.

nektro

TIL <menu>, I wonder why more frameworks don't make use of it.

ksec

Sigh. Just when I was cheering Safari, finally both on Desktop and on Mobile have gotten to the point of good enough. And then to find out the list don't work on Safari iOS.

ale

Now i need one that explains the css counters

tuzemec

Only if we had designers who like the default datalist appearance...

kevinh456

DL is a definition list not a description list.

vivzkestrel

- you guys write such nice blogs but i cant seem to ever get a list of all the posts on your blog in 1 go - https://blog.frankmtaylor.com/archive doesnt work - https://blog.frankmtaylor.com/archives nope - https://blog.frankmtaylor.com/posts nada - https://blog.frankmtaylor.com/all nil - https://blog.frankmtaylor.com/blog nyet - do you understand that most of us got 10000+ bookmarks and it would be really really handy if you could make a single page on your website that lists every post every written without the description or the entire article on it?