MILK2016/6/3更新HTML5における<figure>タグの使い方タイトルとURLをコピー<figure>タグは、図や表などをグループ化する際に使用します。名前から、図や画像などに使うことは想像しやすいと思いますが、実はソースコードや詩、リストなど何でもコンテンツをグループ化することができるタグです。今回はHTML5における<figure>タグの使い方をご紹介します。HTML5における<figure>タグの使い方まとめたい画像や、表、リストなどを、<figure>〜</figure>で囲むだけです。以下のようなリストがあったとします。</ol>12345<ol><li>Aをする</li><li>Bをする</li><li>Cをする</li></ol>このように、マークアップしてグループにしたい部分を囲んでしまえば完了です。</figure>1234567<figure><ol><li>Aをする</li><li>Bをする</li><li>Cをする</li></ol></figure>同じように画像などをマークアップするものに、<p>タグがありましたが、HTML5からは、図や表は<figure>でマークアップすることでより文章構造として正しいマークアップが可能になり、推奨されています。<figure>を使えるのは、独立している自己完結できる内容に限定されます。独立している内容というのは、たとえ違うページにあったり、ページのどこにあっても、コンテンツが成り立っている状態のものです。画像などであっても、文章などから独立しておらず、前後のコンテンツがないと成り立たないものの場合は、<figure>タグではなく、<p>タグを利用する必要があります。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。