alt.hn

5/16/2026 at 4:58:26 PM

HTML Lists

 https://blog.frankmtaylor.com/2026/05/13/you-dont-know-html-lists/

by speckx

5/16/2026 at 5:23:20 PM

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).

by appplication

5/16/2026 at 8:05:19 PM

The datalist examples definitely work on my iPhone. They integrate into the autocomplete suggestions above the native iOS keyboard. There’s no way to browse all the suggestions, but I suppose that’s not an intended use case for datalist.

However, the disabled attr on group definitely does not work!

by tshaddox

5/16/2026 at 9:04:18 PM

It seems the autofill bar only populates with the first three items in the datalist and also does not clear when navigating to a regular text field like this one. Kind of an interesting way to have screwed it up.

by king_geedorah

5/17/2026 at 4:15:07 PM

It initially populates with the first 3 options, but it also updates as you type, with what appears to be a case-insensitive prefix filter.

by tshaddox

5/16/2026 at 8:12:21 PM

That’s funny, in my case it tries to autofill my contact information

by appplication

5/17/2026 at 5:29:54 AM

Ugh this is the dose of cold water from reality that I didn't want but definitely needed.

More than a decade ago I had a project that used a pretty aggressive input-suggestion widget on the UI. We used a jQuery plugin for it and it was by far the most complicated part of the frontend. In fact, it was the main use-case for jQuery in that project.

Reading the article, I thought it would be pretty much a breeze re-implementing that frontend in a lightweight JS-minimalist version. But of course, unless I ship my machine to the users, not really. Sad state of affairs.

Nonetheless, I'm really impressed with what's included in the HTML spec nowadays! I haven't kept-up with developments in the spec since I read all about XHTML in high school. I ought to take some time every now and then to see what's changed though, again, browser compatibility is a PITA today as it was back in high school.

by yallpendantools

5/16/2026 at 7:23:54 PM

Doesn't work with Firefox on Android either.

by VorpalWay

5/16/2026 at 5:49:44 PM

Way back when I was working my first job, datalist didn’t work on Firefox. That’s what got Firefox removed from the list of supported browsers.

It has been a problem for a long time if you want to support anything other than Chrome.

by MattGaiser

5/16/2026 at 7:00:30 PM

> It has been a problem for a long time if you want to support anything other than Chrome.

That's partially because Chrome keeps adopting standards nobody else wants to support.

by Levitating

5/16/2026 at 7:01:59 PM

Both things can be true. Chrome supports a bunch of non standard APIs but it also has some of the best coverage of standard APIs.

by afavour

5/17/2026 at 10:22:20 AM

With Google coming up with most of the new stuff and having chairs in the committees, that's hardly surprising.

by tosti

5/16/2026 at 6:40:42 PM

They work well but not with GBoard on iOS.

by carlosjobim

5/16/2026 at 7:40:45 PM

Mind that input + datalist is the HTML equivalent of the Windows combobox, once generally regarded as the worst UI element ever. (This was enjoying meme status in usability related articles and write-ups. So probably not a recommendation.)

by masswerk

5/17/2026 at 8:14:46 AM

What’s the better alternative for letting the user input arbitrary text with an easier way to input known options?

by xigoi

5/16/2026 at 5:33:53 PM

>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.

by VladVladikoff

5/16/2026 at 5:40:22 PM

Not broken, but strange since it should be working on latest Safari.

https://caniuse.com/mdn-html_elements_optgroup_disabled

I think it may be a Safari bug.

by p2detar

5/16/2026 at 6:01:31 PM

Your link states it's not supported in iOS Safari at all, even though it has been supported in macOS Safari since 2013.

by quantumleaper

5/16/2026 at 7:52:52 PM

Ha! You're right. Ironically, I was viewing it on my phone and I only saw the "Safari" column and not "Safari on iOS".

by p2detar

5/16/2026 at 6:16:19 PM

Came here to mention the same thing. Very well be on me, tho. I’m using the Brave browser (is it safari-powered?) and on iOS 18.7.9, which is the newest my old iPhone X supports.

by tvmalsv

5/16/2026 at 6:33:25 PM

