figure要素：HTML Living Standard各要素別メモ

概要

カテゴリー

配置できる場所

上記カテゴリーの要素が置ける場所。

内容モデル

Flow content
上記に加えて、1個のfigcaption要素を、最初又は最後の子として含んでもよい。

main要素の規定による制限
- main要素を子孫に含んではならない。

属性

グローバル属性

HTML構文におけるタグの省略

省略不可。

WAI-ARIA

子孫にfigcaption要素を持たない場合は、
- デフォルトroleは、figure。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外では、すべてのroleが指定可能。
子孫にfigcaption要素を持つ場合は、
- デフォルトroleは、figure。デフォルトroleをrole属性値に指定することは、推奨されない。
- デフォルトrole以外のroleは、指定不可。

視覚系ブラウザのデフォルトとして期待されるCSS


  figure {
    display: block;
    unicode-bidi: isolate;
    margin-block: 1em;
    margin-inline: 40px;
  }

意味・用法

自己完結型であり、かつ、一般的にHTML文書のメインフローから単独のユニットとして参照されるところの、Flow contentを表す。

例→挿絵、参考図表、参考写真、例示としてのコード。

HTML文書のメインフローから参照されるというほどのものでもない脱線気味の内容ならば、aside要素を用いるべきである。

アクセシビリティ関連

内容が非テキストコンテンツの場合は、そのコンテンツが何なのかを端的に示すキャプションをfigcaption要素で付すべきである（Techniques for WCAG 2.1 : G100）。

私見・補足

当該部分は単独でも独立したコンテンツとして成立するものでなければならない（独立した記事・ウェブページとして成立することまでは要求されない）。

それに加えて、当該部分を分離して別のウェブページに追いやったとしても、その別ウェブページの当該部分へのリンクを適切な位置とテキストで設置することによって、元のウェブページは意味が通じるものとして成り立つ状態でなければならない。つまり、当該部分はそこにある必然性はなく、主要コンテンツ部分からなんらかの形で参照が可能であれば、どこにあったっていいものでなければならない。

バナーとかサイトロゴとかは当てはまらない（リンクテキストの代わりだったり、ウェブサイトの表題テキストの代わりだったりするもので、独立したコンテンツとしては成り立たないので）。

表示確認

ソース


  <p>この分野の重要文献は「別表１：××に関する重要文献」に列挙した。</p>
  <p>この中でも真っ先に読むべき文献は・・・。</p>
  <figure>
    <figcaption>別表１：××に関する重要文献</figcaption>
    <ul>
      <li>重要文献１</li>
      <li>重要文献２</li>
    </ul>
  </figure>

表示結果

この分野の重要文献は「別表１：××に関する重要文献」に列挙した。

この中でも真っ先に読むべき文献は・・・。

別表１：××に関する重要文献

重要文献１
重要文献２