HTML5を用いたテンプレート

前回はHTML5のDOCTYPE宣言について紹介したが、今回はHTML5を日本語で書く
テンプレートを紹介する。

HTML5で最小限必要な要素

最小限必要な要素は、DOCTYPE宣言。今回htmlタグ、headタグ、bodyタグを記述したが、HTML5からはこれらのタグは省略できるようだ。ただ、これらのタグがないと気持ち悪いので記述する。これを記述したものが以下のコード

HTML5で最小限必要な要素

<!DOCTYPE html>
<html>
<head>
<!-- ここにヘッダー情報を記述する -->
</head>
<body>
<!-- ここにサイトに表示するものを記述する -->
</body>
</html>

ちなみに<!– –>で囲った部分は、htmlで使用できるコメント行である。コメント行はブラウザには表示されないので、自分のコーディングに対するメモなどを記述できる。

日本語の文字コードUTF-8を使う

上記のものに、「日本語で文字コードUTF-8を使う」という記述を加える。ハイライト部分を変更、追記した。これで文字化けを防げる。この記述で文字化けする場合は、エディターの文字コード設定を見直すと良いだろう。

日本語、文字コードUTF-8の指定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- ここにサイトに表示するものを記述する -->
</body>
</html>

titleタグとHTML5から導入されたheader, secion, footerタグの利用

まず、サイトタイトルの記述はtitleタグで行う。body内にやたらと記述が増えたが、今回headerタグ、sectionタグ、footerタグを利用した。headerタグはサイト上部を示すタグで、footerタグはサイト下部を示すタグ。sectionタグは節を示すタグで、1ページに複数の内容を入れるような構成の場合に利用するとよいだろう。

HTML5テンプレート

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
</head>
<body>
<header><h1>大見出し</h1></header>
<section>
<h2>中見出し</h2>
<p>文章</p>
</section>
<section>
<h2>中見出し</h2>
<p>文章</p>
</section>
<footer>フッター情報</footer>
</body>
</html>

HTML4.01から何が変わったか

headerタグ、sectionタグ、footerタグなどがなぜ便利かというと、これはHTML4.01以前のコードを知る必要がある。HTML4.01以前はheaderタグ、sectionタグ、footerタグなどがなかったため、divにidやclassをつけて以下のようにコーディングしていた。headerタグなどを使うとコードが簡略化して可読性が上がる。

また、検索エンジンにも、「ここがヘッダー」「ここがサイトのコンテンツ」などというように伝えることができるため、サイトをより理解されることとなるだろう。

HTML4.01以前のマークアップ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
</head>
<body>
<div id="header"><h1>大見出し</h1></div>
<div class="wrapper">
<h2>中見出し</h2>
<p>文章</p>
</div>
<div class="wrapper">
<h2>中見出し</h2>
<p>文章</p>
</div>
<div id="footer">フッター情報</div>
</body>
</html>

関連記事

HTML5の宣言文(DOCTYPE宣言)
HTML5、CSSを用いた中央寄せのテンプレート

コメント

  • >匿名様
    ご指摘していただき、ありがとうございます。
    私の調査不足でした。ご指摘の点、訂正させていただきました。

    2012年8月16日 12:03 AM| 管理人

  • 間違いがあります
    html5ではhtml、head、body等の開始タグと終了タグは必須ではありません

    2012年8月15日 8:58 PM| 匿名

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/html/1192/trackback/