HTML5における＜figure＞タグの使い方

<figure>タグは、図や表などをグループ化する際に使用します。名前から、図や画像などに使うことは想像しやすいと思いますが、実はソースコードや詩、リストなど何でもコンテンツをグループ化することができるタグです。今回はHTML5における＜figure＞タグの使い方をご紹介します。

HTML5における＜figure＞タグの使い方

まとめたい画像や、表、リストなどを、<figure>〜</figure>で囲むだけです。例えば以下のようなリストがあったとします。

このように、マークアップしてグループにしたい部分を囲んでしまえば完了です。

同じように画像などをマークアップするものに、<p>タグがありましたが、HTML5からは、図や表は<figure>でマークアップすることでより文章構造として正しいマークアップが可能になり、推奨されています。ただし、<figure>を使えるのは、独立している自己完結できる内容に限定されます。独立している内容というのは、たとえ違うページにあったり、ページのどこにあっても、コンテンツが成り立っている状態のものです。

画像などであっても、文章などから独立しておらず、前後のコンテンツがないと成り立たないものの場合は、<figure>タグではなく、<p>タグを利用する必要があります。