web-dev-qa-db-ja.com

HTMLアンカーを 'name'または 'id'で作成する必要がありますか？

"http://example.com/#foo"メソッドでウェブページのある部分を参照したいときは、

<h1><a name="foo"/>Foo Title</h1>

または

<h1 id="foo">Foo Title</h1>

どちらも機能しますが、同等ですか、それとも意味的な違いがありますか？

htmlhtml5hyperlinkfragment-identifier
747
Henrik Paul

HTML 5仕様によれば、 5.9.8フラグメント識別子へのナビゲート ：

HTML文書（およびtext/html MIMEタイプ）の場合は、文書の指定部分が何であるかを判別するために、次の処理モデルに従う必要があります。

  1. URLを解析し、fragidをURLの<fragment>コンポーネントにします。
  2. Fragidが空の文字列の場合、ドキュメントの示されている部分はドキュメントの先頭です。
  3. DOM内にfragidとまったく同じIDを持つ要素がある場合、ツリー順でそのような最初の要素が文書の指示された部分になります。ここでアルゴリズムを停止してください。
  4. 値がfragidと正確に等しいname属性を持つa要素がDOMにある場合、ツリー順で最初のそのような要素が文書の指定部分です。ここでアルゴリズムを停止してください。
  5. それ以外の場合、文書の指示部分はありません。

それで、それはid="foo"を探し、そして次に続くことになりますname="foo"

編集：@ hsivonenが指摘したように、HTML5ではa要素はname属性を持ちません。ただし、上記の規則は他の名前付き要素にも適用されます。

586
Greg

XMLの空の要素の構文は<h1><a name="foo"/>Foo Title</h1>ではサポートされていないため、text/htmlとして機能するHTMLの種類にtext/htmlを使用しないでください。しかし、<h1><a name="foo">Foo Title</a></h1>はHTML4では問題ありません。現在ドラフトされているHTML5では無効です。

<h1 id="foo">Foo Title</h1>はHTML4でもHTML5でも問題ありません。これはNetscape 4では機能しませんが、おそらくNetscape 4では機能しない他の機能を12個使用することになります。

173
hsivonen

Page.html＃fooやFoo Titleのように、ページ内のその領域にリンクするのであれば、使用するべきリンクではありません。

<h1 id="foo">Foo Title</h1>

代わりに<a>参照をその周りに置くと、あなたのヘッドラインはあなたのサイト内の<a>特有のCSSの影響を受けます。それは単なる追加のマークアップであり、あなたはそれを必要とするべきではありません。見出しの上にidを配置することを強くお勧めします。それが整形式であるだけでなく、それによってJavascriptまたはCSSでそのオブジェクトに対処できるようになります。

50
Tim Knight

ウィキペディアはこのような機能を多用しています： 

<a href="#History">[...]</a>
<span class="mw-headline" id="History">History</span>

そしてウィキペディアは皆のために働いているので、私はこのフォームに安全にこだわると感じるでしょう。

また、忘れないでください。これは、スパンだけでなくdivやテーブルセルでも使用できます。そうすれば、要素の：target擬似クラスにアクセスできます。太字のテキストのように、幅が変わらないように気を付けてください。

名前付きアンカー - 私の投票は避けることです：

  • 「名前とIDが同じ名前空間にあります...」 - 同じ名前空間を持つ2つの属性がおかしいだけです。もう廃止予定と言っておきましょう。
  • "href属性のない要素をアンカーする" - それでもやはり、要素の性質（ハイパーリンクかどうか）は属性を持つことによって定義されますか。ダブルクレイジー。常識はそれを完全に避けるように言う。
  • 疑似クラスなしでアンカーのスタイルを設定したことがある場合は、そのスタイルがそれぞれに適用されます。 CSS 3では、これを回避するために属性セレクター（または各擬似クラスに対して同じスタイル）を使用できますが、それでも回避策です。あなたが疑似クラスごとに色を選ぶので、これは通常起こりません、そして下線がデフォルトで存在することはそれが他のテキストと同じになるように削除することに意味があるだけです。しかし、あなたはあなたのリンクを大胆にすることを決心しました、それはトラブルを引き起こすでしょう。
  • Netscape 4はid機能をサポートしていないかもしれませんが、それでも未知の属性が問題を引き起こすことはありません。それが私にとって互換性と呼ばれるものです。
