href =“#”とは何ですか。なぜ使用されるのですか?


回答:


345

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

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

ハッシュ:

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

href="#some-id"などの現在のページの要素までスクロールします<div id="some-id">

href="https://stackoverflow.com//site.com/#some-id"site.comそのページのIDに移動してスクロールします。

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

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

このデモをご覧ください。

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

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

ハイパーリンクプレースホルダーが有効な例は、テンプレートのプレビュー内です。テンプレートの単一ページのデモで<a href="#">は、アンカータグがハイパーリンクであるにもかかわらず、どこにも移動しないことがよくあります。なぜ残していないhrefプロパティを空白の?空白のhrefプロパティは、実際には現在のページへのハイパーリンクです。つまり、ページが更新されます。私が議論したように、これhref="#"もハイパーリンクであり、スクロールを引き起こします。したがって、ハイパーリンクプレースホルダーの最善の解決策は、実際にhref="#!"は次のとおりです。id="!"(誰がそれを行うのか!?)、ハイパーリンクは何も参照しないため、何も起こりません。

アンカータグについて:

疑問に思われるかもしれないもう1つの質問は、「hrefプロパティをオフのままにしないのはなぜですか?」です。私が聞いた一般的な応答は、hrefプロパティは必須であるため、アンカーに存在する必要があるというものです。これは間違いです!hrefプロパティは、実際にハイパーリンクされるようにアンカーのためにのみ必要です!これをw3から読む。それでは、プレースホルダーにそのままにしておくのはどうですか。ブラウザーは要素のデフォルトスタイルをレンダリングし、hrefプロパティを持たないアンカータグのデフォルトスタイルを変更します。代わりに、通常のテキストのように見なされます。要素に関するブラウザの動作も変更します。ステータスバー(画面の下部)は、hrefプロパティなしでアンカーにカーソルを合わせると表示されません。アンカーでハイパーリンクとして扱われるようにするには、アンカーでプレースホルダーのhref値を使用するのが最適です。

スタイルと動作の違いを示すこのデモご覧ください


1
完全な答え。しかし、あなたの答えの用語テンプレートプレビューの意味は何ですか?
オーバーエクスチェンジ

3
例えば@overexchange、このページとその上のリンクを参照してください。ironsummitmedia.github.io/startbootstrap-creativeなどCSS / HTML、WordPressのテーマのセットを示すために意図されているだけのhtmlページをが、実際のページではありませんリンクはどこにも行く必要はありません。
m59

