HTML5でWebページをマークアップするための基礎知識：HTML5“とか”アプリ開発入門（2）（1/2 ページ）
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします
5からHTMLの“文法”が変わるって知ってた？
連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして本連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。
HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。
ただ、HTML5における“文法の変化”は、ほかのプログラミング言語における文法変更とは少し意味が異なります。なぜなら以前のHTMLは、「仕様通りに実装していたWebブラウザがほとんどない」という特殊な状況だったからです。
いままでが仕様通りではなかった
HTMLはもともと、「SGML」（Standard Generalized Markup Language）というメタ言語によって文法が規定されていました。しかしSGMLは文法が非常に複雑で、構文解析を行うプログラムの開発も容易ではなかったため、Webブラウザの多くはSGMLパーサとしては動作しません。そのため、HTMLの仕様上は「SGMLの文法に従うこと」とされてはいても、実際に「仕様通りに動作する実装（Webブラウザ）がほとんどない」という状態でした。
つまり「仕様と実装が乖離（かいり）している」という状態だったわけです。このような「仕様があって、なきがごとし」という状況下では、Webブラウザ間の相互運用性を確保するのは各ベンダの開発努力によるところが大きく、おのずと限界があります。
仕様の方から実装に歩み寄る
前回の記事でも申し上げた通り、HTML5ではWebブラウザ間の互換性を高めることも大きな目標の1つです。互換性を確保するには、仕様と実装の乖離を解消しなくてはなりません。そのためにHTML5では、既存の実装に近い形でのHTML文法を新たに定義し直すことで、「仕様の方から実装に歩み寄る」ことになりました。
構文解析のアルゴリズムも詳細に記述されているため、Webブラウザベンダは仕様に従った実装を行うことに集中できます。最新のFirefox（バージョン4以降はデフォルト）やWebKit（ナイトリービルド）では、早速HTML5仕様に準拠したパーサを搭載していますし、IE（Internet Explorer）やOperaも相互運用性のある実装を提供しようと日々開発努力を続けています。
HTML5ではマークアップする前の指定も変わった
では、HTML5で新しくなった文法に従い、マークアップを行う方法について見ていきましょう。
コンテントタイプ
まず、HTML5で記述したファイルの拡張子やコンテントタイプに変化はありません。つまり、拡張子は「.html」や「.htm」を、コンテントタイプは「text/html」を用います。
DOCTYPE宣言
HTML5によるマークアップに必須のもの、それは以下のようなDOCTYPE宣言です。大文字・小文字は区別されません。ファイルの先頭にこの宣言があるかどうかで、WebブラウザはパーサやレンダリングモードをHTML5に対応したものに切り替えます。
<!DOCTYPE html>
またツールによっては、上のようなDOCTYPE宣言をうまく扱えないものもあります。そうしたツール向けに、以下のようなシステム識別子を持つDOCTYPE宣言も許容されています（大文字／小文字は区別されません。また、ダブルクオートの代わりにシングルクオートを使用することもできます）。
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
文字エンコーディングの指定
文字エンコーディングの指定方法も新しいものが使用できます。いままでは、HTMLファイルの文字エンコーディングを指定するには、以下のような＜meta＞要素を使用していたかと思います。
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5では、＜meta＞要素に追加されたcharset属性を用いて文字エンコーディングを指定できます。
<meta charset="UTF-8">
これらの方法はどちらも有効ですので、前者の方法（content属性による指定）を使用し続けることも可能です。しかし、これらの方法を同時に用いることはできません。以前どこかのWebサイトで、以下のようなマークアップを見たことがありますが、これは間違いですので、注意してください。
<!-- charset属性による指定と、http-equivによる指定を混在させている --> <meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5からは、ファイルの文字エンコーディングにUTF-8を使用することが推奨されています。
次ページでは、 HTML5の文法で押さえておきたい3つのポイントや、HTML5の文法に従ってマークアップできているかを確認するためのツールを紹介します。
Copyright © ITmedia, Inc. All Rights Reserved.
注目のテーマ
ITmediaはアイティメディア株式会社の登録商標です。