「名前」または「ID」を使用して HTML アンカーを作成する必要がありますか?

StackOverflow https://stackoverflow.com/questions/484719

質問

ウェブページのある部分を「」で参照したいとき。http://example.com/#foo" メソッドを使用する必要がありますか

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

または

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

どちらも機能しますが、それらは等しいのでしょうか、それとも意味上の違いがあるのでしょうか?

役に立ちましたか？

解決

HTML5の仕様によれば、 5.9.8 フラグメント識別子への移動:

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

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

それで、それは探します id="foo", 、その後に続きます name="foo"

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

他のヒント

XMLの空の要素の構文は<h1><a name="foo"/>Foo Title</h1>ではサポートされていないため、

あなたがHTMLの任意の味にtext/html使用すべきではありませんが、<h1><a name="foo">Foo Title</a></h1>を務めていました。しかし、<h1 id="foo">Foo Title</h1> HTML4でOKです。これは、現在起草としてHTML5に有効ではありません。

<=> HTML4とHTML5の両方でOKです。これは、Netscape 4には動作しませんが、あなたはおそらく、ネットスケープ4では動作しませんダース他の機能を使用します。

私は、このようなpage.htmlの＃fooのよう...あなたがページでその領域にリンクしようとしている場合には言わなければならないとFooのタイトルは、使用されなければならないリンクではありません。

<h1 id="foo">Foo Title</h1>
あなたの代わりに、その周り<a>参照を入れた場合は、

あなたの見出しは、サイト内の<=>特定のCSSによって影響されるであろう。それはちょうど、余分なマークアップだし、あなたはそれを必要はありません。私は非常にそれが良く形成されているが、それはJavascriptやCSS内のオブジェクトのアドレスのいずれかにあなたをできるようになりますだけでなく、見出しの上にIDを置くことをお勧めしたい。

Wikipedia ではこの機能を次のように多用しています。

<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 はウィンドウの下でグローバル変数になります.

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

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

window.foo

の値 window.foo になります HTMLElement のために h1.

で使用されるすべての値を保証できない限り、 id 属性は安全なので、そのまま使用することをお勧めします name: 

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

ID方法は、古いブラウザでは動作しません、アンカー名の方法は...私はIDと一緒に行きたい、新しいHTMLのバージョンで非推奨されます。

意味的な違いはありません。標準の傾向は、 id それよりも name. 。ただし、好みにつながる可能性のある違いがあります name ある場合には。HTML 4.01 仕様が提供するもの 次のヒント:

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

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

私はフォーマットが同じで縦に積み重ねられたのdivコンテナの数からなるウェブページを、持っているとシリアル番号のみが異なります。私は、各div要素の一番上に名前のアンカーを非表示にしたかったので、最も経済的な解決策は、開口部のdivタグ、すなわち、

内のidとアンカーを含むことが判明しました 
<div id="[serial number]" class="topic_wrapper">

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

空のスパンやdiv要素は、例えば、使用することができますが、この使用方法は検索し、縮退をにおいがします。

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

第二のサンプルは、問題の要素に一意のIDを割り当てます。この要素は、次いで、操作又はDHTMLを使用してアクセスすることができます。

最初のものは、一方で、ブックマークに類似文書内の名前の位置を設定します。 「アンカー」に添付、それは完璧な理にかなっています。

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

<=>と<=>要素の<=>属性が同じであることを確認してください。

どのように新しいブラウザに古いブラウザとid属性の名前属性を使用してについて。両方のオプションが使用され、フォールバック方法は、デフォルトで実装されます!!!

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top