web-dev-qa-db-ja.com

Href = "#"とは何ですか?なぜ使用されているのですか?

多くのウェブサイトで私はhref="#"を持っているリンクを見ます。どういう意味ですか?それは何のために使われますか?

311
Samir Ghobril

ハイパーリンクについて:

アンカータグ - <a></a> - の主な用途はハイパーリンクです。それは基本的に彼らがどこかにあなたを連れて行くことを意味します。ハイパーリンクは場所を指定するため、hrefプロパティが必要です。

ハッシュ:

ハイパーリンク内のハッシュ#は、ウィンドウをスクロールするHTML要素IDを指定します。

href="#some-id"は現在のページの<div id="some-id">のような要素にスクロールします。

href="//site.com/#some-id"site.comに行き、そのページのidまでスクロールします。

トップにスクロールします:

href="#"はid名を指定しませんが、対応する場所(ページの上部)を持ちます。 href="#"でアンカーをクリックすると、スクロール位置が一番上に移動します。

このデモを参照してください。

これはw3ドキュメント。によると期待される動作です。

ハイパーリンクプレースホルダ:

ハイパーリンクプレースホルダが意味をなす例は、テンプレートプレビュー内です。テンプレート用の単一ページのデモでは、アンカータグがハイパーリンクになるように<a href="#">をよく見ましたが、どこにも行きません。 hrefプロパティを空白のままにしないでください。空白のhrefプロパティは、実際には現在のページへのハイパーリンクです。つまり、ページが更新されます。私が説明したように、href="#"もハイパーリンクであり、スクロールを引き起こします。したがって、ハイパーリンクのプレースホルダに対する最善の解決策は、実際にはhref="#!"です。ここでの考えは、id="!"を持つ要素がページ上にないことを願っています。

アンカータグについて:

あなたが疑問に思うかもしれないもう一つの質問は、 "なぜhrefプロパティをオフのままにしないのですか?"です。私が聞いた一般的な回答はhrefプロパティは必須であるため、アンカーに "存在する"はずです。これは誤りです。 hrefプロパティは、アンカーが実際にハイパーリンクになるためにのみ必要です。 this from w3を読んでください。それでは、単にプレースホルダーのためにそれを省略しないのはなぜですか?ブラウザは要素のデフォルトスタイルをレンダリングし、hrefプロパティを持たないアンカータグのデフォルトスタイルを変更します。代わりに、それは通常のテキストのように見なされます。要素に関するブラウザの動作も変わります。 hrefプロパティを指定しないでアンカーの上に移動すると、ステータスバー(画面の下部)は表示されません。ハイパーリンクとして扱われるようにするには、アンカーにプレースホルダのhref値を使用するのが最善です。

このデモを参照してくださいは、スタイルと動作の違いを示しています。

295
m59

「#」記号を何かのためのhrefとして置くことは、それが異なるURLを指すのではなく、むしろ同じページ上の別のidまたはnameタグを指すことを意味します。例えば:

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

ただし、IDや名前がない場合は、「no where」になります。

'name'または 'id'を持つHTMLアンカー?

82
KJYe.Name

