aタグ無効は"javascript:void(0)" か "#"か？

Question

この２つの書き方が混在してる場合があって、使い分けがよくわかりません。
どちらにしろaタグは無効にされてるのでどっちでもいいんでしょうか？

<a href="#" onClick="function();">送信</a>

<a href="javascript:void(0)" onClick="function();return false;">送信</a>

またaタグ無効にするときの上記以外の方法があれば教えてください。

Answer 1

それはアンカー要素をマークアップするのに適切な論理構造を持っていますか？
それがリンクではないならa要素でマークアップすべきではないと思います。
マウスカーソルを変えたり、フォーカス可能な要素として <a> でマークアップして return false でページ遷移をキャンセルするなら初めから別の要素でマークアップして下さい。

送信ボタンとしての役割を期待しているようなので、普通に考えれば <input type="submit"> もしくは <input type="button"> が適切だと思います。
a要素的な見た目がほしければ、CSSで装飾して下さい。

Re: tomoyuki123 さん

Comments

[tomoyuki123]

大変勉強になりました。皆様ありがとうございました。

Answer 2

よく使われたのは

<a href="#" onclick="return myFunc();">送信</a>

のような形ですね。
myFunc()はreturn falseを返してください

href="#"

は存在しない飛び先を指定するので必ずしも正しいとはいえません
ただonclickでリンクへのジャンプをキャンセルする前提の処理なので
実際hrefにはなにを書いてあっても結構です

href="javascript:void(0)"

はjavascriptが無効なブラウザの場合おかしな挙動をすることがあります

最近はaddEventListenerやjQueryなどライブラリでイベントを付加する方が多いと思います。

Comments

[Zuishin]

「存在しない飛び先」というのがどうしても気になるのでやはり書いておきます。

URI の定義から言えば、相対表記の「#」は実際に存在する URI です。
その URI にアクセスしたときに何が得られるかというのはサーバー依存になるわけですが、例えばブラウザを開いて file:///C:/index.html# にアクセスすると、C ドライブのルートに置いた index.html が得られます。これは絶対表記で書いただけで、同じものを指す URI のはずです。

file:///C:/index.html# が存在し、index.html を返す以上、その相対表記である # も存在するんじゃないでしょうか？

[yambejp]

なるほど、html5では空の#が許されるようになったんですね？
以前のhtmlの仕様ではhref="#"は行き先のないリンクとして
なるべく使わないようにしようという話がメインだったのですが
みんなが使えばそれがルールになるってことなんでしょうかね

[think49]

何となく拝見していましたが、URI は RFC2396, RFC3986 辺りの仕様だろうと考えていました。いずれもフラグメント識別子における # 以降の文字列は0回以上の繰り返しの為、# で終端する事が許可されています。
http://jbpe.tripod.com/rfcj/rfc2396.ej.sjis.txt
https://triple-underscore.github.io/RFC3986-ja.html#section-3.5

> なるほど、html5では空の#が許されるようになったんですね？
実は HTML 仕様にも href 属性値のフォーマットに制約があり、<a href="#"> が許可されないバージョンが存在しているのでしょうか。
HTML 4.01 では RFC2396 に帰結する為、<a href="#"> は許可されているように読めました。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#h-12.2
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#type-uri
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/references.html#ref-URI

[think49]

ひょっとして、古くはお世話になった「Another HTML-lint gateway」で警告が現われた時代の名残でしょうか。
body要素直下に <p><a href="#">test</a></p> をマークアップした場合、https://validator.w3.org/ ではvalidですが、HTML-lintでは警告が発生します。
HTML-lint の解説に原典が書いてないところを見るに HTML-lint の独断で警告を発している感がありますが…。
仕様がある場合は解説で仕様にリンクを貼っていると記憶しているので、何もリンクが張られていない場合は HTML-lint 作者の判断で警告を発していると思います。
http://cetus.sakura.ne.jp/htmllint/explain.html#empty-fragment-id

Answer 3

htmlのバージョンが特に書かれてないので、なんとも言えませんが、html5の場合はhrefが省略できるようです

Comments

[think49]