I think on iphone everything is safari powered(?)

Also doesnt work for me on iPhone Firefox

by somewhatgoated

5/16/2026 at 10:31:19 PM

This is the kind of thing I struggle with on using native HtML for more than the basics. Even if you do enough reading and have enough confidence to write an article like this the comments end up with quirks, limitations, or notes on lack of support about different browser+device combos.

Div soup is probably a bit far in the opposite direction, but even then it's at least pretty consistent and apparent what the quirks and limitations are because it aligns with what you or the framework wrote much more consistently.

by zamadatix

5/16/2026 at 6:36:17 PM

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.

by dzonga

5/16/2026 at 6:59:27 PM

I think that’s OK.

When I first had to use XML, I had to learn the XML spec and output it manually - serialization libraries didn’t really exist yet. I’ve since seen generation of juniors come up through the ranks using XML as an interchange format (and then JSON) without ever learning it fully. It was fine, and nothing terrible happened.

I’ve seen AJAX go from the hot new thing to people not knowing what it stood for, to now most people not even recognizing the term. AJAX didn’t die; it became so common we don’t need a word for it anymore.

by Ancapistani

5/16/2026 at 9:27:12 PM

Kind of like JQuery. I know why it was such an incredible library and am happy no new devs I work with (a) know what it is (b) understand why it was necessary.

Thank god the underlying language, libraries, and browser support have moved forward. And IE6 is dead. God, what a nightmare.

by tyre

5/16/2026 at 9:37:33 PM

I remember when IE6 was the shiny new solution that we desperately wanted :).

IE 5.5 was much, much worse, and there was a long time there when it didn’t get any updates at all.

by Ancapistani

5/17/2026 at 2:55:01 PM

if you learnt Ajax - it still works just like it did whether you're using the XHR api or the newer fetch api.

html forms still work the same way.

can one say the same for the various form libraries for react or state solutions.

by dzonga

5/17/2026 at 6:31:15 PM

I’m aware of the entire progression, and objectively I’ve seen juniors come up without knowing “the old ways” at all. I’m not sure it’s a problem, but I also can’t quite wrap my head around the way they understand systems.

by Ancapistani

5/16/2026 at 11:32:55 PM

My problem is I thoroughly learned HTML twenty years ago and am only incidentally aware of how it has changed and improved since. Doubly so for CSS.

by anotherevan

5/16/2026 at 7:58:47 PM

To be honest HTML is a pain.

For example the HTML approach to style parts of a control is to use pseudoclasses. Sometimes the selectors are different across browsers! Then you have to test across browsers because who knows if it will actually work correctly.

React is not just easier it's more dependable. If I make something with React and some divs I know it's going to work the same in all browsers.

by zarzavat

5/16/2026 at 10:40:31 PM

The selectors are not different. Whatever problems you have applying styles to html elements also exist in react.

by recursive

5/17/2026 at 5:49:13 AM

Yes they are.

For example, Blink/Webkit allow <meter> and <progress> to be styled. Firefox does not support those pseudoclasses so you can't style those elements cross browser.

Then there is <input type="range">

    Blink, Webkit:
    
    ::-webkit-slider-thumb
    ::-webkit-slider-runnable-track
    
    Firefox:
    
    ::-moz-range-thumb
    ::-moz-range-track
    ::-moz-range-progress
If I build a meter or progress bar in React, I can easily style it and because it uses divs and not wonky pseudoclasses then it looks the same in every browser.

by zarzavat

5/16/2026 at 5:34:22 PM

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.

by montroser

5/16/2026 at 7:24:29 PM

I've used a datalist for autocomplete suggestions and it's worked great.

by voidnap

5/16/2026 at 8:26:31 PM

I've had problems with <datalist> not showing when the input is misspelled, or when none of the <options> strictly begin with the input. I gave up and used an <ol> instead.

by theandrewbailey

5/16/2026 at 5:46:03 PM

I think I’ve tried building a combobox using datalist once but it didn’t work

by iammrpayments

5/16/2026 at 6:50:45 PM

As you learn more about “raw” html you find all sorts of very fun things that are - ah - not very well implemented if at all.

by bombcar

