<summary>タグの定義と使用方

<summary>タグは、
<details>タグで作成されたインタラクティブなウィジェットの詳細情報を要約したり、タイトルを定義する役割を持ちます。

<summary>タグを理解するためには、事前知識として<details>タグについて知っておく必要があります。

<details>タグは、
ユーザーが選択して開閉できるコンテンツを定義するタグです。

HTML <summary>タグは、<details>タグで作成されたインタラクティブなウィジェットの詳細情報を要約したり、タイトルを定義する役割を持ちます。 
<details>
    <summary>要約内容</summary>
    追加情報や詳細な内容
</details>

<summary>タグは、基本的に►形のマーカーが表示されます。

ブラウザでの実際の表示例 「要約内容」というテキストをクリックすることで、詳細情報を表示または非表示にできます。

<details>と<summary>タグ

<summary>タグの先祖要素には必ず<details>タグが存在しなければなりませんが、
<details>タグの子孫要素として<details>タグが必ず存在する必要はありません。

<details>タグの子孫要素として<details>タグが必ず存在しなければならないわけではありませんが、<details>タグを省略することはウェブアクセシビリティを考慮すると推奨されません。
注意点をご参照ください。

<details>に<summary>タグがある場合

<summary>タグは<details>のタイトルを示します。

HTML 
<details>
    <summary>要約内容</summary> <!-- <summary>タグはタイトルを示します -->
    追加情報や詳細な内容
</details>
ブラウザでの実際の表示例 <summary>タグを使用してタイトルを表示した例です。

<details>に<summary>タグがない場合

もし<details>タグに<summary>タグがない場合、
ユーザーエージェント（ブラウザなど）は独自の要約情報やタイトルを<details>タグに提供します（例：「詳細」）。

次の例では<summary>タグを使用していません。

HTML <summary>タグを使用していません。 
<details>
    追加情報や詳細な内容
</details>
ブラウザでの実際の表示例 <summary>タグを使用しなかった場合、ユーザーエージェント（ブラウザーなど）は独自のタイトルを提供します（例：「詳細」）。
このデフォルトのテキストはブラウザの言語設定に応じてローカライズされるため、ユーザーの環境によって表示が異なる場合があります。

<summary>タグを使用する際には、次の注意点があります。

<summary>タグの位置

<summary>タグはタイトル（要約内容）を示す要素であり、<details>タグ内で使用する場合、視覚障害者向けの支援技術であるスクリーンリーダーのために 最初の子要素としてマークアップする必要があります。これによりスクリーンリーダーは<summary>タグのタイトルを先に読み上げ、その後に詳細情報を読み上げるため、可読性において重要なポイントとなります。このような理由から、<summary>タグを省略することは推奨されません。

role属性は許可されていません

<summary>タグはrole属性が許可されていません。<summary>タグの暗黙的なrole属性値はbuttonです。

role属性の詳細については、以下のリンクをご参照ください。

HTMLのrole属性

ブラウザ互換性

detailsタグ、open属性、summaryタグのブラウザ互換性
タグと属性
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
<summary> 12 79 49 9
<details> 12 79 49 9
open 12 79 49 9

caniuse.comで詳しい情報をご確認ください。

仕様書

detailsタグとsummaryタグの仕様
仕様書
<summary> HTML Standard
#the-summary-element
<details> HTML Standard
#the-details-element

参考資料

関連項目