このページの本文へ

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

ここが変わった!HTML5マークアップ入門

2011年08月01日 13時00分更新

浜 俊太朗/ライブドア

  • この記事をはてなブックマークに追加
本文印刷

ローソン、無印良品、テレビ朝日など、国内でもHTML5で企業サイトを制作する事例が増えてきました。今すぐではないにせよ、「次のリニューアルはHTML5で制作したい」と考えるWeb制作者も少なくないでしょう。本連載では、「XHTML 1.0/HTML 4.01からの移行」をテーマに、HTML5マークアップの基本から実務で使用するポイントまで、ライブドアのマークアップエンジニア 浜 俊太朗さんが解説します。(編集部)

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

「HTML5タグの誤用で恥をかいた」「分厚い仕様書は読み切れない」コーダー&デザイナーのためのコーディングガイド。最終草案に対応したほか、商用サイトを意識したコーディング例を新たに書き下ろし。HTML5マークアップへ移行するために必要な知識を効率よく学べる1冊です。ネットで話題の「HTML5カルタ」付き!

HTML5マークアップ 現場で使える最短攻略ガイド

定価:2,808円 (本体2,600円)/形態:B5変 (240ページ)
ISBN:978-4-04-866070-9

 HTML5は、以前からWeb技術に敏感な人たちの間では注目されていましたが、最近になって書籍が相次いで発売されたり、頻繁にセミナーが開かれたりと、かなり一般的な話題になってきました。今では技術記事やブログでHTML5の名前を見ない日は無い、といっても過言ではありません。

 しかし、実務で使ったことのある方はまだまだ少ないのではないでしょうか。「HTML5マークアップ移行ガイド」の第1回は、コーダーの立場からHTML5を採用するメリット・デメリット、採用する際の下準備について解説します。

HTMLなのにプログラム?

 読者のみなさんの中には、これまでにもHTML5関連の情報を読んだことがある方も多いでしょう。それらの情報の中には、従来のHTMLのイメージからはかけ離れた“プログラム的”な内容もあったのではないでしょうか。HTML5とは一体何なのでしょうか?

 実は、一般的に「HTML5」と総称されている技術は、大きく「広義のHTML5」と「狭義のHTML5」に分類できます。

 広義のHTML5とは主にAPI(Application Program Interface)で、バックグラウンドでJavaScriptの処理を実行できる「Web Workers」や、Webアプリケーションからローカルのファイルを読み取る「File API」、グラフィックを扱える「Canvas」「SVG」などがあります。

 さらには、仕様としてはHTML5から分離されていますが、ブラウザーにデータを保存する「Web Storage」や、双方向通信用の新しいプロトコルとAPIである「WebSocket」、位置情報を取得できる「Geolocation API」なども含めることがあります。

 一方、狭義のHTML5とはいわゆるマークアップ言語としてのHTMLであり、分かりやすく言うとタグ関連の仕様のことです。この連載では、狭義のHTML5、つまりHTML5のタグ/要素について解説します。以降、「HTML5」と書かれている場合は、狭義のHTML5であると思ってください。

 HTML5には、HTML4.01やXHTML1.0にあった要素に新しい要素が追加されています。また、逆に廃止となる要素や、表記は同じなのに意味が変わる要素も存在します。単に新しい要素を覚えるだけでなく、変更点も合わせて学ぶと役に立つでしょう。

XHTML5とは

 「XHTML5」という単語を見かけたことがある方もいるかもしれません。XHTML5とはHTML5と別の仕様ではなく、形式の違いと言えるものです。XMLのルールに沿ってソースコードを記述して、MIMEタイプを「application/xhtml+xml」か「application/xml」とすることで、ブラウザー側ではXHTML5として扱われます。

 ただし、XHTML1.0などでもそうであったように、古いInternet Explorerでは「application/xhtml+xml」や「application/xml」のHTMLを表示できません。そのため、通常のWebサイト制作では、XHTML形式ではなくHTML形式で制作することになるでしょう。

 この連載では、単に「HTML5」と表記した場合は、XHTML5ではなくHTML5を指すものとします。

Web Professionalトップページバナー

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

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

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

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

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

ランキング