What is the difference between <button onclick = ...> and

Question

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

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

I am confused why not just use the "button" tag? eg:

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

What is the difference? I really want to find out, thanks!

Another situational question:

Three tags of type <a>, as shown below:

Hint:

• Different ajax calls then get a different period record
• You must use onclick = "location.replace ()" because returning to the last page smoothly.

Source:

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

I changed to:

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

Consider:

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

What will you do in this situation? Is it wrong to use a button tag?

Answer 1

This is mainly a historical artifact.

This is due to the fact that it was much easier to apply an individual style to the anchor. You could easily create automatic button-watching anchors using more elements within the anchor itself.

Today, with advanced CSS settings and better browser compatibility, this is optional. If button is the correct semantic element, you have no reason to use a .

So, use bindings for links to other pages. It should always have href , and not just use # and onclick . Now you can use onclick anyway - just make sure href sends you the same data as onclick . This is very convenient if you want search robots to be able to navigate your site, even if actual users are represented, for example. a more responsive interface (for example, downloading updated content via AJAX). Make sure that the general methods for opening a link in a new window / tab still work (none of the Ctrl + click keys, right-click and middle-click should perform the onclick action).

Buttons are elements that can interact with the page you are currently on, regardless of whether this means running client scripts or submitting a form to the server.

EDIT

When editing your question, it is obvious that you should just use the anchor with a regular href . There is no reason to use either onclick or button , and you just make a simple hyperlink, which requires anchors.

Answer 2

So the answer here is: semantics.

An anchor must be used for the hyperlink. Navigation elements used to move from one page to another. This is a link to the data that the user can get by clicking the link.

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

In your example, they both raise the onclick event, so they will only have one difference. In the case of an anchor, you must override the default behavior using event.preventDefault() .

In addition, 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/