|
|---|
この連載が本になりました！
「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー＆デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!
HTML5マークアップ 現場で使える最短攻略ガイド
定価：2,808円 （本体2,600円）／形態：B5変 (240ページ)
ISBN：978-4-04-866070-9
HTML5と従来のHTML4.01やXHTML1.0との違いは、既存のサイトをHTML5化してみると理解しやすいでしょう。今回は、実在するWebサイトをHTML5に（勝手に）リニューアルしながら、HTML 4.01やXHTML 1.0との違いを解説します。ソースコードだけをリニューアルすることは実務ではあまりないと思いますが、実在するサイトを例にすることでHTML5の具体的な使い方がイメージできるはずです。
今回は、スターバックスコーヒー ジャパンのWebサイトにある「コーヒーのお話」というページをHTML5に書き換えてみましょう。
- コーヒーのお話 | スターバックス コーヒー ジャパン
- http://www.starbucks.co.jp/story/coffee.html
オリジナルのページはXHTML 1.0でマークアップされています。なお、解説の都合上、複数のCSSを1つにまとめたりJavaScriptを省略したりと、ソースコードを一部変更しています。
XHTML1.0からHTML5に移行する第一歩
まずはいわゆるお約束的な、DOCTYPEやhead要素周辺部分をHTML5へ対応していきます。
文書型宣言
HTMLの冒頭に記述する文書型宣言は以下のようになります。
Before[XHTML 1.0]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
After[HTML5]
<!DOCTYPE html>
一見して分かるとおり、HTML5ではかなりシンプルなコードになりました。HTML5では「DOCTYPE」の文字は小文字でも問題ありませんが、XHTML5（関連記事）の場合は大文字でなければならないためか、現状では大文字を使っているサイトが多いようです。
文書型宣言がここまでシンプルになってしまうことに、疑問を感じる方もいるかもしれません。これまでのHTMLはSGML（Standard Generalized Markup Language）の応用言語だったのでDTD（Document Type Definition：文書型定義）を参照する必要があり、そのために全体の記述が長くなっていました。
一方、HTML5での文書型宣言は、ブラウザーを標準モードにするために記述します。つまり、これまでのHTMLとHTML5では、同じ文書型宣言でも目的が異なっているのです。
html要素
html要素もシンプルになりました。
Before[XHTML 1.0]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr" lang="ja">
After[HTML5]
<html lang="ja" dir="ltr">
ここでは元のソースコードにdir属性があったので残していますが、必須ではありません。
文字エンコーディングの指定
文字エンコーディングの指定もシンプルになっています。
Before[XHTML 1.0]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
After[HTML5]
<meta charset="UTF-8" />
HTML4.01やXHTML1.0は1つのmeta要素で文字エンコーディングとMIMEタイプを同時に指定していましたが、HTML5では文字エンコーディングのみを指定できます。この表記は多くのブラウザーですでに互換性があります。文字エンコーディングの指定はファイルの先頭から1024バイト以内に記述する必要があるので、通常はソースコードのできるだけ上の方に記述しましょう。
なお、HTML4.01やXHTML1.0の書き方も引き続き使用できますが、あえて使用する理由はありません。また、1つのファイル内で両方は記述できません。文字エンコーディングの指定は1つのみです。
誤った例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="UTF-8" />
<title>コーヒーのお話 | スターバックス コーヒー ジャパン</title>
正しい例
<head>
<meta charset="UTF-8" />
<title>コーヒーのお話 | スターバックス コーヒー ジャパン</title>
ポイント
HTML5の文字エンコーディングはUTF-8が強く推奨されており、EUC-JPやShift_JISは非推奨となっています。その理由は、フォームやURLエンコーディングで予期しない結果になることがあるため、とされています。
