826

http://example.com/#foo「 」メソッドを使用して Web ページの一部を参照したい場合は、

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

また

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

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

4

15 に答える 15

651

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

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

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

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

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

于 2009-01-27T19:10:54.667 に答える
192

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

<h1 id="foo">Foo Title</h1>HTML4とHTML5の両方でOKです。これはNetscape4では機能しませんが、Netscape4では機能しない他の多くの機能を使用する可能性があります。

于 2009-01-27T19:37:39.587 に答える
55

ページ内のその領域にリンクするつもりなら... page.html#foo や Foo Title などは使用すべきリンクではありません:

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

代わりに参照を配置すると、見出しはサイト内の特定の CSS<a>の影響を受けます。<a>これは単なる追加のマークアップであり、必要ないはずです。見出しに id を配置することを強くお勧めします。これにより、形式が改善されるだけでなく、Javascript または CSS でそのオブジェクトに対処できるようになります。

于 2009-01-27T19:03:32.807 に答える
30

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

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

ウィキペディアはすべての人のために働いているので、このフォームに固執するのは安全だと思います.

また、これをスパンだけでなく、div またはテーブル セルでも使用できることを忘れないでください。その後、要素の :target 疑似クラスにアクセスできます。太字のテキストのように幅を変更しないように気をつけてください。

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

  • 「Names and ids are in the same namespace...」 - 同じ名前空間を持つ 2 つの属性は、まさにクレイジーです。すでに廃止されているとしましょう。
  • 「href 属性のない要素を固定する」 - またしても、要素の性質 (ハイパーリンクかどうか) は属性を持つことで定義される?! ダブルクレイジー。常識はそれを完全に避けると言います。
  • 疑似クラスなしでアンカーのスタイルを設定した場合、スタイルはそれぞれに適用されます。CSS3 では、属性セレクター (または各疑似クラスの同じスタイリング) でこれを回避できますが、それでも回避策です。これは通常、疑似クラスごとに色を選択するため、表示されません。また、デフォルトで存在する下線は、削除するだけで意味があり、他のテキストと同じになります。しかし、リンクを太字にすると、問題が発生します。
  • Netscape 4 は id 機能をサポートしていない可能性がありますが、未知の属性が問題を引き起こすことはありません。それが私にとって互換性と呼ばれるものです。
于 2013-03-25T14:46:17.350 に答える
15 
<h1 id="foo">Foo Title</h1>

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

于 2009-06-25T19:49:25.930 に答える
14

JavaScript ユーザーに注意してください:すべての ID は window の下でグローバル変数になります。

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

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

window.foo

の値はにwindow.fooなります。HTMLElementh1

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

<h1 name="foo">Foo Title</h1>
于 2015-02-17T18:23:14.940 に答える
9

セマンティックな違いはありません。標準の傾向は、idではなくの使用に向かっていますname。ただし、場合によっては好みにつながる可能性のある違いがありnameます。HTML 4.01仕様は、次のヒントを提供します。

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

  • id属性は、単なるアンカー名（たとえば、スタイルシートセレクター、処理識別子など）以上の役割を果たすことができます。
  • 一部の古いユーザーエージェントは、id属性で作成されたアンカーをサポートしていません。
  • name属性を使用すると、（エンティティを含む）より豊富なアンカー名を使用できます。
于 2009-01-27T19:26:58.970 に答える
9

ID メソッドは古いブラウザーでは機能しません。アンカー名メソッドは、新しい HTML バージョンでは廃止されます...私は id を使用します。

于 2009-01-27T19:02:54.400 に答える
3

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

<div id="[serial number]" class="topic_wrapper">
于 2012-06-13T02:10:20.843 に答える
2

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

たとえば、空のスパンまたは div を使用することもできますが、この使用法は見た目も匂いも退化しています。

1 つの考えは、この目的のために wbr 要素を使用することです。wbr には空のコンテンツ モデルがあり、単純に改行が可能であることを宣言しています。これはまだマークアップ タグのやや不当な使用ですが、不必要なドキュメントの分割や空のテキスト スパンほどではありません。

于 2011-12-31T04:23:07.713 に答える
2

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

一方、最初のものは、ブックマークに似た、ドキュメント内の名前付きの場所を設定します。「錨」にくっついて、それは完全に理にかなっています。

于 2009-01-27T19:04:36.863 に答える
1

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

于 2013-06-20T07:36:49.410 に答える
0

2021 年に IE6 よりも古いブラウザーを気にする人がいるでしょうか。

Stackoverflow は、'name' 属性の代わりにアンカーと 'name' 属性をまだ使用していることに注意してください。

なんで？

あなたの理由:

  1. SINGLE 要素の id に 2 つの値を指定することはできません。

#sample
{
  color: red; 
}
<div id="postNr4245 sample"> Sample text </div>  <!-- coloring doesn't work -->

<a href="#postNr4245">Jump to Post</a> <!-- jumping doesn't work -->

わかりました、そのような目的で「クラス」を使用できると言えます。

確かにそうですが、サイトでスタイルを設定する必要がある要素が1 つしかない場合は、クラスを使用しないでください。

なんで？

CSS セレクター #idName を使用すると、Web ブラウザーがその要素を見つけた場合、それ以上検索されないためです。ウェブサイトの読み込みを高速化します。

.class を使用する場合、Web ブラウザは .class を 1 回以上使用したかどうかを認識できないため、DOM のすべての場所を探す必要があります。

  1. CSS でスタイルを設定したり、JS を使用して解析したりする場合は、' id ' 値を数字で始めることはできません。ただし、' name ' の値を数字で始めることはできます。
于 2021-06-24T09:54:13.247 に答える
-3

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

コメントのように、賭けをヘッジするために常に両方を使用できます。

于 2009-01-27T18:59:13.720 に答える