HTML5における<figure>タグの使い方

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


HTML5における<figure>タグの使い方

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


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


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

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


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

購読

平日・週2回更新