HTML5でマークアップしたウェブページを作成してみましょう。
DOCTYPE宣言と文字コードの記述ルールを確認してから、
ごく簡単なHTML5のサンプルページを作成してみたいと思います。
HTML 4では、DOCTYPE宣言は以下のように記述していました。
（HTML 4.01 Transitionalの場合）
HTML5では、以下のようなシンプルな記述となります。大文字と小文字は区別されません。
HTML5におけるDOCTYPE宣言は、あまり意味を持たないとされていますが、
DOCTYPE宣言が無いとブラウザのレンダリングモードが、互換モード（Quirks mode）となってしまいます。
ブラウザに標準モード（Standards mode）で解釈させたい場合には、DOCTYPE宣言を記述する必要があります。
IE6も含めて、主要なブラウザでは文書の先頭に
<!DOCTYPE html>
と記述することで標準モードとなります。
尚、ブラウザのレンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、
DOCTYPE宣言の記述のしかたによって標準モードと互換モードが切り替わります。
標準モードは、CSSなどの仕様通りに正しく表示するモードで、
互換モードは、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、あえて標準仕様とは異なる解釈で表示するモードのことです。
互換モードでウェブページが表示される場合、
CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。
<meta>要素で文字コードを指定する場合、HTML 4では以下のように記述していました。
HTML5でも上の記述方法のままで問題ありませんが、charset属性を使用すれば以下のように短くすることができます。
では、HTML5で、ごくシンプルなウェブページを作成してみましょう。
DOCTYPE宣言と文字コードの指定以外、HTML 4.01での記述形式と同じですが、
W3CのマークアップバリデーションでもHTML5と解釈されています。
W3Cのマークアップバリデーションの結果
乱暴に言ってしまえば、ウェブページをHTML5にするには、
DOCTYPE宣言の記述を
<!DOCTYPE html>
と書き換えさえすれば良いのです。
次に、HTML5から新しく追加された要素を使ってウェブページを作成してみましょう。
以下のサンプルでは、
ウェブページのヘッダ情報を示す<header>、
コピーライトなどのフッタ情報を示す<footer>、
記事であることを示す<article>、
ナビゲーションであることを示す<nav>
を使用しています。
<!– ヘッダ –>
<header>
<h1>HTMLリファレンス</h1>
<nav>
<ul>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/”>トップページ</a></li>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/”>HTMLリファレンス</a></li>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/css/”>CSSリファレンス</a></li>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/sitemap/”>サイトマップ</a></li>
</ul>
</nav>
</header>
<!– メインコンテンツ –>
<article>
<h2>HTML5とは？</h2>
<p>HTML5とは、HTMLのバージョン5、改訂第5版です…</p>
<h3>HTML5の始まりと現状</h3>
<p>HTMLの開発は、1999年12月24日にHTML 4.01が勧告された時点で中断されていました…</p>
</article>
<!– フッタ –>
<footer>
Copyright 2015
</footer>
</body>
</html>
もう一つ、HTML5でブログページのサンプルを作成してみましょう。
以下のサンプルでは、<section>を使用して、意味のまとまりごとに記事群をグループ化しています。
<!– ヘッダ –>
<header>
<h1><a href=”https://htmqcom1.wpengine.com/tech/blog/”>○○のブログ</a></h1>
</header>
<!– メインコンテンツ –>
<section>
<h2>はじめに</h2>
<p>初めての方はお読みください。</p>
<article>
<h3><a href= “https://htmqcom1.wpengine.com/tech/html/entry1”>ご挨拶</a></h3>
<p>いらっしゃいませ。○○と申します…</p>
</article>
<article>
<h3><a href= “https://htmqcom1.wpengine.com/tech/html/entry21”>お約束</a></h3>
<p>このブログをご覧になる際には…</p>
</article>
</section>
<section>
<h2>最近の投稿</h2>
<p>最近の投稿記事2件を表示します。</p>
<article>
<h3><a href= “https://htmqcom1.wpengine.com/tech/html/entry99”>買い物</a></h3>
<p>今日は買い物に出掛けた…</p>
</article>
<article>
<h3><a href= “https://htmqcom1.wpengine.com/tech/html/entry98”>読書</a></h3>
<p>今日は読書をして過ごした…</p>
</article>
<nav>
<a href=”https://htmqcom1.wpengine.com/tech/html/?p=2″>次のページへ</a>
</nav>
</section>
<!–ナビゲーション –>
<nav>
<h2>カテゴリ</h2>
<ul>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/category1″>はじめに</a></li>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/category2″>日常</a></li>
<li><a href=”https://htmqcom1.wpengine.com/tech/html/category3″>仕事</a></li>
</ul>
</nav>
<!– フッタ –>
<footer>
<p>Copyright 2015</p>
</footer>
</body>
</html>
| <前へ | 記事一覧へ | 次へ> |
