<summary>
タグの定義と使い方
<summary>
タグは、<details>
タグで作成されたインタラクティブなウィジェットの詳細情報を要約したり、タイトルを定義する役割を持ちます。
<summary>
タグを理解するためには、事前知識として<details>
タグについて知っておく必要があります。
<details>
タグは、
ユーザーが選択して開閉できるコンテンツを定義するタグです。
<summary>
タグは、<details>
タグで作成されたインタラクティブなウィジェットの詳細情報を要約したり、タイトルを定義する役割を持ちます。
<details>
<summary>要約内容</summary>
追加情報や詳細な内容
</details>
<summary>
タグは、基本的に►形のマーカーが表示されます。
要約内容
追加情報や詳細な内容<details>
と<summary>
タグ
<summary>
タグの先祖要素には必ず<details>
タグが存在しなければなりませんが、<details>
タグの子孫要素として<details>
タグが必ず存在する必要はありません。
<details>
タグの子孫要素として<details>
タグが必ず存在しなければならないわけではありませんが、<details>
タグを省略することはウェブアクセシビリティを考慮すると推奨されません。
注意点をご参照ください。
<details>
に<summary>
タグがある場合
<summary>
タグは<details>
のタイトルを示します。
<details>
<summary>要約内容</summary> <!-- <summary>タグはタイトルを示します -->
追加情報や詳細な内容
</details>
<summary>
タグを使用してタイトルを表示した例です。
要約内容
追加情報や詳細な内容<details>
に<summary>
タグがない場合
もし<details>
タグに<summary>
タグがない場合、
ユーザーエージェント(ブラウザなど)は独自の要約情報やタイトルを<details>
タグに提供します(例:「詳細」)。
次の例では<summary>
タグを使用していません。
<summary>
タグを使用していません。
<details>
追加情報や詳細な内容
</details>
<summary>
タグを使用しなかった場合、ユーザーエージェント(ブラウザーなど)は独自のタイトルを提供します(例:「詳細」)。このデフォルトのテキストはブラウザの言語設定に応じてローカライズされるため、ユーザーの環境によって表示が異なる場合があります。
注意点
<summary>
タグを使用する際には、次の注意点があります。
<summary>
タグの位置
<summary>
タグはタイトル(要約内容)を示す要素であり、<details>
タグ内で使用する場合、視覚障害者向けの支援技術であるスクリーンリーダーのために 最初の子要素としてマークアップする必要があります。これによりスクリーンリーダーは<summary>
タグのタイトルを先に読み上げ、その後に詳細情報を読み上げるため、可読性において重要なポイントとなります。このような理由から、<summary>
タグを省略することは推奨されません。
role
属性は許可されていません
<summary>
タグはrole
属性が許可されていません。<summary>
タグの暗黙的なrole
属性値はbutton
です。
role
属性の詳細については、以下のリンクをご参照ください。
ブラウザ互換性
タグと属性 |
デスクトップ Chrome
|
デスクトップデスクトップ Edge
|
デスクトップ Firefox
|
Safari
|
---|---|---|---|---|
<summary>
|
12 | 79 | 49 | 9 |
<details>
|
12 | 79 | 49 | 9 |
open
|
12 | 79 | 49 | 9 |
仕様書
仕様書 | |
---|---|
<summary>
|
HTML Standard #the-summary-element |
<details>
|
HTML Standard #the-details-element |