If you don’t like those meaningless href’s, a can seem like a nice alternative. Somehow that feels better than a whatever, because you get the cursor change and whatever else default styles. The 0 is just there so it doesn’t jump the page, because ID’s can’t start with a number.Ĭhances are, HTML like the above means: I’m going to make clicking that do something with JavaScript. I'm kinda sick of doing this for buttons. At the time, I was thinking of how I enjoyed the semantics of it. That’s what kicked off this article for me.

I said recently that I enjoyed that sentiment. Let’s consider: “if a button doesn’t have a meaningful href, it’s a ” You’ll want to either leave that alone so the default comes through or remove it thoroughly so your new styling can be consistent across browsers. Let’s leave styling s for another day, but different browsers generally have a special style they apply to buttons. Runs of phrasing content make up paragraphs.” Phrasing content is a limited subset of HTML elements that “defines the text and the mark-up it contains. You can probably get away with putting just any HTML inside a button, but MDN points out the “permitted content” of a button is limited to “phrasing content”. While an input can be, this mixed content would be hard to pull off. A common use case would be something like: The primary reason for using a is that it has both an opening and closing ( ) tag. Ĭlicking that button will clear all the other inputs (and textareas) with the parent.

You can duplicate that behavior by changing the default submit type to reset. However gross the UX, forms can have reset buttons as well. You might think of that like this: Ī element in a, by default, behaves identically to that submit input above. There have been various conversations about allowing “href anywhere” over the years, but nothing has came of it.Ĭlicking on a button does do something though, when used in its natural environment… Button is a Form Element What’s the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an ) element). It’s not too bad though, let’s figure it out. You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it’s a bit more complicated than that.

Click the button