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要素」を利用するなどしたほうが、コンテンツの趣旨を明確に伝える助けとなるはずです。