HyperText Markup Language figure element.
figure 要素は、メインコンテンツに関わりがあるものの、自己完結している（その要素がなくなっても、本節に影響を与えない）コンテンツを囲んでキャプション付きの図画を表します。キャプションは必須ではありません。例えば、イラストなどの注釈の絵、図、写真、ソースコードなどの図画に相当するコンテンツと、キャプションを、セマンティクス（文書構造）上、結び付けたい場合に使う事が出来ます。
<figure>
<img src="sample.jpg" alt="サンプル">
<figcaption>キャプションのサンプル</figcaption>
</figure>
本文上で必ずユーザが参照しなければいけない重要な情報ではなく、なくてもいいけど、あったらより詳しく内容がわかる補足情報・説明文・解説が figure 要素の役目であり、そして必ずしも絵や写真だけのために用いられるわけではない。
figure 要素で表したいコンテンツは、figure 要素の中にそのまま入れます。キャプションは figcaption 要素でマークアップしなければいけません。ただし、キャプションを表す figcaption 要素は必須ではありません。もし figcaption 要素を使ってキャプションをマークアップするなら、その figcaption 要素は、figure 要素の中で最初か最後でなければいけません。図画などを表すコンテンツの途中に figcaption 要素を入れる事は出来ませんので注意してください。（HTML5.1 では 任意の位置に figcaption 要素入れることができます）
figure 要素が登場した理由は、HTML や CSS の技術の進歩が関連しています。かつては、Google などの検索エンジンやブラウザは、img 要素で画像を入れれば「これは画像だ。」と理解することができました。しかし今では、img 要素を使用しないで簡単なイラストや図形などは CSS で作れるようになった結果、検索エンジンなどは、それが画像だと認識できなくなりました。img 要素以外の要素も画像だと認識できるようにするために作られたのが、figure 要素なのです。
写真のマークアップ例
<p>東京タワーは、昭和３３年に電波塔として建てられました。</p>
<figure id="tokyotower">
<img src="tokyotower.jpg" alt="赤と白を交互に塗装された東京タワーがそびえ立っています。">
<figcaption>現在の東京タワー</figcaption>
</figure>
<p>主に地上波アナログ放送に使われてきましたが、<a href="#tokyotower">現在の東京タワー</a>は、地上波デジタル放送にも使われています。</p>
コードのマークアップ例
<p>Canvas では、次の <a href="#sample">Javascript コード</a>のように、canvas 要素の <code>getContext('2d')</code> メソッドを使ってコンテキストを取得し、そのコンテキストに規定されたメソッドやプロパティを使って描画します。</p>
<figure id="sample">
<figcaption>Javascript コード</figcaption>
<pre><code>
window.onload = function() {
var canvas = document.getElementById('canvassample');
var ctx = canvas.getContext('2d');
drawGraph(ctx);
}
function drawGraph(ctx) {
...
}
</code></pre>
</figure>
これらのいずれの例も、もし figure 要素のコンテンツが別ページにあったとしても、それらへリンクする事で、メイン･コンテンツを損なわないという点に注目してください（これらの例では、あえて a 要素を使って figure 要素のコンテンツへのリンクをマークアップしましたが、これが必須と言うわけではありません）。
figure 要素でアークアップされたコンテンツは、ドキュメントのメイン･コンテンツから参照されるコンテンツであり、メイン･コンテンツとは独立したコンテンツと言うセマンティクスを持つことになります。そのため、figure 要素は、ページのサイドや、専用の別ページや、別表といった形で、メイン･コンテンツから別の場所に移動しても構わないコンテンツに使わなければいけません。ゆえに、この要素は、セクショニング･ルートに属しています。つまり、たとえ、figure要素の中で h1 要素を使ったとしても、そのドキュメントのアウトラインには現れないことになります。
通常、キャプション付きの図画のほとんどは、figure 要素でマークアップしても問題ありませんが、次のように、メイン･コンテンツの一部として存在していなければいけないようなコンテンツに figure 要素を使うのは不適切と言えるでしょう。
不適切なマークアップ例
<h1>HTML5解説</h1>
<figure>
<dt>目次</dt>
<dd>
<ul>
<li><a href="#c1">はじめに</a></li>
<li><a href="#c2">対象の読者</a></li>
...
</ul>
</dd>
</figure>
<section>
<h2 id="c1">はじめに</h2>
...
</section>
...
この例では、長いコンテンツを入れたページで、その目次欄を figure 要素でマークアップしています。figure 要素は、コンテンツにキャプションを関連付けるために使うものですが、このような場合は、目次欄もメイン･コンテンツの一部ですので、figure 要素を使うのは不適切と言えます。この場合は、figure 要素を使うのではなく、nav 要素で目次をマークアップし、キャプションに相当する「目次」の部分は h2 要素などの見出し要素でマークアップするべきでしょう。
figure {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
figure要素や figcaption要素を使用するメリットは、文書構造を分かりやすくできて、SEO対策となる点です。
HTMLでコーディングをする際に重要なのは、HTMLを見ただけで、どのタグでどのような内容を記述しているのかを分かるようにすることです。メインコンテンツとそれ以外のコンテンツを区別することで文書構造が分かりやすくなります。たとえば、figure要素は参照部分、aside要素はセクショニング要素として、補足的な部分であることを表して、タグの種類ごとにグループ化します。
文書構造が理解しやすくなると、Googleの検索エンジンで様々な Webサイトの情報を収集するクローラーが、Webサイトのページを見つけやすくなります。クローラーが収集した情報に基づいて検索結果の順序が決定されるので、HTMLの文書構造を分かりやすくすることは、SEO対策の１つです。
aside要素とはメインコンテンツの内容に関する補足情報を含んだセクションを示すタグです。ページの中で、メインコンテンツとの関連性が低い補足を付け加える際に使用され、HTMLの文書構造ではメインコンテンツに含まれません。
たとえば、ページ内の用語説明だけでなく、広告のような、前後の文書と別の目的を提供するコンテンツや、関連がほとんどないコンテンツも aside要素に含まれます。
aside要素は広告などのメインコンテンツと関連の薄いコンテンツに、figure要素はメインコンテンツに参照される補足説明となるコンテンツに用いられます。aside要素は、前後の文書とは別の目的のコンテンツや、メインコンテンツにほとんど関連がないコンテンツにも使用できるのに対し、figure要素は前後の文書に参照されるように関連性は高いものの、figure要素の部分が取り除かれても文書の流れに影響を与えないコンテンツに使用されます。
p要素とは、文章の段落を表すタグです。文章のひとかたまり、もしくは文章のかたまりの一部であることを示します。
画像などのコンテンツを p要素に入れるべきか figure要素に入れるべきかの違いは、そのコンテンツが文脈の一部であるかどうかです。p要素の中に画像などを挿入する際は、文章の文脈としてそのコンテンツが不可欠である場合であることが多く、反対に、文章の文脈的にそのコンテンツがなくても、問題がないようなコンテンツは figure要素に入れるべきです。