HTML5は難しくない?　XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】

先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。

グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5＝難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。

構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。

xhtmlではブロックレベル要素とインライン要素という分類に分けていましたが、HTML5ではそれは無くなり、代わりに『コンテンツ・モデル』という、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。

このブログもHTML5で作成していますがXHTML→HTML5の移行は数個の新規タグと考え方がわかればすぐに移行できるとおもいます。

そこでこれまで当ブログでまとめてきたHTML5の基本の記事からXHTMLからHTML5への移行の際のタグの違いをまとめて簡単な構成を作成してみました。

ただし正式な勧告がまだな状態のHTML5なので現段階（2011.09.01）での考えたマークアップなので、書き方が複数案あってどちらにしようか迷う部分もありました。

おかしな部分や他にもっとよい書き方がありましたらアドバイスお願いします。このブログで皆さんと色々情報交換ができればうれしいです。

HTML5の基本の書き方

XHTML1.0とHTML5の基本のHTMLの違いを覚えましょう。
この宣言文だけ変えて中のコードはいままでどおりでもHTML5のサイトになります。

HTML5のDOCTYPE宣言

HTML5のDOCTYPE宣言

XHTML1.0と比べて、HTML5では非常にシンプルになっていて、これで標準モードでレンダリングされHTML5に準拠したページになります。

html要素と文字のエンコーディング

html要素と文字のエンコーディング

XHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています。

続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが短くなりました。

HTML5がIEなど対応していないブラウザへ新要素への対応

IE6からIE8はHTML5の新要素に対応していないのでスタイルシートを適応することができないようです。

そこで、JavaScriptを用いて新たに要素を作成します。
document.createElement(‘新しい要素’);

ただ、すべての要素分生成するのは大変なので、Remy Sharp氏が公開した『html5.js』というライブラリをインポートすることで解決することができるようです。

HTML5に対応したリセットCSSの導入

HTML5に対応したリセットCSSの導入

最後にHTML5用のリセットCSSを読み込みます。こちらもいろいろリセットCSSが公開されていいますが今回はhtml5doctorのリセットCSSがよく使われているようなので、html5doctorのリセットCSSをダウンロードして読み込みます。

上記のリセットは利用しているサイトも多いようなので、このブログでも使用させていただきました。

CSSの中には今までどうり各要素を一度リセットさせる内容と、新要素をdisplay:block;でblock要素に変えていたり、新たに加わったものへの対応が書かれていました。

もっとよいリセットCSSがありましたら教えてください。

HTML5の基本の書き方のまとめ

HTML5の最初の記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
<link rel="stylesheet" type="text/css" href="css/html5reset.css"  />
<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>

XHTML1.0の最初の記述例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="reset.css"  />
<title>サイトのタイトル</title>
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>

※reset.cssは任意

既存のコードをHTML5にする場合の記述例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトのタイトル</title>
</head>
<body>

//ここにサイトに表示するコンテンツ内容を記述

</body>
</html>

※既存のコードをそのまま使用する場合は「html5.js」や「html5reset.css」を使う必要はありません。
このように上の4行を変えるだけで一応？HTML5で宣言されたコードになります。

より詳しくご覧になりたい方は過去のエントリーにもまとめてあります。

この宣言文だけ変えてHTML5ですといえないこともない・・。しかしこれはちょっと楽しすぎだろうということでもうちょっと新しいタグを使って簡単なレイアウトのコーディングをXHTML1.0とHTML5で作成して比較してみようとおもいます。

簡単なレイアウトでXHTML1.0とHTML5のタグの違いを比較してみる

今回は下記の簡単なレイアウトを元にXHTML1.0とHTML5でマークアップしてみようとおもいます。CSSでのレイアウトまでは行わずに純粋にHTMLのマークアップ行い、次回のエントリーで新しいタグの説明とレイアウトの方を作成したいとおもいます。

画面構成
※クリックで拡大してみれます

ここから下に今回作成するXHTML1.0とHTML5でのマークアップですがレイアウト用のidやclassが入るとソースが長くなって読みにくくなるのでそちらはまだ設定していません。

※CSSレイアウト用のclassやidなどは一部つけていない状態です。
※画像のリンク、テキストのリンクなどソースが長くなるので一部つけていません。
※仮テキストはソースコードが長くなるので短くしました。
※HTML5では画像のaltタグの仕様が変わっておりますが今回は省略しております。

XHTML1.0でのソースコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XHTMLでコーディングサンプル</title>
</head>

<body>

<!-- header -->
<div id="header">

<div id="logogroup">
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<p>HTML5とCSS３の勉強のためのブログ</p>
</div>

<ul id="subnav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">RSSフィード</a></li>
</ul>

<ul id="nav">
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー01" /></li>
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー02" /></li>
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー03" /></li>
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー04" /></li>
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー05" /></li>
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー06" /></li>
</ul>

</div>
<!-- /header -->

<!-- contents -->
<div id="contents">

<!-- event -->
<div id="event">
<h2>イベント情報</h2>
<h3>イベントタイトル01</h3>
<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
<h3>イベントタイトル02</h3>
<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /event -->

<!-- news -->
<div id="news">
<h2>更新情報</h2>
<dl>
<dt><span>[2011年09月01日]</span>　お知らせタイトル01</dt>
<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
<dt><span>[2011年09月01日]</span>　お知らせタイトル02</dt>
<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
<dt><span>[2011年09月01日]</span>　お知らせタイトル03</dt>
<dd>テキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
</div>
<!-- /news -->

