HTML5で忘れられがち&マイナーだが便利な3つの要素

最新技術を追っているWebデベロッパであれば、本番環境に導入するかどうかは別として、すでにHTML5やCSS3で策定が進められている新機能のいくつかは試用しただろう。HTML5といえば最近はvideoやcanvasの機能が取り上げられることが多い。HTML5そのものに突っ込んだ記事では加えてarticle、section、header、footer、navなどの階層化に関する要素も紹介される。しかし実際にHTML5で導入が進められている要素はさらに多く、注目されることは少ないが重要なものがある。

SitePointのDon't Forget About HTML5's "Little Guys"において、そうしたマイナーに扱われがちだが便利な要素が3つ紹介されている。HTML5の技術を追っていく過程で、こうした機能についても軽くおさえておきたいところだ。紹介されている機能は次のとおり。

hgroup要素

<hgroup>
 <h1>ここのタイトルが表示される</h1>
 <h2>副題などを表記したり</h2>
 <h3>さらに副題を追加したり</h3>
</hgroup>

HTML5にはヘッダをグループ化するhgroupという要素が用意されている。h1、h2、h3、h4、h5、h6をまとめるための要素で、まとめた要素のうちもっともレベルの高いもの(たとえばh1)のみが表示されるという振る舞いをする。副題を記述したいがそれがアウトラインに表示されるのは困るといった場合に利用できる。たとえばタイトルと副題をそれぞれh1およびh2に記入して、2つをhgroupで囲めばいい。一見するとh1しか使われていないように振る舞うようになる。なお、同じレベルのヘッダが使われている場合には先に出てきた方が優先される決まりになっている。

aside要素

本文とまったく関係がないわけではないが、それほど重要でもないといったコンテンツをまとめる場合に使われるのがaside要素。aside要素で囲むようなコンテンツは、それ単体ではポータブルなコンテンツとして扱えないようなものといえる。ブログでいえばサイドバーのエリアに表示されるようなものが該当し、たとえば注釈や用語解説、著者紹介、本文抜粋見出しなどが当てはまる。

mark要素

主に検索結果を表示するページでキーワードをハイライトするために使われる要素がmarkとなる。これまでこうした要素ではstrongやemが使われていたが、これはほかに適切な要素がなかったためであり、markはこの用途における代替え要素となる。検索結果ページにおけるキーワードハイライト以外にはあまり積極的に用いられることがないが、強調したいワードがある場合の指定として利用できる。