HTML<details>タグ：正しい理解と使い方

`<details>`タグの定義と使用方法

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

<details>タグは、一般的に追加情報や詳細情報を提供するために使用されます。仕様書では「ユーザーが追加情報やコントロールを取得できる開示ウィジェット（disclosure widget）を表す」と定義されています。

<details>タグは、主にアコーディオンウィジェットのように、ユーザーが開閉できるインタラクティブなウィジェットを作成するために使用されます。

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

<details>
    <summary>概要</summary>
    追加情報や詳細な内容
</details>

参考事項

<details>タグを使用するためには、<summary>タグについて理解しておく必要があります。

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

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

構文

あらゆる種類のコンテンツをタグ内に含めることができますが、<summary>タグを使用するとタイトル（概要）を表します。もし<summary>タグがない場合、ユーザーエージェント（ブラウザーなど）は独自のタイトルを提供します（例：「詳細」）。

HTML <summary>タグを使用すると、タイトルを表します。

<details>
    <summary>概要</summary> <!-- <summary>タグはタイトルを表します -->
    追加情報や詳細な内容
</details>

`open`属性

open属性はブール属性（boolean attribute）です。
この属性が存在する場合、概要と追加情報の両方をユーザーに表示することを示します。もしこの属性がない場合は、概要のみが表示されます。

基本的にウィジェットは閉じた状態です。開くと展開されて内容が表示されます。必要に応じて、open属性を使ってウィジェットを開いた状態にすることができます。

HTML open属性を使ってウィジェットを開いた状態にすることができます。

<details open> <!-- 必要に応じて、open属性を使ってウィジェットを開いた状態にできます。 -->
    <summary>概要</summary>
    追加情報や詳細な内容
</details>

<details>タグがブラウザ上でどのように実装されているかを見ると、JavaScriptで使われていたアコーディオン（あるいはトグル）をHTMLで実現するために考案されたものだと推測できます。従来はJavaScriptとCSSを用いてアコーディオンを実装する必要がありました。しかし、<details>タグはこのパターンをブラウザ自身がサポートすることで、ウェブ開発者がより簡単にアコーディオンを実装できるよう支援しています。

注意点

<details>タグを使用する際には、いくつか注意すべき点があります。

`<summary>`タグの位置

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

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

<details>タグはrole属性を許可していません。<details>タグの暗黙のrole属性値はgroupです。

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

HTMLのrole属性：障がいのあるユーザーのためのアクセシブルなWebコンテンツの提供

`<details>`タグは脚注には適していません。

脚注（footnotes）は主に文書内で参考事項や追加情報を提供するために使用され、簡潔に表示することが求められます。しかし、<details>タグはユーザーにより多くの情報を提供するために使われるため、脚注とは目的や性質が異なるといえます。脚注のマークアップ方法については、以下の仕様書の内容をご参照ください。