仕様には「a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す。」とあります。
本質問は [送信] ボタンを意図していて「リンク」ではない為、要件を満たさないと思われます。
https://momdo.github.io/html/semantics.html#text-level-semantics

[anatawa12]

なるほど、確かに要件を満たしませんね
調査不足ですみません

Answer 4

aタグの無効化に関して言うと、以下でいいと思います。

<a href="javascript: void(0)">遷移しない</a>
<a href="http://example.com" onClick="return false;">遷移しない</a>

また、上記の式でjavascript: void(0)はvoidの中を評価した後にundefinedを返すという意味ですので以下と同じです。

<a href="javascript:undefined">遷移しない</a>

どうでもいいんですがvoidの中は評価されるので以下のように書くと遷移します。

<a href="javascript: void(window.location='http://google.com')">遷移しない</a>

Comments

[Zuishin]

href="undefined"
これ、遷移しないんですか？

example.com はさすがに遷移するでしょう？

[yambejp]

論理的な話だと読み替えてましたが実際にかいたらまずいですね
ようはhref="javascript:undefined"ってことです
でもそうかくならvoid(0)を書くべきです

それとtest.comは遷移しないですよね？ご利用の環境だと遷移します？
（javascriptが無効になっている？）

[MasakazuFukami]

Zuishin様、yambejp様

コメントありがとうございます！
javascript:undefinedに修正いたしました！

また、test.comの件に関しては、こちらのローカル上で遷移しないことを検証済みです

[date]

ただのクリックでは遷移しませんが
右クリックでリンク移動すれば移動できます
そしてhttps://www.test.com/がURLとしてあるので例としては少しまずいのでは

[Zuishin]

onClick が記述されているので、JavaScript が有効ならどんな URL を書いても遷移しないとは思うんですが、date さんのおっしゃる通りで、これは実在の URL です。JavaScript が無効になっていたり、クリック以外の方法によっては遷移すると思います。つまり、タグ無効になりません。
たとえば、相手が人間でなかった場合、クリックを使わずに無関係のサイトに遷移していくのではないですか？

ですから、# がいいか javascript:void(0) がいいかという話とは、完全に違う話だと思います。

[MasakazuFukami]

みなさまコメントありがとうございます。

例がおかしかったり、不適切な回答のようなので後ほど削除させていただきます。

[Zuishin]

残していただいた方が後で読む人の参考になるのではないですか？

[MasakazuFukami]

ありがとうございます。

たしかにそうですね。
残しておこうと思います。

[shi_ue]

残しておいた方が有益だと思いますが、例示ドメインはexample.comをお使いください。

Answer 5

私はいつも、単純に次のようにしていますが... 。

<a href="javascript:;">...</a>

Answer 6

回答ではなく、皆様のご意見をお聞きしたいのですが、
モーダルリンクを実装したい場合、href属性無しのa要素って適切ですか？

href="#"もhref="javascript:void(0)"もホイールクリックで新規タブが開いてしまうので、
href属性無しがいいかなと。
タグの意味合いとしてはaタグが妥当だし、HTML5のバリデータでエラーが出ないので。

Comments

[think49]

https://momdo.github.io/html/semantics.html#text-level-semantics より「a要素がhref属性を持たない場合、要素が関連していたならば、要素は、要素のコンテンツからなる、リンクが別の方法で置かれているかもしれない場所に対するプレースホルダーを表す。」を参照。
回答の場で便乗質問せず、新たに質問を立てる事をお勧めします。

[ahodana]

4時代から hfef または name属性のいづれかが必須とかいう類いだったような

[think49]

To: ahodana さん
HTML4.01 であっても、href属性, name属性を持たないa要素を生成しても構いません。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html#h-12.2
より「著者は、アンカーを1つも指定しないA要素、すなわち、href属性も name属性もid属性も指定されていないA要素を、生成してもよい。 これらの属性の値は、後にスクリプトによって設定できる。」を参照して下さい。
ところで、HTML5からa要素のname属性は削除されました。

繰り返しますが、派生質問は新たに質問スレッドを立てる事を推奨します。
「掲示板のログは共有資産である」というteratailの理念に沿うならば、質問別にスレッドが分かれている方が後で参照しやすいためです。