hrefとonclickを使用するリンクの違いは何ですか？

Question

誰もが私は、私が唯一HTML上のいくつかの基本を持ち、プログラミングや言語についてあまり知らないので、私は誰かが次の2行の違いを理解する私を助けることができる願っています：

<a onclick="window.location.href='http://www.example.com'">Click here</a> 

<a href="http://www.example.com">Click here</a> 

はどちらも、まったく同じことをしているように見えますすべての場合、つまり異なるブラウザを使用して、異なるブラウザを使用しているかどうかは分かりません。

助けていただければ幸いです。ありがとう。

Answer 1

次の2行

の違いの唯一の違いは、あなたではなく、内蔵ブラウザの機能よりも、リダイレクトするためにJavaScriptを使用していることです。

リンク

Answer 2

1)<a onclick="window.location.href='http://www.example.com'">Click here</a> 

2)<a href="http://www.example.com">Click here</a> 

ためW3C Specificationはこの場合、2つのの違いはありません参照してくださいブラウザがJavaScriptをサポートし、ページ上やブラウザにはJSエラーがありませんを提供します。しかし、onclickでは、あなたはクリックで何か違うことをすることができます。例：

2)<a href="http://www.example.com" onclick="return doSomething(this)">Click here</a> 
... 
function doSomething(elem){ 
//do something with url 
return false;//do not open url 
} 

Answer 3

多くの違いがあります。それらの中にはアクセシビリティに関連するものもあれば、UXに関連するものもあります。

• hrefがないと、ブラウザはリンクのように見えるようにスタイルを設定しません（リンクではないため）。
• hrefがないと、リンクはページのタブ順ではありません（キーボードを使用してページをすばやくトラバースするユーザーの場合）。
• hrefがないと、エラーが発生した場合は別の場所で問題が発生する可能性があります。
• <a>を、ページのビットを隠す/表示するなど、ナビゲーション以外のもののハンドラとして使用することを促進します（<button>がより適切でしょう）。
• <a href>は、すべてのブラウザですべての状況でサポートされています。
• スクリーンリーダーは、href属性のないリンクをアナウンスすることはできません。そのため、多くのユーザーにとっては使用できなくなります（法的な意味もあります）。

hrefをどこでも使えるので、無料でアクセスできます。