Hacker News Reader

Comment by elliekelly | Hacker News Reader

> Very few people have the skill to turn a div into an effective button, yet over and over I see web sites with rows of buttons which are in fact just divs with javascript behind them.

What was the catalyst behind this trend? I just don’t understand the reason behind it. Hasn’t <button> been around forever? Was there some limitation on the button tag that made the div tag more desirable?

View on HN

You’ll find it’s because until “recently” (depending on how long you’ve been in this game, cough some of us since before css was even a thing) buttons weren’t stylable like they are now.

There’s no good reason to just not use buttons these days, but for a long time that wasn’t the case (cross platform).

<div> is also substantially older than both <button> and <input type="button">. The only button like thing before HTML4 was <input TYPE=SUBMIT>.

And, as you mention, the default styling was typically "make it look like the button in the underlying OS".

So there was a lot of inertia from existing code, examples, and docs that predated buttons. And a (misinformed) avoidence of it when it did appear because of styling.

The button html element is old enough to vote.

Since it's introduction, jQuery was born and died. Backbone was created and became obsolete. React took over the internet. Webpack, babel, and node were invented.

With all that change, I think it's safe to say web technologies are adopted or not based on inertia.

I think you are being over-generous.

Perhaps. I happen to be in a space with lots of "old enough to vote" code still running.

On the other hand, the Compose "button" in gmail is ... a <div>:

<div class="T-I T-I-KE L3" style="user-select: none" role="button" tabindex="0" jscontroller="eIu7Db" jsaction="click:dlrqf; clickmod:dlrqf" jslog="20510; u014N:cOuCgd,Kr2w4b" gh="cm">Compose</div>

Maybe came across more crossly than I intended... I have a blog I started in the 90s so I hear you.

FWIW, my issue with using divs is not that they should never be used as buttons. It's that few people who use them that way go to the effort of doing it correctly. It's absolutely possible to do it right and have a functioning/ accessible js button.

Either go the full way and do it right—with accessibility—or just style the standard components. In most cases the latter is the easiest way to go if you care about getting it right.

I suspect a lot has to do with the fact that it's easier to slap together a quick list/ menu thing than it is to make a select box look the way a designer wants it to. Similarly with calendar components, radio buttons, etc.

What has happened in that scenario is that the designer has failed in their job. Unfortunately it’s up to engineers to catch this, which they often don’t

If the site looks correct visually, the designer has actually completed their job. You’ll find that very few businesses care how a page is implemented and happily pay for shit html if it looks right.

That might be the way many companies work, doesn’t mean it’s correct. Design is more than how things look, in fact how things look is secondary.

But that’s what a designer’s “job” is when they work for a company.

This painfully reminds me of ages ago, pre-ie6 even, when we would get html-tables, spacergifs and whatnots, blurped out by ancient Dreamweaver, Paint Shop Pro slices and such.

It looked good. But hardly worked.

Apparently the web hasn't really changed in that part: we're still churning out HTML that hardly works, but "looks good".

Designers don't really know or understand the limits of how you can style a select box. Nor should they need to. A good team will work together around the limits.

Also, FWIW some of the problem is with the browser makers (still!!). CSS still has a lot of browser specific quirks when working with some components.

I'm sure the designers who work on GDS[0] and its design system do. You are probably right that most don't, they should in my opinion. Of course you are also right that good teams will work together on this. I think the best designers have an understanding of HTML/CSS or the native toolkits if they work on Android/iOS. They know when the user experience will be signficantly improved by a custom component and work with their team to make it accessible and good in those case. They also know when not to reinvent a select to make it look slightly better.

This subthread is about why divs are used for buttons and why developers reimplement existing HTML components poorly. Good designers help their teams avoid this, good engineers work with their designers to avoid it.

0: https://www.gov.uk/government/organisations/government-digit...

> Designers don't really know or understand the limits of how you can style a select box. Nor should they need to.

Designers absolutely need to be aware of and work within their platform's constraints, like a painter needs to understand and work with the physical characteristics of their canvas. It's this kind of mentality that results in visual specs that read "Make the window look exactly, to the pixel, like this Photoshop image!"

“ Nor should they need to.”

It’s funny - I’d expect an interior designer to know something about the limitations of the materials they work with.

Why don’t we expect this of digital designers?

Interior designers know their limits too. For example a good one won't try to move walls without consulting an engineer.

I think that's somewhat like what the relationship between designers and developers should be.

Perhaps so - but not understanding styling options for a component seems like the wrong limit.

Ironically, it's because of the ARIA Authoring Practices guidelines[1], which include exactly this sort of nonsense[2].

[1] https://www.w3.org/TR/wai-aria-practices/

[2] https://www.w3.org/TR/wai-aria-practices/#examples

I was listening to a podcast and they were talking about using semantic HTML instead of piles of divs. One of the things they mentioned was that a survey of public web sites showed that the presence of ARIA in html was usually a sign that a site would have poor usability. Mostly because it's a sign that the site has abandoned standard HTML and went their own way and tried to patch things up by smearing aria properties everywhere.

That seems like a misinterpretation of ARIA guidelines. I'm pretty sure the guidelines are meant as "if you are going to use a div as a button, do this", not "do this instead of using a button".

Quite so.

My guess is that some learn react et al without ever really learning HTML first.

That's entirely possible. I've seen a React tutorial that shows a simple example HTML snippet, and comments on it with "We’ll get to the funny XML-like tags soon."

And then there's jsx, which is different from html in some important ways, and generally a little closer to xml.

Perhaps because buttons have some default styles attached and people just decided to use a div.

That's what a CSS reset is for.

HTML buttons have special behaviour in CSS (not even styles, but differences in the rules how they work) that cannot be reset using a CSS reset. I actually tried to make a button fit into the reset of the UI until I gave up and used a div.

Like what? I can't think of any "special behaviour" that I would not want to have in a button and that cannot be changed by CSS.

Vertical alignment.

"button are special element and their content is always vertically aligned by default. Even all the propertise are the same, if you don't center the text in the link, you won't get the same visual"

https://stackoverflow.com/questions/64766922/what-can-make-t...

Reply on news.ycombinator.com