「名前」または「ID」でHTMLアンカーを作成する必要がありますか？

ウェブページの一部を " http://example.com/#foo"メソッドで参照したい場合、

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

または

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

どちらも機能しますが、同等ですか、または意味上の違いがありますか？

HTML 5仕様によると、5.9.8フラグメント識別子への移動：

HTMLドキュメント（およびtext / html MIMEタイプ）の場合、次の処理モデルに従って、ドキュメントの指定された部分が何かを判断する必要があります。

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

したがって、それはを探しid="foo"、次に従いますname="foo"

編集：@hsivonenで指摘されているように、HTML5ではa要素にname属性がありません。ただし、上記のルールは他の名前付き要素にも適用されます。

空のXML構文はでサポートされていないため、<h1><a name="foo"/>Foo Title</h1>として機能するHTMLで使用しtext/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では機能しない他の多数の機能を使用することになります。

あなたがページのその領域にリンクするつもりなら... page.html＃fooのように、そしてFoo Titleはあなたが使うべきリンクではないと言っておく必要があります：

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

代わりに<a>参照を配置すると、見出しは<a>サイト内の特定のCSSの影響を受けます。これは追加のマークアップであり、必要ありません。見出しにIDを配置することを強くお勧めします。IDを形成するだけでなく、JavaScriptまたはCSSでそのオブジェクトに対応できます。

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

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

ウィキペディアはすべての人のために機能しているので、このフォームをそのまま使用しても安心です。

また、忘れずに、これをスパンだけでなく、divまたはテーブルセルでも使用でき、要素の：target疑似クラスにアクセスできるようになります。太字のテキストのように、幅を変更しないように注意してください。これにより、コンテンツが移動し、邪魔になります。

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

• 「名前とIDは同じ名前空間にあります...」-同じ名前空間を持つ2つの属性は狂っています。すでに廃止されたとしましょう。
• 「href属性なしで要素をアンカーする」-さらに、要素の性質（ハイパーリンクかどうか）は、属性を持つことによって定義されますか？ダブルクレイジー。常識では、それを完全に回避するように言われています。
• 疑似クラスを使用せずにアンカーをスタイルする場合、スタイルはそれぞれに適用されます。CSS3では、属性セレクター（または各疑似クラスの同じスタイル）を使用してこれを回避できますが、それでも回避策です。疑似クラスごとに色を選択するため、これは通常は発生しません。デフォルトで下線が表示されているため、削除するだけで意味があり、他のテキストと同じになります。しかし、リンクを太字にすることにした場合、問題が発生します。
• Netscape 4はid機能をサポートしていない場合がありますが、それでも不明な属性が原因で問題が発生することはありません。それが私にとって互換性と呼ばれるものです。

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

使用すべきものです。リンクが必要でない限り、アンカーを使用しないでください。

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

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

JSグローバルを作成しました。

window.foo

値はwindow.fooなりますHTMLElementためh1。

id属性で使用されているすべての値が安全であることを保証できない場合は、以下を守ることをお勧めしますname。

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

意味上の違いはありません。標準の傾向はでidはなくを使用する方向にありますname。ただし、name場合によっては好む可能性のある違いがあります。HTML 4.01仕様では、次のヒントが提供されています。

idまたは使用しますかname？作成者は、アンカー名を使用するidかname、アンカー名に使用するかを決定するときに、次の問題を考慮する必要があります。

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

IDメソッドは古いブラウザでは機能せず、アンカー名メソッドは新しいHTMLバージョンで非推奨になります...私はIDを使用します。

垂直に積み重ねられた多数のdivコンテナーで構成されるWebページがあり、形式は同じでシリアル番号のみが異なります。各divの上部にある名前アンカーを非表示にしたかったので、最も経済的な解決策は、開始divタグ内にIDとしてアンカーを含めることです。

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

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

たとえば、空のスパンまたはdivを使用することもできますが、この使用法では、外観とにおいが悪化します。

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

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

一方、1つ目は、ブックマークに似た、ドキュメント内の名前付きの場所を設定します。「アンカー」に取り付けられているので、完全に理にかなっています。

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

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

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

「名前付きアンカー」の概念全体では、定義によりname属性を使用します。名前の使用に固執する必要がありますが、ID属性は一部のjavascriptの状況で便利な場合があります。

コメントのように、両方を使って賭けをヘッジすることができます。