XHTML1.0とHTML5のコーディングの違いを確認してみよう【MdN連載第9回目】

いままでの連載っでHTML5での新要素の説明やHTMLから使用方法が変更になった要素、ブロックレベル要素とインライン要素の変わりとなった「コンテンツ・モデル」や「アウトライン」などについてまとめてきましたが、ここから今まで行ったことをまとめて簡単なレイアウトをxhtmlとHTML5でのマークアップを比較しながら実際に作成してみたいと思います。

HTML5の基本の書き方

XHTML1.0とHTML5の基本のHTMLの違いを再確認してみましょう。
HTML5といっても基本の書き方が大きく変わるわけではありません。

極端にいうとDOCTYPE宣言だけHTML5の書き方にしてコンテンツのコードは既存のままでもHTML5になります。

今回は新要素などを適切に使用して「コンテンツ・モデル」や「アウトライン」を意識してマークアップしていきます。

HTML5のDOCTYPE宣言

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

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

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

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

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

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

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

そこで、JavaScriptを用いて新たに要素を作成します。

document.createElement(‘新しい要素’);

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

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

最後にHTML5用のリセットCSSを読み込みます。

今回は『html5doctor』のリセットCSSをダウンロードして読み込みます。

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

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

HTML5の最初の記述例

※既存のコードをそのまま使用する場合は「html5.js」や「html5reset.css」を使う必要はありません。

※reset.cssは必ず使用するわけではありません

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

今回は下記の簡単なレイアウトを元にXHTML1.0とHTML5でマークアップしてみようとおもいます。

まずはCSSレイアウトのためのdivタグなどは設定せずに純粋にHTMLのマークアップのみを行い、それぞれの違いを確認して、次回移行に新しいタグの説明とレイアウトの方を作成したいとおもいます。

今回作成するレイアウト


※クリックで拡大します

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

  • CSSレイアウト用のclassやidなどは一部つけていない状態です。
  • 画像のリンク、テキストのリンクなどソースが長くなるので一部つけていません。
  • 仮テキストはソースコードが長くなるので短くしました。

HTML5.0でのマークアップ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5でコーディングサンプル</title>
<!--現在設定していません
<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/header_rogo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /></h1>
<h2>ゼロからはじめるHTML5でのサイト制作</h2>
</hgroup>

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

<ul id="nav">
  <li><a href="#"><img src="images/nav_home.gif" width="159" height="32" alt="HOME" /></a></li>
  <li><a href="#"><img src="images/nav_news.gif" width="160" height="32" alt="NEWS" /></a></li>
  <li><a href="#"><img src="images/nav_product.gif" width="160" height="32" alt="PRODUCT" /></a></li>
  <li><a href="#"><img src="images/nav_contact.gif" width="160" height="32" alt="CONTACT" /></a></li>
  <li><a href="#"><img src="images/nav_company.gif" width="160" height="32" alt="COMPANY" /></a></li>
  <li><a href="#"><img src="images/nav_access.gif" width="161" height="32" alt="ACCESS" /></a></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/image_01.gif" width="142" height="142" alt="" />テキストテキストテキストテキストテキストテキスト </p>
</section>

<section class="topics">
<h3>イベントタイトル02テキスト</h3>
<p><img src="images/image_02.gif" width="142" height="142" 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>
<h2>サイトからのお知らせ</h2>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
</section>

<aside>
<ul id="bnrarea">
  <li><img src="images/bnr_01.gif" width="227" height="56" alt="" /></li>
  <li><img src="images/bnr_02.gif" width="227" height="56" alt="" /></li>
  <li><img src="images/bnr_03.gif" width="227" height="56" alt="" /></li>
</ul>
</aside>

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

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

HTML5.0でのマークアップのHTMLを見る

【訂正：03/22】副題をh2にするのをpのままにしておりましたので修正いたしました。

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/header_rogo.png" width="328" height="49" alt="HTML5でサイトをつくろう" /></h1>
<p>ゼロからはじめるHTML5でのサイト制作</p>
</div>

<ul id="subnav">
  <li><a href="#">サイトマップ</a></li>
  <li><a href="#">RSSフィード</a></li>
</ul>
<ul id="nav">
  <li><a href="#"><img src="images/nav_home.gif" width="159" height="32" alt="HOME" /></a></li>
  <li><a href="#"><img src="images/nav_news.gif" width="160" height="32" alt="NEWS" /></a></li>
  <li><a href="#"><img src="images/nav_product.gif" width="160" height="32" alt="PRODUCT" /></a></li>
  <li><a href="#"><img src="images/nav_contact.gif" width="160" height="32" alt="CONTACT" /></a></li>
  <li><a href="#"><img src="images/nav_company.gif" width="160" height="32" alt="COMPANY" /></a></li>
  <li><a href="#"><img src="images/nav_access.gif" width="161" height="32" alt="ACCESS" /></a></li>
</ul>
</div>
<!-- /header -->

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

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

<!-- news -->
<div id="news">
<h2>更新情報</h2>
<dl>
  <dt><span>[2012年01月01日] </span>　お知らせタイトル01テキスト</dt>
  <dd> テキストテキストテキストテキストテキストテキストテキスト </dd>
  <dt><span>[2012年01月01日] </span>　お知らせタイトル02テキスト</dt>
  <dd> テキストテキストテキストテキストテキストテキストテキスト </dd>
  <dt><span>[2012年01月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.gif" width="227" height="56" alt="" /></li>
  <li><img src="images/bnr_02.gif" width="227" height="56" alt="" /></li>
  <li><img src="images/bnr_03.gif" width="227" height="56" alt="" /></li>
</ul>
</div>
<!-- /sidebar -->

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

XHTML1.0でのマークアップのHTMLを見る

見ていただくとわかりますが大きな変化はあまりありません。
またHTML5の方がコードの量が多くなっているのもわかるかとおもいます。

これはより要素を明確にマークアップしているからであり、HTML5＝ソースが短く簡単になるとは一概に言えない状態になります。

次回以降パーツ毎のそれぞれの比較やアウトラインなどをまとめていきたいと思います。

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

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

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

Amazonへ

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

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

Amazonへ

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

この記事を書いた人

著者 : ハヤシユタカ

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

最近書いた記事

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

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

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

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

この記事に関連する記事