Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

トップページ
HTMLタグ辞典
data-* / hidden / tabindex

data-* / hidden / tabindex

『data-*』『hidden』『tabindex』はほぼすべてのHTML要素に指定できるグローバル属性です。『data-*』はJavaScriptで使うカスタムデータの埋め込み、『hidden』は要素の非表示、『tabindex』はキーボードのTabキーによるフォーカス順序の制御に使用します。

構文

<!-- data-* カスタムデータ属性 -->
<div data-user-id="123" data-role="admin">...</div>

<!-- hidden 要素を非表示にする -->
<p hidden>この段落は非表示です。</p>

<!-- tabindex フォーカス順序の制御 -->
<div tabindex="0">フォーカス可能な要素</div>
<input tabindex="1" type="text">
<input tabindex="-1" type="text"><!-- フォーカスをスキップ -->

属性一覧

属性	概要
data-*	任意のカスタムデータを要素に埋め込みます。『data-』に続けて自由な名前を付けられます。JavaScriptの『dataset』プロパティで読み書きできます。
hidden	要素を非表示にします。値なしのブール属性で、指定するだけで要素が見えなくなります。CSSの『display: none』と同様の効果です。
tabindex	Tabキーによるフォーカスの順序を数値で指定します。『0』で自然な順序でフォーカス可能になり、『-1』でフォーカスをスキップします。

tabindexの値一覧

値	概要
正の整数（1, 2, 3...）	数値の小さい順にフォーカスされます。自然な順序を乱すため、通常は使用しません。
0	DOMの順序でフォーカスされます。本来フォーカスできない要素（divなど）をフォーカス可能にする際に使用します。
-1	Tabキーではフォーカスされなくなります。JavaScriptで『.focus()』を呼べば手動でフォーカスできます。

サンプルコード

<!-- data-*にデータを埋め込む -->
<ul id="product-list">
  <li data-product-id="101" data-price="1500">商品A</li>
  <li data-product-id="102" data-price="2800">商品B</li>
</ul>

<!-- hiddenで初期状態を非表示にする -->
<div id="detail-panel" hidden>
  <p>詳細情報がここに表示されます。</p>
</div>

<button onclick="document.getElementById('detail-panel').hidden = false;">
  詳細を表示する
</button>

// data-*属性をJavaScriptで読み取る
var items = document.querySelectorAll('#product-list li');
items.forEach(function(item) {
  var id    = item.dataset.productId; // data-product-id → dataset.productId
  var price = item.dataset.price;
  console.log('ID: ' + id + ' 価格: ' + price + '円');
});

実行結果

ページ読み込み時は「詳細を表示する」ボタンのみ表示されます。ボタンをクリックすると、『hidden』属性が外れて詳細パネルが表示されます。コンソールには各商品のIDと価格が出力されます。

概要

『data-*』属性はHTMLとJavaScriptのデータ受け渡しによく使われます。JavaScriptでは『dataset』プロパティを使ってアクセスでき、属性名のハイフン区切り（例: 『data-product-id』）はキャメルケース（例: 『dataset.productId』）に自動変換されます。

『hidden』属性はCSSの『display: none』と同じ効果ですが、HTMLの属性として記述できるため、JavaScriptで『要素.hidden = true/false』と書くだけで表示・非表示を切り替えられて便利です。ただし、CSSで『display: flex』などを指定している要素に対しては『hidden』が上書きされる場合があるため、注意が必要です。

『tabindex』はアクセシビリティ向上のために使用します。正の整数を使ったフォーカス順序の制御は、DOMの自然な順序を乱してスクリーンリーダーの利用者を混乱させる可能性があるため、基本的には避けてください。『tabindex="0"』と『tabindex="-1"』の2種類で大半のユースケースに対応できます。