</div>
<!-- /contents -->

<!-- sidebar -->
<div id="sidebar">
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>

<ul id="bnrarea">
<li><img src="images/bnr_01.jpg" width="228" height="57" alt="" /></li>
<li><img src="images/bnr_02.jpg" width="228" height="57" alt="" /></li>
<li><img src="images/bnr_03.jpg" width="228" height="57" alt="" /></li>
</ul>
</div>
<!-- /sidebar -->

<!-- footer -->
<div id="footer">
<address>サイトへのお問い合わせ：<a href="mailto:sample@html5-memo.com">sample@html5-memo.com</a></address>
<p class="copyright">COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</p>
</div>
<!-- /footer -->
</body>
</html>

上のソースが読みにくい場合は下記のサンプルページのソースをご覧ください。
XHTML1.0でマークアップしたサンプルを見る

HTML5でのソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5でコーディングサンプル</title>
<!--　HTMLの確認のためコメントアウトしてあります。
<link rel="stylesheet" type="text/css" href="styles/html5reset.css"  />
-->

<!--&#91;if lt IE 9&#93;>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!&#91;endif&#93;-->

</head>

<body>
<!-- header -->
<header>

<hgroup>
<h1><img src="images/logo_html5.jpg" width="366" height="38" alt="HTML5でサイトをつくろう" /></h1>
<h2>HTML5とCSS３の勉強のためのブログ</h2>
</hgroup>

<nav>
<ul id="subnav">
<li><a href="#">サイトマップ</a></li>
<li><a href="#">RSSフィード</a></li>
</ul>

<ul id="nav">
<li><img src="images/nav_01.jpg" width="137" height="30" alt="メニュー01" /></li>
<li><img src="images/nav_02.jpg" width="137" height="30" alt="メニュー02" /></li>
<li><img src="images/nav_03.jpg" width="137" height="30" alt="メニュー03" /></li>
<li><img src="images/nav_04.jpg" width="137" height="30" alt="メニュー04" /></li>
<li><img src="images/nav_05.jpg" width="137" height="30" alt="メニュー05" /></li>
<li><img src="images/nav_06.jpg" width="137" height="30" alt="メニュー06" /></li>
</ul>
</nav>

</header>
<!-- /header -->

<!-- contents -->
<div id="contents">

<!-- event -->
<section id="event">

<h2>イベント情報</h2>

<section class="topics">
<h3>イベントタイトル01</h3>
<p><img src="images/pho_event01.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<section class="topics">
<h3>イベントタイトル02</h3>
<p><img src="images/pho_event02.jpg" width="140" height="140" alt="" />テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

</section>
<!-- /event -->

<!-- news -->
<section id="news">
<h2>更新情報</h2>

<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル01</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル02</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

<article>
<header>
<time datetime="2011-09-01">2011年09月01日</time>
<h3>お知らせタイトル03</h3>
</header>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</article>

</section>
<!-- /news -->

</div>
<!-- /contents -->

<!-- sidebar -->
<div id="sidebar">

<section>
<h1>サイトからのお知らせ</h1>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<aside>
<ul>
<li><img src="images/bnr_01.jpg" width="232" height="61" alt="" /></li>
<li><img src="images/bnr_02.jpg" width="232" height="61" alt="" /></li>
<li><img src="images/bnr_03.jpg" width="232" height="61" alt="" /></li>
</ul>
</aside>

</div>
<!-- /sidebar -->

<!-- footer -->
<footer>
<address>サイトへのお問い合わせ：<a href="mailto:sample@html5-memo.com">sample@html5-memo.com</a></address>
<p class="copyright"><small>COPYRIGHT &copy; HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
</footer>
<!-- /footer -->

</body>
</html>

上のソースが読みにくい場合は下記のサンプルページのソースをご覧ください。
HTML5でマークアップしたサンプルを見る

【修正情報】
2011.09.06　お問い合わせメールをsmallタグからaddressタグに、コピーライトをpタグからsmallタグに変更いたしました。

次回はxhtmlとHTML5でのタグの違いの説明やHTML5でこのページのアウトラインについてなどまとめて、レイアウトを完成させてみようとおもいます。

【初級編：HTML5のマークアップ：全4回】

今回の記事で参考にした本

徹底解説HTML5マークアップガイドブック

HTML5の新要素や基本的なマークアップ方法について丁寧に解説が書かれています。
HTML5でサイトを構築する際やこのBlogの記事を書く時の参考にしています。他にもビジュアル系API編もcanvas要素の勉強用に持っています。

Amazonへ

徹底解説HTML5マークアップガイドブック
最終草案対応版―全要素・全属性完全収録

「最終草案対応版―全要素・全属性完全収録」としてverが変わりました。すでに同じ本を持っている場合は追加で買わなくても大丈夫だとおもいましたがなにがなくなって追加されたか興味がありましたので両方買って見ました。

Amazonへ

ブログを作成する際に参考にした本はこちらにまとめてあります。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

まずはここから始めよう！作業効率を早めるPhotoshopとIllustratorのショートカットまとめ（ファイル操作・コピペ・ズーム関連）

Instagram（インスタグラム）の基本的な運用やマーケティング、活用事例の勉強に参考にしたサイトや記事まとめました。

アプリ風インターフェイスのフォトギャラリーをCSS3で作成する【jQuery連載17】

マウスホイールに動きで横にスクロールの横長ページを作成する【jQuery連載16】

この記事に関連する記事