Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

HTML4から変化したHTML5のマークアップ
ここが違う!サンプルで見るHTML5(2)

第2回 文書構造とセマンティクス

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/12/02 14:00

 連載第2回目では、HTML5で新たに導入された要素を解説する前に、HTML5のタグの書き方について解説します。まずは、旧来から使われてきたHTML4.01のマークアップをご覧ください。

目次

はじめに

 この連載では、今日のウェブ業界の流行語となっている「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

過去の連載も読む

HTML5マークアップの基本

 HTML5で新たに導入された要素を解説する前に、HTML5のタグの書き方について解説します。まずは、旧来から使われてきたHTML4.01のマークアップをご覧ください。

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のマークアップをご覧ください。

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で書かれたものとして処理されるわけではありません。

XHTML1.0 TransitionalのDOCTYPE宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 結局のところ、この長い記述にほとんど意味がなかったのです。実際には、本来の用途とは別に、レンダリング・モードを振り分けるための識別文字として使われていたに過ぎませんでした。

 レンダリング・モードとは、HTMLページをどのように表示するのかを表します。このレンダリング・モードには、標準モードと互換モードがあります。レンダリング・モードが違うと、同じマークアップ、同じCSSでも、見た目が違ってきます。現在では標準モードとなるよう、文書型宣言を記述することが多いと言えます。

 HTML5の文書型宣言は、どのブラウザでも標準モードでレンダリングされることを念頭に置いて考え出されています。

HTML5のDOCTYPE宣言
<!DOCTYPE html>

 これによって、Internet Explorer 6ですら標準モードでページをレンダリングすることになります。

文字エンコーディング

 旧来のHTMLでは、meta要素に文字エンコーディングを指定しましたが、実際にはContent-Typeを指定する方式でした。

HTML4.01の文字エンコーディング指定
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 しかし、HTML5で大幅に簡素化されました。HTML5では、meta要素に新たにcharset属性が規定されました。この属性の値に、文字エンコーディングを表す文字列を指定します。

HTML5の文字エンコーディング指定
<meta charset="utf-8">

 これも、旧来のブラウザで文字エンコーディング指定を問題なく認識します。

CSSとスクリプトのタイプ

 旧来のHTMLでは、style要素とscript要素には、type属性を指定する必要がありました。

HTML4.01のCSSとスクリプトのマークアップ
<style type="text/css">/* CSS */</style>
<script type="text/javascript">/* JavaScriptコード */</script>

 ほとんどのサイトでは、スタイルであればCSS、スクリプトであればJavaScriptであることは自明です。そのため、この場合はtype属性を省略できます

HTML5のCSSとスクリプトのマークアップ
<style>/* CSS */</style>
<script>/* JavaScriptコード */</script>

 もちろん、どのブラウザでも問題なく機能します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 羽田野 太巳(ハタノ フトミ)

    有限会社futomi 代表取締役 1971年岐阜県生まれ。 ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。 オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。 20...

バックナンバー

連載:ここが違う!サンプルで見るHTML5

おすすめ記事

All contents copyright © 2006-2016 Shoeisha Co., Ltd. All rights reserved. ver.1.5