Webページ内の一意の識別子
W3Cによると、HTMLのID属性は次のとおりです。
要素の一意の識別子
これは、非常に強力な属性の非常に簡単な説明です。 ID属性は、Webページに対していくつかのアクションを実行できます。
- スタイルシートセレクタ - これは、ほとんどの人がID属性を使用する関数です。 一意であるため、IDプロパティを使用してスタイルを設定すると、Webページ上の1つのアイテムだけをスタイリングすることができます。 スタイリングの目的でIDを使用することの欠点は、非常に高いレベルの特異性があることです。後でスタイルシートで何らかの理由でスタイルをオーバーライドする必要がある場合、非常に困難になる可能性があります。 このため、現行のWebプラクティスは、一般的なスタイリングの目的で、IDおよびIDセレクターの代わりにクラスおよびクラス・セレクターを使用する傾向にあります。
- リンク先の名前付きアンカー - Webブラウザーでは、URLの最後にあるIDをポイントすることで、Web文書内の正確な場所をターゲットにすることができます。 ポスト記号（＃）が付いたページURLの最後にidを追加するだけです。 a要素のhref属性にシャープ記号（＃）とID名を追加することで、ページ自体でこれらのアンカーにリンクすることもできます。 たとえば、 連絡先が IDの部門がある場合は、そのページで次のようにリンクすることができます。
これはリンクテキストです - スクリプトのリファレンス - Javascript関数を記述する場合は、ID属性を使用してスクリプトのページ上の正確な要素を変更できます。
- その他の処理 - IDを使用すると、必要な方法でWeb文書を処理できます。 たとえば、HTMLをデータベースに抽出し、ID属性でフィールドを識別します。
ID属性の使用規則
ドキュメント内のどこにでもid属性を使用する有効なドキュメントを作成するために必要な規則はいくつかあります。
- IDは文字（azまたはAZ）で始まる必要があります。
- 後続のすべての文字は、文字、数字（0-9）、ハイフン（ - ）、アンダースコア（_）、コロン（:)、ピリオド（。）です。
- 各IDは文書内で一意でなければなりません。 どうして？
ID属性の使用
Webサイトのユニークな要素を特定したら、スタイルシートを使用して1つの要素だけをスタイルすることができます。
お問い合わせ
ここにいくつかのテキストコンテンツがあります
div＃contact-section {背景：＃0cf;}
-あるいは単に-
＃contact-section {background：＃0cf;}
これらの2つのセレクタのどちらも機能します。 最初のもの（div＃contact-section）は、ID属性が "contact-section"の分割を対象とします。 2番目の（＃contact-section）は、 "contact-section"というIDの要素をまだ対象としていますが、探しているものが部門であることは分かりません。 スタイリングの最終結果はまったく同じです。
タグを追加せずにその特定の要素にリンクすることもできます：
連絡先情報へのリンク
"getElementById" JavaScriptメソッドを使用してスクリプト内の段落を参照する：
document.getElementById（ "contact-section"）
IDの属性は、HTMLで非常に便利です。ただし、クラスセレクタは最も一般的なスタイル設定の目的で代わりに使用されています。 ID属性をスタイルのフックとして使用し、スクリプトのリンクやターゲットのアンカーとしても使用できるため、今日でもWebデザインにおいて重要な位置を占めています。
ジェレミージラール編集