質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16412questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8970questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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

解決済

回答 6

投稿 編集

  • 評価
  • クリップ 6
  • VIEW 7,673

tomoyuki123

score 173

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6

checkベストアンサー

+16

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

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

Re: tomoyuki123 さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 21:53

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

    キャンセル

+7

よく使われたのは

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

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

href="#"

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

href="javascript:void(0)"

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 19:03

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

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

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

    キャンセル

  • 2017/04/14 22:02

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

    キャンセル

  • 2017/04/14 22:53 編集

    何となく拝見していましたが、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

    キャンセル

  • 2017/04/14 23:05 編集

    ひょっとして、古くはお世話になった「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

    キャンセル

+1

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>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/14 13:22 編集

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

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

    キャンセル

  • 2017/04/14 13:44

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

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

    キャンセル

  • 2017/04/14 13:49

    Zuishin様、yambejp様

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

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

    キャンセル

  • 2017/04/14 13:56

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

    キャンセル

  • 2017/04/14 14:07 編集

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

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

    キャンセル

  • 2017/04/14 14:20

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

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

    キャンセル

  • 2017/04/14 14:21

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

    キャンセル

  • 2017/04/14 14:27

    ありがとうございます。

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

    キャンセル

  • 2017/04/14 15:48

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/18 16:20

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

    キャンセル

  • 2017/04/18 16:23

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/18 16:22

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

    キャンセル

  • 2017/04/19 07:55

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

    キャンセル

  • 2017/04/19 11:14

    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の理念に沿うならば、質問別にスレッドが分かれている方が後で参照しやすいためです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16412questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8970questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。