5/16/2026 at 7:34:51 PM

The neat thing about HTML is that it's a living standard and anyone can contribute. Old bugs get corrected all the time simply because it annoyed a certain person enough for them to push a fix through the standards process.

Unfortunately, it could be around a decade before all three major browsers finally implement the standard, and the fix might not be quite as clean as you originally imagined.

by jazzypants

5/17/2026 at 10:26:05 AM

The reason is that there are lots of webpage authors, lots of pages that use old standards and very few browser implementations. That made the browsers carry the burden of making it all work right for everyone.

by tosti

5/17/2026 at 10:24:01 AM

Case in point: the keygen element.

by tosti

5/16/2026 at 5:52:09 PM

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.

by jdw64

5/16/2026 at 6:59:56 PM

Closest thing I know of is https://github.com/kristoff-it/superhtml#diagnostics

  SuperHTML validates not only syntax but also element nesting and attribute values. No other language server implements the full HTML spec in its validation code.

by wonger_

5/17/2026 at 6:32:31 AM

thanks!

by jdw64

5/17/2026 at 10:32:46 AM

Enforce semantic tags? HTML is first and foremost meant for authors to get creative. Enforcing one tag over another doesn't make sense to me. Accessibility yes, but there are plenty of constraints already.

by tosti

5/16/2026 at 7:19:58 PM

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

by nektro

5/16/2026 at 11:14:41 PM

Because for the user experience, it is identical to <ul>. Use <menu> if it helps you to understand your code but in the browser's accessibility tree and in all other respects, it's just an unordered list.

Conveying that something is a list of actions requires adding ARIA attributes. The article mentions `role=menu` but that's not enough, each item also needs the `menuitem` role. The WAI Authoring Practices Guide explains the roles and interaction expectations; don't copy their coded examples and definitely don't use the roles for navigation menus.

https://www.w3.org/WAI/ARIA/apg/patterns/menubar/

by extra88

5/16/2026 at 7:33:35 PM

big brain no learn hyperspeak when many div do trick

by pphysch

5/16/2026 at 8:26:52 PM

<menu>, <dialog>, lots of fun stuff in html now.

I like to ask people what they imagine <ruby> does, because I certainly didn't guess right.

by stirfish

5/17/2026 at 1:16:58 AM

<ruby> is going to be featured in my next article: You don't know HTML…Semantics.

I'm debating whether that one will be one or two articles because I'm going to be covering everything from <ruby>, <bdi>, <bdo> all the way through <var>, <kbd>, <samp>, <cite>, and <q>.

After that one, I'll probably have something like, "You don't know HTML interactions" or something to cover <dialog>, <popover>, and the Invoker API.

So sit tight; it's all coming.

by paceaux

5/16/2026 at 11:16:23 PM

<dialog> is awesome, especially when combined with Invoker commands or `popover`. <menu> does nothing, it's just another name for <ul>.

by extra88

5/16/2026 at 5:22:52 PM

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.

by jimmaswell

5/16/2026 at 9:24:57 PM

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

by tuzemec

5/17/2026 at 3:26:06 AM

In my experience, lack of style customizability is the biggest obstacle to using native HTML features

by joshmoody24

5/16/2026 at 6:18:50 PM

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.

by WA

5/17/2026 at 8:16:34 AM

and it is not styleable

by porridgeraisin

5/16/2026 at 5:30:59 PM

This is how real HTML magic should look like:

<MARQUEE>

  <OL>
      <LI>One</LI>
      <LI>Two</LI>
      <LI>Three</LI>
  </OL>
</MARQUEE>

by reconnecting

5/16/2026 at 5:36:58 PM 

    <BLINK>
      <MARQUEE>
        <OL>
          <LI>One</LI>
          <LI>Two</LI>
          <LI>Three</LI>
        </OL>
      </MARQUEE>
    </BLINK>
FTFY

by recroad

5/16/2026 at 6:24:00 PM

blink wont work, but marquee will

by Trufa

5/16/2026 at 6:34:12 PM

Not with that attitude:

    <style>
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
    
    blink { animation: blink 0.7s infinite; }
    </style>

    <blink>This guy blinks.</blink>

