最終更新日 2021年4月7日

summary要素

summary要素は、親要素であるdetails要素内で最初に記述し、ユーザーに対する追加の情報に関して「要約・キャプション」などの概要説明を示します。

HTML5での変更点

・summary要素は、HTML5で追加された新しい要素です。

カテゴリ	タグの省略	親要素	子要素
なし	省略不可	details	Phrasingコンテンツ

属性	値	説明
グローバル属性	-	-
イベント属性	-	-

サンプルコード

<body>
  <h1>メニュー一覧</h1>
  <details>
    <summary>ハンバーガー</summary>
    <p>香ばしく焼き上げられたビーフパティが特徴です。</p>
  </details>
  <details>
    <summary>チーズバーガー</summary>
    <p>まろやかでクリーミーなチーズが特徴です。</p>
  </details>
  <details>
    <summary>フィレオフィッシュ</summary>
    <p>クリーミーで酸味がきいたタルタルソースが特徴です。</p>
  </details>
</body>

参考文献：W3C HTML5「4.11.2 The summary element」