0

I'm trying to create simple buttons for a mobile site. The more I research this, the less consensus I find. This works great:

<a><button>text</button></a>

but fails code validation.

The element "button" must not appear as a descendant of the "a" element

This:

<a><div>text</div></a>

also works great and passes code validation, but I hate divs for this, as you have to specify a width, and since my button text is being dynamically generated by database fields, this is cumbersome at best.

So... Am I coding the button tag incorrectly? Or should I just ignore the code validation errors?

Pat T
  • 61
  • 3
  • You could add the styling to the A tag to make it look like a button, without extra internal tags. Simply add a display:block, some margin and a background that changes if the selector is :hover. – Martijn de Langh Mar 25 '16 at 14:17
  • Or, if for some reason you have to use a div, you could just set it to `display:inline-block;`, so it fit's it's content . Or just use a `` – Jacob G Mar 25 '16 at 14:18
  • 1
    "... you have to specify a width". I don't think you understand what a div is. A div is a generic block level element. You don't have to specify a width, but it's default width is auto, which will fill its container. If you want an inline element, just use a span, but keep in mind that inline elements can't have vertical margins or padding. If **that** doesn't work, use either and set it to `display:inline-block`. You don't need to specify a width (it collapses), but at the same time it supports vertical padding and margin. – Joseph Marikle Mar 25 '16 at 14:21
  • inline-block!!! It looks like this solves all my problems. Thanks, folks! – Pat T Mar 25 '16 at 14:51
  • Followup question... Does inline-block disable "margin: auto"? I'd like to center some of these buttons, but they're not cooperating. – Pat T Mar 25 '16 at 16:39
  • Followup answer... My solution atm is to add "display: table;margin auto" to those specific buttons that need to be centered. Is that the best solution? – Pat T Mar 25 '16 at 16:45

3 Answers3

3

Are you linking to something? Use an <a> element. Don't use a <button>.

Are you submitting a form? Use a <button> element, don't use an <a>.

Do you want a user control that only triggers JavaScript? Decide which of the two above options is the best fit for when JavaScript fails and use then. Then progressively enhance with JS.

Apply CSS to make whichever choice you pick look the way you want.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
3

If it should be a button, i.e. clicking it causes some action to be performed (probably via JavaScript), then use <button>.

If it's a link, i.e. clicking it will go to another page or to a different location within the current page: it has a valid value for href, then use <a>.

Semantic HTML is important.

Ian Devlin
  • 18,534
  • 6
  • 55
  • 73
0

This may end up being closed as too opinion-based (there are multiple ways you can do it), but at the very least I can try to offer some reasoning behind my opinions.

a tags have certain functional behavior behind them as-is. They will often modify the URL even if they don't navigate you anywhere, and in JavaScript you will have to fight their default behavior. All that you're using them for much of the time is their styling.

IF you are using their href tag for default navigation behavior, then I would recommend writing <a class="myprefixButton">, and setting up a CSS style on .button that gives them padding and a rounded border to make them look like buttons.

If you are submitting a form, use <button type="submit">, or if you're only linking to JavaScript, use <button type="button">. That last one has absolutely no inherited behavior from anywhere else, making it perfect to build from the ground up in JS without needing to cancel anything.

Finally, if you are submitting a form with JavaScript, use <button type="submit"> and listen on the form element for a 'submit' event. Reason being, you also want to submit if the user presses enter, or submitted through some other form like an accessibility toolkit.

Katana314
  • 8,429
  • 2
  • 28
  • 36