26
Zoltán Morvai
<h1 id="foo">Foo Title</h1>

使用すべきものです。リンクが必要な場合以外はアンカーを使用しないでください。

14
Andrew Marsh

JavaScriptユーザーの方へ： すべてのIDはwindow の下のグローバル変数になります。

<h1 id="foo">Foo Title</h1>

JSグローバルを作成したところです。

window.foo

window.fooの値は、h1のHTMLElementになります。

id属性で使用されるすべての値が安全であることを保証できない限り、nameに固執することをお勧めします。

<h1 name="foo">Foo Title</h1>
12
mikemaccana

IDメソッドは古いブラウザでは動作しません。アンカー名メソッドは新しいHTMLバージョンでは非推奨になるでしょう...私はidを使います。

9
Spikolynn

意味的な違いはありません。規格の傾向はidではなくnameの使用に向かっています。しかし、場合によってはnameを好むという違いがあるかもしれません。 HTML 4.01仕様は 以下のヒントを提供します ：

idまたはnameを使用しますか？アンカー名にidとnameのどちらを使用するかを決定する際には、以下の点を考慮してください。

  • Ｉｄ属性は、単なるアンカー名（例えば、スタイルシートセレクタ、処理識別子など）以上のものとして機能することができる。
  • 一部の古いユーザーエージェントは、id属性で作成されたアンカーをサポートしていません。
  • Name属性は、より豊富なアンカー名（エンティティ付き）を許可します。
8
erickson

私は、フォーマットが同じでシリアル番号だけが異なる、縦に積み重ねられたdivコンテナからなるWebページを持っています。各divの先頭にアンカーという名前を隠したいので、最も経済的な解決策は、開始divタグ内のidとしてアンカーを含めることです。

<div id="[serial number]" class="topic_wrapper">
3
maximus

マークアップに関する単なる観察以前のバージョンのHTMLのマークアップフォームは、アンカーポイントを提供していました。 id5属性を使用するHTML 5のマークアップフォームは、ほぼ同等ですが、識別するための要素を必要とします。そのほとんどすべてにコンテンツが含まれていると予想されます。

たとえば、空のスパンまたはdivを使用することができますが、この使用法では外観が悪くなり、悪臭がします。

1つの考えはこの目的のためにwbr要素を使うことです。 wbrは空のコンテンツモデルを持ち、単に改行が可能であると宣言します。これはまだマークアップタグのわずかに無礼な使用法ですが、無償のドキュメント部門や空のテキストスパンよりもはるかに少ないです。

2
jerseyboy

2番目のサンプルは、問題の要素に一意のIDを割り当てます。この要素は、DHTMLを使用して操作したりアクセスしたりできます。

一方、最初のものは、しおりに似た、文書内の名前付きの場所を設定します。 「アンカー」に付けられて、それは完全に理にかなっています。

1
Cerebrus

Html 5では、id=""属性は要素の一意の識別子を定義します。これはフラグメントリンクのアンカーでもあります。以前のHTML標準では、name=""要素の<a>属性はフラグメントリンクのアンカーを定義していました。私はこんなものをお勧めします：
<a name="foo" id="foo"></a><h1>Foo Title</h1>
id=""属性のサポートは多少むらがあるので（すべての主要ブラウザの最新リリースではサポートされていますが、数年以内のリリースでは中断しないことをお勧めします）。 ]に正当な理由がない場合は何か）。それは互換性があります、そしてそれはlink'dされた要素の中にあるものは何でもスタイルしません、終わり</a>はまだ要素の外側にありますが、それは現在のすべての規格でまだ有効です。

name=""要素のid=""および<a>属性が同じであることを確認してください。

1
Justin C. B.

古いブラウザにはname属性を使用し、新しいブラウザにはid属性を使用します。両方のオプションが使用され、フォールバックメソッドがデフォルトで実装されます。

0
Umesh Bagalur