1
@Yeungハッシュ(#に続くURLの一部)を変更しても、サーバーは呼び出されません。JavaScriptでページを変更します。この問題については言うべきことがたくさんあり、それはこの投稿の範囲を超えています。
m59

2
また、ランダムなtidbit、Androidブラウザー(ブラウザー、クロムなど)は、アンカータグ以外のクリックイベントを受け入れません。したがって、jQueryの.click()メソッドをで使用したい場合<div></div>、機能しません。アンカーの上にいる必要があるか、touchイベントを使用する必要があります。
Steely、2016

1
@QHarr私は肯定的ではありませんが、空の「#」は何も参照していないため、それをオフにすることと同じであり、オフにするとページだけが参照され、ページは特に断りのない限りトップ。つまり、「上にスクロール」を意味するのではなく、「このページに移動する」という意味ではなく、ページの上部に移動することになります。
m59

85

"#"記号を何かのhrefとして置くことは、別のURLではなく、同じページ上の別のIDまたは名前タグを指すことを意味します。例えば:

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

ただし、IDや名前がない場合は、「どこにもありません」。

これは、「名前」または「ID」を持つHTMLアンカーに寄せられた別の同様の質問ですか?


1
IDを持つ要素-名前付きアンカーである必要はありません(実際、名前付きアンカーはしばらくの間推奨されていません)。
Oded

2
<a href="#">...</a>「どこにも行かない」のではなく、ページを離れてロードしているため、ここに来ましたsite.com/#。そんなことがあるものか?
doug65536 2013

7
@ doug65536最も可能性が高いのは、onclickイベントハンドラーがその要素に関連付けられていたため、そのページにリダイレクトするJavaScript関数が呼び出されたためです。
jtate 2014年

32

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

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


40
追加するだけで、それは正確にはどこにもリンクではありません...スクロールするページでは、自動的に最上部にスクロールします。
Misko

26

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

これの問題は、いずれ<a href="#" onclick="some_function();">かが必然的にjavascriptエラーで終了し、onclick javascriptエラーのあるアンカーが常にその後に続くことhrefです。通常、このページの最上部に迷惑なジャンプしてしまうが、は、使用しているサイトの場合は<base><a href="#">として処理され<a href="[base href]/#">、予想外のナビゲーションが得られ、。 場合は任意のlogableエラーが発生しているあなたが永続的なログを有効にしない限り、あなたは後者のケースでそれらを表示されません。

アンカー要素が場合されて非アンカーとして使用することはする必要があり、その持っているhrefにセットをjavascript:void(0);するために優雅な劣化。

単にページを更新する必要がある、予期しないランダムなページリダイレクトをデバッグして2日間無駄にしただけで、最後に、のクリックイベントを発生させる関数まで追跡しました<a href="#">。と交換し#て交換javascript:void(0);します。

月曜日に最初に行うことは、のすべてのインスタンスのプロジェクトをパージすることです<a href="#">


4
「アンカー要素を非アンカーとして使用する場合は、正常に機能を低下させるために、hrefをjavascript:void(0);に設定する必要があります。」[引用が必要]
Vito De Tullio 2018

Y、あり、なしで<base>本当に大きな違いを生み出し#ます。指摘してくれてありがとう!
LeOn-Han Li

単にページを更新する必要があるランダムな予期しないページリダイレクトをデバッグして2日無駄にしただけで、最後に<a href="#">のクリックイベントを発生させる関数まで追跡しました。#をjavascript:void(0);に置き換える 修正しました。-同じことをして、問題も解決しました。

23

順序付けられていないリストは、メニューとして使用する目的で作成されることがよくありますが、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どこへのリンクも必要ありません。

メニューリストにはたくさんのタグdivpタグを使用できますが、マウスポインタもそれらのIカーソルになります。

メニューリストには、多数のボタンを積み重ねて使用することもできますが、リストの方が望ましいようです。そして、それがおそらくhref="#"、リストタグ内のアンカータグでどこも指さないものが使用される理由です。

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


14

空のリンクにhref = "#"を使用する場合の問題は、ページの上部に移動するため、目的のアクションではない可能性があることです。これを回避するには、古いブラウザまたはHTML5以外のdoctypeの場合、

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

2
このソリューションは、1つのシナリオで特に有用であることがわかりました。私のアプリケーションでは、href = '""を使用してログアウト(ログインページに移動)機能を実装しています。他の目的でhref = "#"を使用すると、ログインページに戻ることがあります。href = "#"をhref = "javascript:void(0)"に変更した後、問題は解決されました。
リャン

13

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


13

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

Mozilla Developer Networkから:

href

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

また、HTML5 仕様に従って:

a要素がhref属性を持たない場合、要素は、要素のコンテンツのみで構成される、関連性があった場合にリンクが配置された可能性のある場所のプレースホルダーを表します。


1

href属性は、リンクのリソースのURLを定義します。アンカータグにhrefタグがない場合は、ハイパーリンクになりません。href属性には次の値があります。

1. Absolute path: move to another site like href="http://www.google.com"
2. Relative path: move to another page within the site like herf ="defaultpage.aspx"
3. Move to an element with a specified id within the page like href="#bottom"
4. href="javascript:void(0)", it does not move anywhere.
5. href="#" , it does not move anywhere but scroll on the top of the current page.
6. href= "" , it will load the current page but some browsers causes forbidden errors.

Note: When we do not need to specified any url inside a anchor tag then use 
<a href="javascript:void(0)">Test1</a>
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.