はじめに
この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。
過去の連載も読む
HTML5マークアップの基本
HTML5で新たに導入された要素を解説する前に、HTML5のタグの書き方について解説します。まずは、旧来から使われてきたHTML4.01のマークアップをご覧ください。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ページ・タイトル</title> <style type="text/css">/* CSS */</style> <script type="text/javascript">/* JavaScriptコード */</script> </head> <body> ... </body> </html>
1行目には、どの種類のHTMLで書かれたのかを宣言するための文書型宣言が書かれています。とても長い記述なので、恐らく一字一句覚えている方は少ないでしょう。
head要素の中には、このHTMLページに関連する情報が書かれています。まずmeta要素を使って文字エンコーディングが指定されています。これは、このHTMLページがどんな文字コードで作られているのかを表しています。そして、style要素にはCSSが、script要素にはJavaScriptが記述されますが、これらの要素にはtype属性がマークアップされています。
以上の点を踏まえて、HTML5のマークアップをご覧ください。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ページ・タイトル</title> <style>/* CSS */</style> <script>/* JavaScriptコード */</script> </head> <body> ... </body> </html>
ご覧の通り、非常にシンプルになりました。これだけシンプルにしてしまうと、HTML5をサポートしたブラウザでしか、正しくページが表現されないのではないかと心配してしまうことでしょう。ところが、Internet Explorer 6でも、期待通りに動作します。
実は、これらの変更点は、旧来のブラウザでも動作するよう考慮して考え出されたものなのです。では、それぞれの変更点について詳しく見ていきましょう。
文書型宣言
HTML4.01やXHTML1.0の文書型宣言は、非常に長い記述を必要としました。ところが、ブラウザはすべての記述を判定しているわけではありません。また、XHTML1.0の文書型宣言を記述したからといって、そのページがXMLで書かれたものとして処理されるわけではありません。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
結局のところ、この長い記述にほとんど意味がなかったのです。実際には、本来の用途とは別に、レンダリング・モードを振り分けるための識別文字として使われていたに過ぎませんでした。
レンダリング・モードとは、HTMLページをどのように表示するのかを表します。このレンダリング・モードには、標準モードと互換モードがあります。レンダリング・モードが違うと、同じマークアップ、同じCSSでも、見た目が違ってきます。現在では標準モードとなるよう、文書型宣言を記述することが多いと言えます。
HTML5の文書型宣言は、どのブラウザでも標準モードでレンダリングされることを念頭に置いて考え出されています。
<!DOCTYPE html>
これによって、Internet Explorer 6ですら標準モードでページをレンダリングすることになります。
文字エンコーディング
旧来のHTMLでは、meta要素に文字エンコーディングを指定しましたが、実際にはContent-Typeを指定する方式でした。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
しかし、HTML5で大幅に簡素化されました。HTML5では、meta要素に新たにcharset属性が規定されました。この属性の値に、文字エンコーディングを表す文字列を指定します。
<meta charset="utf-8">
これも、旧来のブラウザで文字エンコーディング指定を問題なく認識します。
CSSとスクリプトのタイプ
旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。
<style type="text/css">/* CSS */</style> <script type="text/javascript">/* JavaScriptコード */</script>
ほとんどのサイトでは、スタイルであればCSS、スクリプトであればJavaScriptであることは自明です。そのため、この場合はtype属性を省略できます。
<style>/* CSS */</style> <script>/* JavaScriptコード */</script>
もちろん、どのブラウザでも問題なく機能します。
