<details>の解説｜クロノドライブのHTML5辞典

「details」とは、普段は非表示にされている付加的な情報などを、ユーザーの要求によって表示するためのタグです。

<details>～</details>の子要素として<summary>要素を配置すると、その情報のキャプション等を示すことができます。その場合、最初の<summary>～</summary>の内容が<details>で指定された詳細の要約となります。<summary>がない場合、ブラウザが自動的に何らかのキャプションを付けます。
対応するブラウザでは通常このキャプションだけが表示され、クリックすることで表示/非表示を切り替えることができます（Javascriptを使用しなくとも）。

内容の表示/非表示はopen属性の有無とともに切り替わります。
<details>要素がページに読み込まれた際にopen属性があれば、要約とともに最初から内容が表示されます。
クリックして表示する際は<details>要素へ自動的にopen属性が加えられ、非表示にする際は取り除かれます。
また、Javascriptでopen属性の有無を切り替えた場合も、自動的に表示/非表示が切り替わります。
CSSの属性セレクタでopen属性を指定し、隣接セレクタなどとあわせて使うことで、表示/非表示の切り替えにあわせて周辺要素のスタイルを変えることも可能です

なお、脚注を表すために<details>を使用するのは適切ではありません。