HTML5特有タグの使い方

XHTML+RDFa1.0で作成していたページをHTML5へ書き換えました。外見はHTML5になりましたが、文書構造は従来のままでした。そこで、header, footer, nav, section, article, asideなどのHTML5特有タグの使い方を調べて使ってみました。

HTML5への移行と特有のタグについて

HTML5になると、HTML5特有のタグ楽天が使えるようになります。HTML4やXHTMLから移行した場合は、とりあえず、header, footer, nav, section, article, asideの各タグの設定をすれば良いと思います。

その他のHTML5特有のタグについては、必要に応じて追加していけば良いのではないかと思います。

この文章は、私が調べて私のウェブページで設定しているもので、間違いや勘違いがあるかも知れません。

また、私の独断でやっているもので、参考にならないかも知れません。でも、アウトラインはそこそこうまく表示されており、間違いとも言えないかも知れません。

HTML4やXHTMLでは、文書の構造よりも、ページの構成をDIVタグによって分けていた場合が多いと思います。

例えばページの上にヘッダーを持ってきて、左にサイドバー、右にメインコラムを設定して、下にフッターを設定するとかしている場合が多いと思います。これは文書の中身よりもページの配置の構造を示していました。

HTML5では、これまでとは別に、文書の中身を加味した構造を特有のタグでも設定できるようになりますので、後述のようにタグを追加しました。従来のDIVタグはページの構成上必要ですのでそのまま残しています。

私の場合は、元々、ヘッダーやフッターは無いので、headerとfooterタグは設定しませんでした。必要があれば後から設定するかも知れません。

上記のタグのうちで残った、nav, section, article, asideの中で、sectionタグを除いて設定しました。理由は、sectionタグは後述のように、従来のHTMLのHタグで文書のアウトラインは暗黙的に作られているからです。

つまり、大きく分けて、メインコラムをarticleタグに入れて、サイドバーをasideタグに入れました。

また、これらの中でメニューやパンくずリストをnavに設定して、広告をsaideに設定しました。

つまり、各タグを次のように設定しました。

HTML5ではセクショニング要素でアウトラインを形成していくことができます。しかし、今までのHTML4やXHTMLで書かれたページにはセクショニング要素のsectionタグやarticleタグ等はありません。その場合のアウトラインはどのようになっているのでしょうか。

今までのHTML4やXHTMLで書かれたページでは、sectionタグやarticleタグ等を使わなくてもアウトラインは作られます。これは、Hタグによって暗黙的にアウトラインが作られるからです。

http://gsnedders.html5.org/outliner/でアウトラインを表示させてみてください。sectionタグやarticleタグを使わなくてもアウトラインが作られているのがわかります。

私がsection要素を使わなかった本当の理由は、文書作成(ウェブページの作成)でいちいちsection要素を設定するのが面倒だったからです。

Hタグを有効に使えば自動的にアウトラインが形成されるのなら、特にsection要素を設定する必要はありません。従来通りにページを作成するだけです。

普通のホームページの場合はひとつのページにはひとつの話題(記事)だけで、複数の話題を書くことはありません。そこで、メインのarticle要素を設定するだけでページを作成することができます。

ブログの場合はひとつのページに複数の記事が表示されることがあり、複数のarticle要素が必要になります。

メインのarticle要素は、ひな形となるページ(テンプレート)に設定しておけば、ページの作成中に、これを意識する必要はありません。どうです、簡単でしょう。