figcaption/figure/footer

<figcaption>

figcaption要素は、この親のfigure要素に残りのコンテンツがあれば、そのコンテンツのキャプションや説明文を表します。
<figure>~</figure>の中に配置すると、図表にキャプションを付けることができます。

HTML5コーディングならココ!

<figure>

figure要素は、いくらかのフロー・コンテンツを表します。オプションで、キャプションを伴います。これは、自己完結したものとなり、通常は、ドキュメントのメインのフローから単独のユニットとして参照されるものとなります。

そのため、この要素は、挿絵、図表、写真、コードなどに注釈を付けるために使われます。これらは、ドキュメントのメインのコンテンツから参照されます。しかし、ドキュメントのフローに影響を与えることなく、主要なコンテンツから、ページのサイドや専用のページや付属ページなどへ切り離すことが可能です。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば、図表にキャプションや注釈を付けても良いでしょう。図表にキャプションを付ける場合には、<figcaption>タグを使用します。

<p>下の図が私の思う関係図です</p>

<figure id=” fastfood”>
<img src=”../images/mac.jpg” alt=”マックとケンタ、あなたはどっち!” width=”400″ height=”400″ />
<figcaption>あああぁ!?</figcaption>
</figure>

<p>チキンサンドはケンタで、ポテトはマック派です</p>

↓表示例

下の図が私の思う関係図です

マックとケンタ、あなたはどっち!
あああぁ!?

チキンサンドはケンタで、ポテトはマック派です

<footer>

footer要素は、その直近の祖先にあたるセクショニング・コンテンツに対するフッターを表します。フッターは通常は、そのセクションに関する情報を含みます。例えば、誰が書いたのかとか、関連のドキュメントへのリンクや、著作権データや、その類です。

footer要素がセクション全体を含む場合、それらのセクションは、別表、索引、長めの奥付、くどくどした使用許諾といったコンテンツを表します。

セクションの著者や編集者の連絡先情報は、address要素に属します。場合によっては、footer要素の中にaddress要素があるのかもしれません。

※フッターは、通常は、セクションの最後に現れますが、必ずしもそうする必要はありません。

直近の親となるセクショニング・コンテンツやセクショニング・ルート要素がbody 要素なら、それはページ全体に適用されます。

※footer要素はセクショニング・コンテンツではありません。この要素は、新たなセクションを導入することはありません。

WEB制作でお困りのあなたに朗報

<footer>
<nav>
<a href=”index.html”>Home</a>
<a href=”cat.html”>ネコのこと</a>
<a href=”dog.html”>犬のこと</a>
</nav>
<address>Copyright ネコと犬がどうしたら僕のことを好きになってくれるか委員会</address>
</footer>