最終更新日

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」外部リンク
HOME