2013/12/04

【HTML5入門】今さら聞けない!HTML5の基本の書き方まとめ

【HTML5入門】今さら聞けない!HTML5の基本の書き方まとめ

HTMLでサイトを作る際に必ず記述する「DOCTYPE宣言」や「エンコーディング」。
これらはHTML5では記述方法が変更されているので、必須の記述をまとめました。
基本中の基本ですが、これからHTMLの勉強を始める方のためにまとめておきます。

目次

DOCTYPE宣言

コーディングするにあたってまずはじめに記述するのが「DOCTYPE宣言」です。
XHTML1.0の記述方法と比べるととてもシンプルな記述になっています。

【XHTML1.0 Transitional DTD】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【HTML5】

<!DOCTYPE html>

HTML5でもDOCTYPE宣言は必須ですがDTDを示す必要がなくなったため、ブラウザの表示モードを「標準モード」にするためだけに記述します。

DTDとは 「文書型定義」の略。SGMLやXMLで文書を記述する際、その文書中でどのようなタグや属性が使われているかを定義したもの。SGMLでは文書は必ずDTDに従って作成される必要があるが、XMLではDTDは必ずしも必要ではない。
出典:e-Words

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

html要素に記述していたxmlns属性がlang属性に変更されます。
エンコーディングの記述はとても短くなりました。
こちらもXHTML1.0の記述方法と比べるととてもシンプルな記述になっています。

【XHTML1.0 Transitional DTD】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

【HTML5】

<html lang="ja">
<head>
<meta charset="UTF-8">
</head>

IE8以下に対応

HTML5はIE6~8には、対応していません。
しかし「html5.js」ライブラリを使用すればIE6~8に対応させることができます。

まずは、Google Codeから「html5shiv.js」をダウンロードします。

Google Code - https://code.google.com/p/html5shiv/

zip解凍後、「src」フォルダ内に「html5shiv.js」「html5shiv-printshiv.js」2つのファイルが格納されているので、どちらかを任意のディレクトリにアップロードします。
アップロードしたら以下のコードを<head>~</head>内に記述します。

【html5shiv.js】

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

【html5shiv-printshiv.js】

<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js "></script>
<![endif]-->

※パスは各々の環境にあわせて変更して下さい。
「html5shiv.js」と「html5shiv-printshiv.js」は、印刷時のサポートがあるかないかの違いだけなのでどちらを使用しても構いません。

html5reset.css

リセットCSSを読み込んだら準備は完了になります。
HTML5用リセットCSSは以下のサイトでダウンロードできます。

https://code.google.com/p/html5resetcss/downloads/list

サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/ html5reset-1.6.1.css"  />
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
コンテンツ内容
</body>
</html>

まとめ

今さら聞けないHTML5の基本の書き方についてまとめました。
これからHTML5を勉強するという方の参考になれば幸いです。