id

id グローバル属性は、文書全体で一意でなければならない識別子 (ID) を定義します。この属性の用途は、リンク（フラグメント識別子を使用）、スクリプト、スタイル（CSS を使用）で要素を特定することです。

試してみましょう

<p>A normal, boring paragraph. Try not to fall asleep.</p>

<p id="exciting">The most exciting paragraph on the page. One of a kind!</p>

#exciting {
  background: linear-gradient(to bottom, #ffe8d4, #f69d3c);
  border: 1px solid #696969;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 2px 2px 1px black;
}

#exciting:before {
  content: "ℹ️";
  margin-right: 5px;
}

警告: この属性の値は不伝導性の文字列です。つまり、ウェブ作者は人間が理解するための情報を伝えるためにこの情報を使用するべきではありません（ただし、 ID を人間が理解できるようにすることは、コードを理解するために有用です。例えば、 ticket-18659 と r45tgfe-freds&$@ を比べてみてください）。

id の値にホワイトスペース文字 (空白やタブなど) を含めてはいけません。ブラウザーはホワイトスペース文字を含む不適合な ID を、ホワイトスペース文字が ID の一部であるかのように扱います。空白区切りで並べた値を受け入れる class 属性とは対照的に、要素は ID の値をひとつだけ持つことができます。

メモ: 技術的には、id 属性の値にはホワイトスペース文字を除いて、どんな文字でも入れることができます。しかし、不注意によるエラーを避けるためには、ASCII 文字、数字、'_'、'-' のみを使用し、id 属性の値は文字から始める必要があります。例えば、. は CSS では特別な意味を持ちます（クラスセレクターとして動作します）。CSS の中でそれをエスケープするように注意しない限り、id 属性の値の一部として認識されることはありません。この処理を忘れると、コードにバグが発生し、発見が困難になることがあります。

仕様書

Specification
HTML
# global-attributes:the-id-attribute-2

ブラウザーの互換性

BCD tables only load in the browser

関連情報