HP制作者、Web開発者向けのHTMLタグリファレンス・使用方法・サンプル

<details> 「詳細情報の表示／非表示」
[読み方：ディテイルズ]

<details>タグはリスト形式で詳細情報の表示／非表示を制御する事が出来ます。
2013年4月時点で多くのブラウザでは対応していません。
<details>は、HTML5で一旦は追加されましたが、
W3C Candidate Recommendation 29 April 2014
で削除されたため、使用できません。
HTML規格HTML4.01HTML5
使用可否××

<details> の属性

【構文】
<details open>
<summary>～見出し～</summary>
<dl>
・・・
<ul>
・・・
</details>
属性意味値のサンプルなど
open詳細情報を開いた状態でページを表示する"open"
グローバル属性
  • accesskey
  • class
  • contenteditable
  • dir
  • hidden
  • id
  • lang
  • spellcheck
  • style
  • tabindex
  • title
  • translate
イベント属性

<details>のサンプル

<details>
<summary>ミニチュアダックスフンド</summary>
<dl>
<dt>体重</dt><dd>4～5Kg</dd>
<dt>体高</dt><dd>15cm前後</dd>
<dt>原産国</dt><dd>ドイツ</dd>
<dt>特徴</dt><dd>狩猟犬として活躍していたダックスを小型化した犬種</dd>
</dl>
</details>
ミニチュアダックスフンド
体重
4～5Kg
体高
15cm前後
原産国
ドイツ
特徴
狩猟犬として活躍していたダックスを小型化した犬種

ブラウザにより見た目は変わります。

留意事項

  • <details>タグは、HTML5で一旦は追加されましたが、最終的に削除されたため使用できません。
  • <summary>～</summary>を指定しない場合、"詳細"が表示されます。(chromeで確認）
  • 属性にopenを指定した場合、詳細リストが開かれた状態でベージが表示されます。

関連するHTMLタグ

<summary>詳細情報の表示／非表示の表示される文字列を指定。
cman.jp>WEBページ作成TOP>HTMLタグ・リファレンス><details> 「詳細情報の表示／非表示」