リンクに「#」記号が含まれている場合


93

一部のサイトを調べたところ、URLにポンド記号(#)が付いています。それは何をするためのものか?

 <a href="#" >Link name</a>

回答:


105

「フラグメント」または「名前付きアンカー」です。ドキュメントの一部へのリンクに使用できます。通常、ページにリンクすると、ブラウザはページの上部にページを開きます。しかし、途中までセクションにリンクすると、フラグメントを使用してその見出し(またはその他)にリンクできます。

<a name="whatever"/>ページ内にタグがない場合、ブラウザはページの上部にリンクするだけです。フラグメントが空の場合は、ページの上部にリンクするだけです。

フラグメントのみの <a href="#">Link name</a>場合、それは現在のページの上部へのリンクにすぎません。

このようなリンクは、JavaScriptと組み合わせて使用​​されることがよくあります。標準に準拠したHTMLにはhref属性が必要ですが、JavaScriptでリクエストを処理する場合は、「#」が適切なプレースホルダーとして機能します。


1
+1公式用語はURLフラグメントですが、「ハッシュ参照」ではありません。w3.org
Jason Hall

ええ、私は私の答えでそれを「フラグメント」に変更しました、それがほとんどの人が使うものだからです。私はそれが「公式の」名前を持っていることを決して知りませんでした:)
ディーンハーディング

2
ブラウザーがそれを「ページの先頭に移動」として扱う理由:技術的には、ページを変更しました。リンクをクリックすると、アドレスバーのURLに実際に#が追加されていることがわかります。[戻る]ボタンをクリックすると、再び削除されます。ドキュメントの一部へのリンクではなく、ドキュメント内の場所へのリンクです。それ以外は、基本的に私が入力していたものと同じ...
animuson

#で終わるURIは一般的な構文で許可されており、一種の空のフラグメントと見なすことができます。text / htmlまたは任意のXMLタイプなどのMIME文書タイプでは、この構文的に正当な構成に一致する空の識別子は許可されません。Webブラウザーは通常、空のフラグメントのドキュメントの上部を表示します。- en.wikipedia.org/wiki/Fragment_identifier
IcyBrk

また、「そのような表現が存在しない場合、フラグメントのセマンティクスは不明と見なされ、実質的に制約がありません。」からrfc3986(tools.ietf.org/html/rfc3986#page-24
IcyBrk

23

...役立つヒントをいくつか追加します。

document.location.hashJavaScript でアクセスして変更できます。

これは、名前のアンカー(例えばを指すことができます<a name="top"></a>または対応するID(例えば持つ要素に<div id="top"></div>)。

単独で表示する(例<a href="#" onclick="pop()">popup</a>:)とは、一般に、JavaScriptを排他的に実行するためにリンクが使用されていることを意味します。これは悪い習慣です。

どのa要素hrefにも、有効なリソースを指すが必要です。存在しない場合は、などの別の要素の使用を検討してくださいbutton


1
それは特に良い実践ではなく、それについての良い点です...しかし、それが良くないからといって、それが至る所でそのように使用されていることに気付かないというわけではありません:)
Dean Harding

1
それは悪い習慣だ場合@alex、その後、何を教えていい練習が代わりに使用することです。
ライアンランディ

@Kyralessaそれは次の段落にありました。とにかく、私は編集を行ったので、うまくいけばそれがより明確になります。
アレックス

2
@alex、おそらくボタンの代わりにリンクを使用する理由の1つは、リンクの外観を望んでいることです。ボタンをリンクのようにする方法を説明するページへのリンクはどうですか?例HTMLボタンテスト
ライアンランディ

1
@alex、リンクで#を使用することは悪い習慣だと言っているだけです。求められるすべてのOPは、それが何をするかです。
Ryan Lundy、

11

# アンカーへのリンクを示します。

私は他にも言及したいと思います:

JavaScriptをアクティブにするリンクのhrefとして「#」を使用すると、ページが上にスクロールされるため、不適切です。代わりに、を使用してくださいjavascript:void(0)


これらのリンクをクリックするとページが強制的に最上部にスクロールすることを言及するための+1。
Chris Calo

4
アンカーはもう必要ありません。HTML5(およびおそらくHTML 4)以降では、<id>タグのある要素はフラグメント識別子のターゲットになる可能性があります。HTML5のドキュメントを参照してください。whatwg.org/specs/web-apps/current-work/multipage/...
バジルボーク

2
使用しないでくださいjavascript:void(0)どちらか-使用しbutton、それはリンクではありません場合。
アレックス、2015

10

ポンド記号(#)は、ページ上のアンカーを見つけることを示します。たとえば、ページのどこかにこれを含める場合:

<a name="foo"></a>

または、最近では:

<div id="foo">*part of page*</div>

次に、hrefを含むページのリンクをクリックする#fooと、名前またはdivID を使用してアンカーに移動しfooます。

ただし、hrefしかない場合#は、ページの上部に移動します。


2

これはページ自体にリンクします。JavaScriptを実際に実行するリンクでよく使用されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.