figure
【定義】:説明文付き図表を指示するHTML
『figure』は自己完結型の説明文付き図表です。
figureの使用例[HTMLソースコード]
<article> <h1>500万円得をするホームページ作成会社.comのホームページ制作</h1> <p>あなたは500万円の損をしていることに気付いていますか??</p> <p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか?</p> <p>当ホームページ作成会社.comのサービスを利用することで、『業界最安水準で安全のドメイン・サーバー』『更新・管理費をゼロにする独自システム』『集客コストを激減させる圧倒的SEO対策』の3点により、御社のホームページのランニングコストをドメイン・サーバー費用などの月額5,000円程度に引き下げることが出来ます。つまり、1年で54万円、10年で540万円の得ができるのです。</p> <figure id="HskService"> <figcaption>ホームページ作成会社.com サービス</figcaption> <img src="https://homepage-sakusei-kaisha.com/service.jpg"alt="ホームページ作成会社.com サービス"> </figure> </article>
figureの使用方法解説
「figure要素」は、説明文のついた「写真」「図」「表」「動画」あるいは「コード」などを表すのに用います。
通常、文書の主要なコンテンツから参照されるようなものに利用します。同一のページ内であっても、その文書の流れを邪魔しない場所に配置したり、独立した別の文書に記述することもできます。
説明文を入れる場合は、「figure要素」の最初に、「figcaption要素」として記述します。
「figure」を使うべき場所
「figure要素」は、「HTML5」で新たに追加された要素です。
「article要素」や「aside要素」と並び、コンテンツの意味付けという点で重要と言えます。しかし、はたして、どのような「図」「画像」「動画」が「figure要素」にふさわしいのか、悩ましい点でもあります。
W3Cの仕様草案によれば、「figure要素」は、HTML文書のメイン・コンテンツから注釈として添付される「イラスト」「図表」「写真」「コード・リスト」に対して利用するとあります。そして、その「figure要素」は、メイン・コンテンツの流れに影響を与えることはない、とも書いてあります。
すなわち、記事(article要素など)内において、解説として「(図1)」や、「(写真1)」などと番号が振られており、本文の脇や、あるいは別ページに記載されているようなものがあります。
これらのように、本文の流れとは直接、関係ないけれど、添付すべき「図表」「画像」「動画」などです。
このような状況を想定すると、「figure要素」が本文内のどこの注釈となるのか、「a要素」と「id属性」を利用したり、あるいは「figcaption要素」を利用するなどしたほうが、コンテンツの趣旨を明確に伝える助けとなるはずです。