脚注を更に便利にする新たなタグ

現在、ホームページ制作者だけでなく業界を問わず注目を集めているＨＴＭＬ５ですが、今回のバージョンが特に注目を集めているその理由はどこにあるのでしょうか？
今までの改定と今回のＨＴＭＬ４からＨＴＭＬ５への改定は何が違うのかと言うと、根本が変わったのではなく追加の要素がスーパーだったのです。

ということで、いくつか追加されたＨＴＭＬ５の新要素のうちの対話要素についてを見ていきます。
説明していくのはＨＴＭＬ５の対話要素のひとつであるdetailsとlegendについてになります。

まずはじめに、解説の必要がある語句がホームページの本文の中に出てくることは特に珍しくなく、「（注）」という記号などをそこに入れることによって通常ならば周辺スペースに解説をつけるもの。

こういった方法をとることによって本文の流れの邪魔にもならず、スムーズに解説を加えることができるためですよね。

その「こういった方法」のことを「脚注」と言ったりもしますが、この脚注には実は大きな欠点があるということにみなさん気付いていますか？
それが本文ではない部分からいちいち解説を探す必要がある、ということ。

ですから、こういった方法を採っているホームページなどを閲覧する際、長いページなどでは画面を大きくスクロールしなければならないんですよね。
みなさんも一度は経験したことがあると思うのですが、これらの不便なポイントを解消してくれるのがＨＴＭＬ５において追加されたdetailsやlegendなのです。

まずはdetailsについてですが、このdetailsタグで挟まれた部分というのはデフォルトでは表示されない仕様となっていて、ユーザーからのクリックやマウスオンといったような何らかの動作があって初めて内容が表示されるようになっているんです。

どのブラウザにも共通しているのは、本文の流れをストップさせてしまう心配がないということ、そしてナチュラルにdetailsに内容を表示するということのふたつです。

さて、次にlegendタグについてですが、こちらはdetailsの中でもまたオプション的な使い方をする要素で表立った使い方をするようなものではありません。
脚注のような使い方をされるdetailsに対してlegendは、その内容を更にぎゅっと要約したものを表示するような役割を担っています。

つまりlegendタグが単独で使用されることはなく、必ずdetails要素の中で使われるものである、ということになりますね。
おまけのそのまたおまけ、というような立ち位置なのです。