I use them for progressive enhancement. If javascript is available, I'll add a dynamically generated href, or call .addEventListener("click", ...) and add behaviour to the link. Buttons can be used sometimes, but if you're wanting something that behaves like a link: middle click works, right click "Open in new Tab", Copy link, etc. then a button doesn't work.

I prefer to use buttons to affect the state of the current page. And use anchor tags for all other navigation, even if I'm handling it with .addEventListener("click", ...).

I suppose I could just hide the non-functional links, or add them dynamically with javascript. But that could affect layout.

If it’s not going to work if JavaScript is unavailable, I would suggest either adding it dynamically with JavaScript, or else omitting the href attribute so that it’s not a link; this could be paired with hiding it, or just giving it attributes like title="JavaScript is required for this link to work" and style="cursor: not-allowed". (Maybe aria-hidden="true" too.)

That's a reasonable option, I'll have to try that. My only concern is that when an anchor tag has no href attribute, the styling is different. It usually behaves as plain text, if I remember correctly, which is really confusing if you expected a link. Nothing that styling can't fix, but that's why, historically, I have always tried provide an href tag, even if it's just href="javascript:void 0".

Still, your solution is nicer in many ways, thanks.

My point is that it semantically isn’t a link until the JavaScript executes (if it ever does). A link is something you can click on and it does something.

But yeah, stylesheets might need adjustment for best results if you want to keep it on-screen even when it’s not operative, e.g. add a class link-needs-js which you style along with your :link, :visited.

In the hidden versus disabled thing, I do approximately this, if I have functionality that can’t work without JS (for whatever reason): if it’s completely optional, I hide it; if it’s important, I show it with a disabled style including not-allowed cursor (the disabled attribute if it’s a button, or a class if it’s an anchor) and some kind of “JS required” title, to at least give a hint as to why it’s not working and what the user must to do make it work. Anything between those extremes, I decide on a case-by-case basis, being influenced also by what else is there and does work.