目次に戻る

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

概要

カテゴリー
配置できる場所
内容モデル

W3C : HTML5.3figcaption要素の配置位置は、最初又は最後に限定されてはいなかった。

属性
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-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
  }
  
意味・用法

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

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

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

アクセシビリティ関連

私見・補足

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

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

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

Sectioning rootなので最上位セクションとなる。独自のキャプション用の子要素figcaption要素)があるので、それかHeading contentによるかのいずれかによる見出し入れが推奨される。

表示確認

ソース

  <p>この点については、既に多くの論証がなされており、改めて述べるまでもない(別表1:××に関する参考文献を参照)。</p>
  <p>むしろ、問題は○○の点にある。</p>
  <figure>
    <figcaption>別表1:××に関する参考文献</figcaption>
    <ul>
      <li>参考文献1</li>
      <li>参考文献2</li>
    </ul>
  </figure>
  
表示結果

この点については、既に多くの論証がなされており、改めて述べるまでもない(別表1:××に関する参考文献を参照)。

むしろ、問題は○○の点にある。

別表1:××に関する参考文献
  • 参考文献1
  • 参考文献2