by wwweston

5/16/2026 at 6:58:53 PM

What version of Macromedia Dreamweaver did you use to make this?

by reconnecting

5/16/2026 at 10:51:02 PM

Wasn't it more like this?

    <style>
    @keyframes blink {
        0% { visibility: visible; }
        50% { visibility: hidden; }
        100% { visibility: visible; }
    }
    
    blink { animation: blink 0.7s steps(1, end) infinite; }
    </style>

    <blink>This guy blinks.</blink>

by panzi

5/16/2026 at 6:39:10 PM

people who use css are not welcome here.

by Trufa

5/16/2026 at 7:02:37 PM

It’s OK if it’s a polyfill.

Wait, not far enough back…

It’s OK if it’s a shim.

by Ancapistani

5/16/2026 at 7:15:49 PM

Since <BLINK> is gone, `BEHAVIOR=SLIDE` is the closest you'll get.

<MARQUEE DIRECTION="DOWN" BEHAVIOR="SLIDE">Slide</MARQUEE>

by reconnecting

5/16/2026 at 5:39:44 PM

<MARK>FTFY</MARK>

by reconnecting

5/17/2026 at 3:04:33 AM

- 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?

by vivzkestrel

5/17/2026 at 3:23:58 AM

You mean a sitemap? Because you're talking about a sitemap. Most blogs have a sitemap.xml that lists all of the posts.

Also, why would you want to go through all 235 posts?

by paceaux

5/16/2026 at 10:13:45 PM

DL is a definition list not a description list.

by kevinh456

5/16/2026 at 11:25:16 PM

It was changed to description list in HTML5, which you would've learned if you actually read the article

by melncat

5/17/2026 at 1:11:23 AM

This is called out explicitly in the article as a shift from HTML4 to HTML5.

by paceaux

5/16/2026 at 11:25:19 PM

In HTML 4. HTML 5 redefined it.

by timando

5/16/2026 at 7:34:26 PM

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.

by ksec

5/16/2026 at 5:24:25 PM

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

by zombot

5/16/2026 at 9:15:06 PM

Now i need one that explains the css counters

by ale

5/17/2026 at 1:06:19 AM

I will probably write an entirely separate article just on the CSS options for lists. So ... don't hold your breath. But that will come. Eventually.

by paceaux

5/16/2026 at 6:38:18 PM

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.

by einpoklum

5/16/2026 at 5:39:46 PM

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

by MagicMoonlight

5/17/2026 at 1:09:35 AM

I'm writing articles like this just because I think the internet deserves some humanity for a change. Thanks for noticing.

by paceaux

5/16/2026 at 10:21:25 PM

Yet the article and comments still feel the need to talk about AI when it was not otherwise involved. The inescapable topic!

by zamadatix

5/17/2026 at 1:10:42 AM

I'm not quite sure what you mean about that… I do have a disclaimer in the sidebar that makes it clear that I'm not using AI — but that's solely so that people can appreciate that I put actual effort into writing it.

by paceaux

5/17/2026 at 3:45:01 AM

The reply was meant to be on the GP, I must have-mis tapped, but since we're here now :D

> No need to ask AI for a summary; I’ll just give you the ending up front.

It's easy to miss how often we bring AI up about in conversation or writing given just how dominating a topic it can be in every circle these days.

by zamadatix

5/17/2026 at 4:19:46 AM

ahhh.

Yeah I put it there just to discourage folks from asking some LLM to summarize it.

I really don't want my content fed to Sam Altman.

by paceaux

5/16/2026 at 7:16:44 PM

Somehow I'm still in the mode where I'm surprised where it is, rather than when it isn't, but yeah it's annoyingly often. Do you come across it so much that it's your default expectation now?

by lucb1e

5/16/2026 at 5:56:40 PM

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

by asveikau

5/16/2026 at 6:44:26 PM

I thought of the 2000 version first which made this much funnier in my head

by ale

5/16/2026 at 8:56:39 PM

[dead]

by ShivamNayak11

5/17/2026 at 3:23:01 PM

Is this just an exercise to show how embarrassing safari is? /s

by adithyassekhar