CODEWITHSUNDEEP
htmluser-interface
SIr Codealot
SIr Codealot

Reputation: 5431

What's good practice for <button>? Can it replace <a> or is it only meant for forms?

What's good practice for <button>?

Can it replace <a> tag or is it only meant for forms?

Upvotes: 4

Views: 1394

Answers (4)

Frederik Wordenskjold
Frederik Wordenskjold

Reputation: 10231

A link links to something - at least it should! It is semantically wrong to do the following:

<a href="#" onclick="doSomething(); return false;">Do something</a>

This should be replaced with a button, as it is there for that purpose - it works as a trigger for something the user (programmer) specifies; the purpose of a <button type="button"> element is thus not clear. In contrast, the purpose of a link is very clear - it should point somewhere!

As HTML is a markup language, it does not matter all that much what you do, if you do not think SEO. You can achieve the same thing with a <a>tag as you can with a <button> tag, like a <span> can act exactly as a <div> - semantically though, it is incorrect.

Upvotes: 5

fuxia
fuxia

Reputation: 63596

A <button> is for form elements only. In Opera you navigate links with a, q and Ctrl+Arrow, form elements are accessible per tab.

So, no, you shouldn’t replace one element with the other.

Upvotes: 1

&#193;lvaro Gonz&#225;lez
&#193;lvaro Gonz&#225;lez

Reputation: 146630

If you want to use a <button> tag to replace a regular link (<a href="...">) you'll have the following disadvantages:

  • It won't look like a link so it'll just add confusion.
  • You need to use JavaScript to make the button do something.
  • Search engines and other tools will not be able to follow the link.
  • You won't have visual indication for visited links.
  • Users can no longer decide to open the link in a new tab, inspect the destination or copy the URL.

I can't think of any advantage right now.

Upvotes: 1

Igor
Igor

Reputation: 34011

Depends on company conventions really, but with my experience buttons are typically used when the page does not redirect (including, but not limited to forms), and an <a> for when the user is directed to a new page.

Upvotes: 2

Related Questions