7

I find many times the pages use "a" tag and want to make it like a button. it's something like this:

<a href="#" class="button" onclick="...." />

I'm confusing about why not just use "button" tag? like this:

<button onclick="....">button</button>

what is the difference between? I really want to learn it, thanks!

One more situation question:

Three "button-like < a > tag" as below:

enter image description here

Hint:

  • Different one call ajax then get different period record
  • Need to use onclick="location.replace()" because back to last page smoothly.

Original code:

<a href="url" class="btn" >Today</a>

I have changed to:

<a href="#" onclick="location.replace(url)" class="btn" >Today</a>

Consider about:

<button onclick="location.replace(url)">Today</button>

What will you do in this situation? Is any incorrect to use button tag ?

Sing
  • 3,942
  • 3
  • 29
  • 40

2 Answers2

4

This is basically a historical artifact.

It stems from the time when it was much easier to apply custom styling to an anchor. You could easily build auto-sized "button-looking" anchors by using more elements inside the anchor itself.

Today, with enhanced CSS options and better browser compatibility, this is not necessary. When button is the correct semantic element, you have no reason to use a instead.

So, use anchors for links to other pages. It should always have a href, rather than just using # and onclick. Now, you can still use onclick as well - just make sure that the href directs you to the same data that onclick does. This is very handy when you want to have a way for search bots to navigate your site, even though the actual users will be presented with e.g. a more responsive interface (for example, downloading the updated content through AJAX). Make sure that common methods of opening the link in a new window / tab still work (neither of ctrl+click, right-click and middle-click should execute the onclick action).

Buttons are the elements that are there to interact with the page you're currently on, whether that means doing client-side scripting, or sending a form to the server.

EDIT:

With the edit to your question, it's obvious you should simply use an anchor with a normal href. There's no reason to use either onclick or a button, and you are just making a simple hyperlink, that's what anchors are for.

Luaan
  • 62,244
  • 7
  • 97
  • 116
  • But I have to use onclick because of I need to use location.replace() in order to make user back to last page smoothly :( – Sing Oct 31 '14 at 02:54
  • 1
    Well, no, you don't. You're creating the whole page on the server, including the `href`. Just build the proper path on the server, and you're fine. The only exception is when working with hash-tags, but that's exactly the kind of responsiveness-hack I've been talking about - you'd still use an anchor with a `href`, and only handle the hash in the `onclick`. You should ideally be able to navigate your whole site with JavaScript turned off - it's a nice test of your design :) – Luaan Oct 31 '14 at 07:56
3

So the answer here is: semantics.

An anchor should be used for a hyperlink. Navigational items used to move from one page to another. It's a reference to data that the user can get to by clicking the link.

A button is a button. It's used for functionality.

In your example they're both calling an onclick event, so they're only going to have one difference. In the case of the anchor you have to override the default behavior using event.preventDefault().

Also, the top 3 results via Google:

http://davidwalsh.name/html5-buttons

HTML/CSS - Buttons - When to use what

http://www.reddit.com/r/Frontend/comments/1y9zdh/anchor_vs_button_a_question_on_html_semantics/

Community
  • 1
  • 1
Kolby
  • 2,775
  • 3
  • 25
  • 44