5 ms·

> 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

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

recursive 6y ago
My guess is that some learn react et al without ever really learning HTML first.
- pferde 6y ago
  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."
  - recursive 6y ago
    And then there's jsx, which is different from html in some important ways, and generally a little closer to xml.
ogre_codes 6y ago
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.
- K0nserv 6y ago
  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
  - kortilla 6y ago
    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.
    - K0nserv 6y ago
      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.
      - kortilla 6y ago
        But that’s what a designer’s “job” is when they work for a company.
    - berkes 6y ago
      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".
  - ogre_codes 6y ago
    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.
    - K0nserv 6y ago
      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-digital-service https://www.gov.uk/government/organisations/government-digit...
kodt 6y ago
Perhaps because buttons have some default styles attached and people just decided to use a div.
- grishka 6y ago
  That's what a CSS reset is for.
  - moring 6y ago
    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.
    - FrontAid 6y ago
      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.
      - moring 6y ago
        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-two-elements-with-equal-css-properties-look-different https://stackoverflow.com/questions/64766922/what-can-make-t...
aidos 6y ago
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).
- tyingq 6y ago
  <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.
  - ogre_codes 6y ago
    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.
    - tyingq 6y ago
      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>
      - ogre_codes 6y ago
        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.
inopinatus 6y ago
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/ https://www.w3.org/TR/wai-aria-practices/ [2] https://www.w3.org/TR/wai-aria-practices/#examples https://www.w3.org/TR/wai-aria-practices/#examples
- ogre_codes 6y ago
  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.
- TheCoelacanth 6y ago
  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".
  - inopinatus 6y ago
    Quite so.

recursive 6y ago

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

pferde 6y ago
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."
- recursive 6y ago
  And then there's jsx, which is different from html in some important ways, and generally a little closer to xml.

ogre_codes 6y ago

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.

K0nserv 6y ago
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
- kortilla 6y ago
  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.
  - K0nserv 6y ago
    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.
    - kortilla 6y ago
      But that’s what a designer’s “job” is when they work for a company.
  - berkes 6y ago
    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".
- ogre_codes 6y ago
  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.
  - K0nserv 6y ago
    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-digital-service https://www.gov.uk/government/organisations/government-digit...

kodt 6y ago

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

grishka 6y ago
That's what a CSS reset is for.
- moring 6y ago
  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.
  - FrontAid 6y ago
    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.
    - moring 6y ago
      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-two-elements-with-equal-css-properties-look-different https://stackoverflow.com/questions/64766922/what-can-make-t...

aidos 6y ago

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

tyingq 6y ago
<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.
- ogre_codes 6y ago
  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.
  - tyingq 6y ago
    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>
    - ogre_codes 6y ago
      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.

inopinatus 6y ago

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/ https://www.w3.org/TR/wai-aria-practices/ [2] https://www.w3.org/TR/wai-aria-practices/#examples https://www.w3.org/TR/wai-aria-practices/#examples

ogre_codes 6y ago
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.
TheCoelacanth 6y ago
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".
- inopinatus 6y ago
  Quite so.