本質的にどこにもリンクしていないリンクです(URLに「#」を追加するだけです)。これはさまざまな理由で使用されます。たとえば、ある種のJavaScript/jQueryを使用していて、実際のHTMLをどこにもリンクさせたくない場合などです。

ページアンカーにも使用されます。ページアンカーは、ページの別の部分にリダイレクトするために使用されます。

28
Tyler Treat

番号なしリストはメニューとして使用する目的で作成されることがよくありますが、liリスト項目はテキストです。リストli項目はテキストなので、マウスポインタは矢印ではなく「Iカーソル」になります。何かがクリック可能であるとき、ユーザはマウスポインタのための人差し指を見ることに慣れている。 aタグ内でアンカータグliを使用すると、マウスポインタが人差し指に変わります。リストをメニューとして使用するには、人差し指のほうがはるかに優れています。

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

リストがメニューに使用されていて、リンクが必要ない場合は、URLを指定する必要はありません。しかし問題は、href属性を省略すると、<a>タグ内のテキストがテキストとして表示されるため、マウスポインタがIカーソルに戻ることです。 Iカーソルは、メニュー項目がクリックできないとユーザーに思わせるかもしれません。したがって、hrefがまだ必要ですが、どこへのリンクも必要ありません。

メニューリストにはたくさんのdivタグやpタグを使うことができますが、マウスポインタもそれらのIカーソルです。

あなたはメニューリストのために互いの上に積み重ねられたたくさんのボタンを使うことができました、しかしリストは好ましいようです。そしてそれが、リストタグの中のアンカータグの中で、どこも指していないhref="#"が使用されている理由です。

あなたはCSSでポインタスタイルを設定することができるので、それは別のオプションです。どこにもないhref="#"は単にスタイルを設定するための怠惰な方法かもしれません。

22
Alan Wells

残念ながら、<a href="#">の最も一般的な使い方は、アンカーのように振る舞うクリック可能な非ハイパーリンクのJavaScriptコード要素を欲しいと思う怠惰なプログラマですが、非ハイパーリンク要素のクラスにcursor: pointer;または:hoverスタイルを追加することはできません。さらに、hrefjavascript:void(0);に設定するのは面倒です。

これに関する問題は、ある<a href="#" onclick="some_function();">または別のものが必然的にjavascriptエラーで終わり、onclick javascriptエラーのあるアンカーは常にそのhrefの後に続くことです。通常、これはページの先頭への迷惑なジャンプになりますが、<base>を使用しているサイトの場合、<a href="#"><a href="[base href]/#">として扱われるため、予期しないナビゲーションが発生します。 もし ログに記録可能なエラーが発生している場合は、永続ログを有効にしない限り後者の場合は表示されません。

アンカー要素の場合 です 非アンカーとして使用 すべき 以下の目的で、hrefjavascript:void(0);に設定してください。 優雅な 劣化.

私はたった2日で、ページを更新しただけの、予期しないランダムなページリダイレクトをデバッグし、最後に<a href="#">のclickイベントを発生させる関数に追跡しました。 #javascript:void(0);に置き換えて修正しました。

私が月曜日に最初にやっていることは、<a href="#">のすべてのインスタンスのプロジェクトを削除することです。

13

私の知る限りでは、通常はJavaScriptがリンクされているリンクのプレースホルダーです。リンクの要点は、JavaScriptコードを実行することによって提供されます。 JSをサポートしているブラウザは、実際のリンクターゲットを無視します。ブラウザがJSをサポートしていない場合、ハッシュマークは本質的にリンクを何もしないものに変えます。 控えめなJavaScript も参照してください。

12
zoul

他のいくつかの答えが指摘したように、a要素はhref属性を必要とし、#はプレースホルダーとして使用されますが、それは歴史的な成果物でもあります。

からMozilla Developer Network

href

これは、ハイパーテキストのソースリンクを定義するアンカーに必要な唯一の属性ですが、HTML 5では必要なくなりました。この属性を省略すると、プレースホルダリンクが作成されます。 href属性は、リンク先(URLまたはURLフラグメント)を示します。 URLフラグメントは、ハッシュマーク(#)が前に付いた名前です。ハッシュマークは、現在のドキュメント内の内部ターゲットの場所(ID)を指定します。

また、HTML5によると spec

A要素にhref属性がない場合、その要素は、リンクが適切であればリンクが配置されていた場所のプレースホルダを表し、要素の内容だけで構成されます。

11
Doug Richardson

空のリンクにhref = "#"を使用した場合の問題は、ページの先頭に移動することですが、これは望ましいアクションではない可能性があります。これを避けるには、古いブラウザやHTML5以外のDoctypeの場合は、

<a href="javascript:void(0)">Goes Nowhere</a>
11
RationalRabbit