このページの本文へ

DESIGN 浜 俊太朗のHTML5マークアップ移行ガイド ― 第2回

XHTML1.0とHTML5の違いをスタバのページで紹介

2011年08月24日 10時01分更新

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷
連載インデックスへ

この連載が本になりました!

「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エンコーディングで予期しない結果になることがあるため、とされています。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング