id 属性固有の識別名を指定する

id 属性はその要素に固有の識別名を指定します。

id 属性はグローバル属性に分類され、すべての HTML 要素において使用することができます。id 属性の値は、文書内で一意でなければなりません。つまり、同じ id 属性値を複数の要素に指定することはできません。また、値には最低でも 1文字が必要で、空白文字を含むことはできません。

付与した id 属性値は、セレクタとして使用できるほか、リンクのフラグメント識別子としても利用できます。

id 属性値に使用できる文字列は、空白を含んではいけない以外に特に制約はありませんが、XML として扱ったり、セレクタとして使用する場合に問題が起こる可能性がありますので、半角英数字による指定、さらに英字 (先頭が xml を除く) からはじまる値を選択するのが無難です。詳しくは 「id / class 属性に使用できる文字列」 をご覧ください。

id 属性の仕様

この属性を使用できる要素
  • すべての HTML 要素

id 属性のサンプルソース

<div id="page-header">
 <header>
  <h1>ウェブサイト名</h1>
  <p>ウェブサイトの概要</p>
  <nav role="navigation">
   <ul>
    <li><a href="/">トップページ</a></li>
    <li><a href="/contact/">お問い合わせ</a></li>
   </ul>
  </nav>
 </header>
</div>
<!-- リンクのフラグメント識別子として利用できます -->
<ul>
 <li><a href="#section01">第1章 旅立ちの時</a></li>
 <li><a href="#section02">第2章 帰宅</a></li>
</ul>
<section id="section01">
 <h1>第1章 旅立ちの時</h1>
 …省略…
</section>
<section id="section02">
 <h1>第2章 帰宅</h1>
 …省略…
</section>

仕様書の該当箇所

3.2.3.1 The id attribute

用途から目的の要素を探す

用途から HTML5 の要素を逆引きできます。

テキストに対する意味づけを行いたい
テキストの編集を示したい
改行や折り返しを指定したい
上付きや下付きを指定したい
テキストの書字方向を制御したい
テキストにルビをふりたい
箇条書きなどリストを表したい
セクションを定義したい
コンテンツをグループ化したい
画像や映像などを埋め込みたい
スクリプトやスタイルを埋め込みたい
フォーム関連の要素
テーブル関連の要素
ドキュメントにメタデータを付与したい
インタラクティブな要素
その他

このページの上部へ