|
HTML5＋CSS3 |
HTML5編
|
| Lesson 6 | HTML5の基本的な マークアップ |
|||
| 制作・文 | 羽田野 太巳（有限会社futomi） |
| HTML5は基本的にはHTML4やXHTML1.0と書き方において違いはない。ただし、HTML5ならではのマークアップ作法があるため、それを踏まえて解説していこう。 |
文書型宣言
旧来のHTMLでは、先頭にマークアップの種類やHTMLのバージョンなどを表 す文書型宣言を記述してきた。【1】はXHTML1.0の文書型宣言のひとつだが、これだけ多くの情報を詰め込んだ文書型宣言を、ブラウザはほとんど見ていない。
ブラウザはレンダリングモードの切り替えのためだけに文書型宣言を見ているに過ぎない。
HTML5では現実のブラウザの挙動に合わせて、標準モードでレンダリングされるように最小限の記述に簡略化した。
【2】のように、これだけでInternet Explorer 6といった古いブラウザですら標準モードでレンダリングする。これは、HTML5のマークアップである以上、すべてのブラウザは標準モードでレンダリングすることを示す。つまりHTML5において互換モードは存在しないのだ。
なおこの文書型宣言は、HTMLであれば大文字小文字は区別されない。しかし、XML互換にしたい場合は前述の通りにしなければいけないので注意してほしい。
【1】
【2】
文字エンコーディング
HTMLの文字エンコーディングをマークアップ上で指定する場合、旧来のHTMLではmeta要素を使ってきた【3】。
このmeta要素はContent-Typeを表しているのだが、ブラウザは実際にはcharsetの値しか見ていない。HTML5ではmeta要素にcharset属性が加えられ、無駄な記述を一切排除し、大幅に簡略化することになった【4】。もちろん、Internet Explorer 6でも問題なく文字エンコーディングを認識してくれる。
このcharset 属性を持つmeta 要素はHTMLファイルの先頭から512 バイト以内に記述しなければいけない。この規定はInternet Explorer 6などのブラウザの挙動を踏襲したものだ。
【3】
【4】
script要素とstyle要素の
type属性
旧来のHTMLでは、JavaScriptを組み込むscript要素とCSSを組み込むstyle要素にtype属性が必須だった【5】。しかし実際には、どのブラウザでもscript要素であればJavaScriptとして、style要素であればCSSとして処理してきた。
HTML5 ではブラウザの挙動に合わせて、script要素ではtext/javascript、style要素ではtext/cssとデフォルトタイプを規定した。結果、HTML5ではこれらの要素にtype属性を記述する必要がなくなった【6】。
さらに、外部CSSファイルを読み込むために使うlink要素にもtype属性が必須ではなくなった。HTML5仕様では、link要素のrel属性が "stylesheet" の場合、そのtype属性のデフォルト値は "text/css"だと規定されたからだ。HTML5 で外部CSSファイルを読み込みたい場合は【7】のようにマークアップすればよい。もちろん、Internet Explorer 6などの古いブラウザでも問題なくCSSが有効になる。
【5】
【6】
【7】
言語指定
HTMLにはコンテンツが何語で書かれているかをマークアップすることができる。旧来のHTMLであれば【8】のように マークアップしてきたことだろう。
HTML5では、meta要素を使って言語を指定するのは文法エラーではないものの非推奨とされた。HTML5で言語を指定する場合は、html要素のlang属性を使うことが推奨されている【9】。
以上を踏まえて、HTML5 の典型的なHTMLの雛形をご覧いただこう【10】。
旧来のHTMLと比べて、かなりシンプルになったことがわかるだろう。
【8】
【9】
【10】
新要素のスタイリング
HTMLの雛形ができたら、あとはbody要素の中にいつも通りのマークアップを行い、CSSでスタイリングを行う。
ところが、HTML5で新たに導入された要素に関しては、期待通りのスタイリングにならない。問題は、section 要素やarticle要素など、本来ならブロックとしてレンダリングされる要素だ。
HTML5 の新要素を理解してくれないブラウザの場合、通常、未知の要素はインラインとしてレンダリングされる。そのため、HTML5のブロックとしてレンダリングしたい新要素に関しては、明示的にCSSで定義する必要がある。
自サイトで使うHTML5 の新要素のうち、ブロックとしてレンダリングしたい要素に対して明示的にdisplayプロパティにblockを指定しておこう【11】。
【11】
Internet Explorer対策
Internet Explorer 8以下では、未知の要素に遭遇すると、期待通りの階層で要素を解釈できない。少し専門的な用語で説明すると、期待通りのDOMツリーが構成されず、いくらCSSでスタイルを定義してもうまく適用されない。しかし、これには解決方法がある。Internet Explorer 8以下では、JavaScriptを通して生成された未知の要素は認識してくれる。つまり、document.createElement() メソッドを使ってHTML5の新要素を生成すればいい【12】。このようにスクリプト内で生成された要素のオブジェクトは特に使い道はない。ただ単に作ればよいのだ。
ここでは、インラインとしてレンダリングしたい要素についても対象になっている点に注意してほしい。サイトで利用する新要素はすべて対象にするのだ。
【12】
html5shiv
ここまでで、HTML5でマークアップされたページをスタイリングできるようになった。しかし、HTML5 新要素向けに JavaScriptを用意するのは面倒だ。それをまとめて解決してくれるJavaScriptライブラリがあるので、利用すると便利だろう【13】。
特にダウンロードも必要ない。ただ単に【14】のコードをhead要素の中に記述しておくだけだ。ただし、CSSを読み込む前に記述しておかなければいけないので注意してほしい。
【13】
【14】
マークアップ作法
HTML5はXHTML記法も許しているため、これまで培ってきたマークアップ作法をそのまま利用することができる。もちろんHTML4記法でもかまわない。
たとえばbr 要素、hr要素、meta要素、input 要素などの空要素であれば<br>、<br/>、<br />のいずれでもかまわない。
属性値の記法も<html lang=ja>、<html lang="ja">、<html lang='ja'>のいずれでもかまわない。さらに状況によっては終了タグも不要だ【15】。
極端ではあるが、html要素、head 要素、body要素の終了タグを入れなくてもHTML5準拠なのだ【16】。
もちろん実際にはこのような記法はお勧めできない。ここでお伝えしたいのは、HTML5仕様はこれまでHTML4 や XHTML で広く使われてきた記法をすべて認めているという点だ。みなさんが培ってきた作法はHTML5でも問題なく通用する。
【15】
【16】
文法チェック
HTML5のマークアップでページを作成したら、その文法が正しく使われているかをチェックしたいところだ。特にHTML5で新たに導入された要素や属性の使い方には十分に注意を払いたい。
HTML5の文法チェックには、W3Cが提供している文法チェッカーがよいだろう【17】。HTML4やXHTML1.0の文法チェッカーとしても有名だが、このW3C Markup Validation Service（http://validator.w3.org/） は実験的ながらもHTML5の文法チェックに対応している。
【17】Address欄にURLを入力してCheckボタンを押す
【17】緑色の結果が表示されれば文法が正しいことを意味する
【17】一方、もし文法エラーがあれば、赤色で表示され、結果画面の下方にその理由が表示される
