figure

【定義】:説明文付き図表を指示するHTML
『figure』は自己完結型の説明文付き図表です。

figureの使用例[HTMLソースコード]

[html highlight="6,9"]
<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>
[/html]

figureの使用方法解説

 「figure要素」は、説明文のついた「写真」「図」「表」「動画」あるいは「コード」などを表すのに用います。
 通常、文書の主要なコンテンツから参照されるようなものに利用します。同一のページ内であっても、その文書の流れを邪魔しない場所に配置したり、独立した別の文書に記述することもできます。
 説明文を入れる場合は、「figure要素」の最初に、「figcaption要素」として記述します。

「figure」を使うべき場所

 「figure要素」は、「HTML5」で新たに追加された要素です。
 「article要素」や「aside要素」と並び、コンテンツの意味付けという点で重要と言えます。しかし、はたして、どのような「図」「画像」「動画」が「figure要素」にふさわしいのか、悩ましい点でもあります。
 W3Cの仕様草案によれば、「figure要素」は、HTML文書のメイン・コンテンツから注釈として添付される「イラスト」「図表」「写真」「コード・リスト」に対して利用するとあります。そして、その「figure要素」は、メイン・コンテンツの流れに影響を与えることはない、とも書いてあります。
 すなわち、記事(article要素など)内において、解説として「(図1)」や、「(写真1)」などと番号が振られており、本文の脇や、あるいは別ページに記載されているようなものがあります。
 これらのように、本文の流れとは直接、関係ないけれど、添付すべき「図表」「画像」「動画」などです。
 このような状況を想定すると、「figure要素」が本文内のどこの注釈となるのか、「a要素」と「id属性」を利用したり、あるいは「figcaption要素」を利用するなどしたほうが、コンテンツの趣旨を明確に伝える助けとなるはずです。

ホームページ作成会社.com 無料集客可能なホームページ制作
会社ホームページ作成 | 簡単格安ホームページ作成サイト - FunMaker[ファンメイカー]
初心者も稼ぐ高機能アフィリエイトサイト作成システム | FunMaker[ファンメイカー]
SEO対策のための Webライティング実践講座

2015年2月19日発売の当社の最新書籍はAmazonランキング1位、東京都庁の三省堂書店でSEO対策書籍として唯一取り扱われるなど、SEO対策の教科書として高い評価を受けています。