はじめてのHTML5 第1回『HTML5の基本の書き方を覚える』
- カテゴリー HTML5のコードの書き方の基本
第1回テーマ
第1回目のテーマは『HTML5の基本の書き方を覚える』とタイトルに書きましたが、ブログやサイトを作りはじめるには最初に必ず記述する文字がありますよね。
例えば、「DOCTYPE宣言」や「エンコーディング」などです。
HTML5の場合、これらの情報はどうなるのでしょうか？
今までどうりの記述方法なのか、それとも大幅に変更されているのか。これを知らなければサイトを作りを始めることができないと思い、第1回目のテーマにしました。
では、具体的に今回のテーマ『HTML5の基本の書き方』とは、
- HTML5でのDOCTYPE宣言の書き方
- html要素と文字のエンコーディング
- HTML5がIEなど対応していないブラウザへ新要素への対応
- HTML5に対応したリセットCSSの導入
です。
上記の条件をクリアして、サイト構築への準備を整えていきたいと思います。
HTML5でのDOCTYPE宣言の書き方
まず最初は『HTML5でのDOCTYPE宣言』です。XHTML1.0とHTML5の記述方法を比較しながら確認していきたいと思います。
【 XHTML1.0 TranditionalのDOCTYPE宣言 】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
【 HTML5のDOCTYPE宣言 】
<!DOCTYPE html>
XHTML1.0と比べて、HTML5では非常にシンプルに成りますね！
これで、標準モードでレンダリングされHTML5に準拠したページにすることができました。
html要素と文字のエンコーディング
次にhtml要素とエンコーディングについて比較してみます。
【 XHTML1.0のhtml要素と文字のエンコーディング 】
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
【 HTML5のhtml要素と文字のエンコーディング 】
<html lang="ja"> <head> <meta charset="UTF-8">
XHTML1.0ではhtml要素にxmlns属性が必要でしたが、HTML5ではlang属性を記述して言語指定しています。次に記述していたheadタグは同様のようですね。
続いてエンコーディングの指定方法ですが、HTML5でもエンコーディング指定をするのは変わりませんが非常に短くなりました。
尚、HTML5では空要素を閉じても、閉じなくても問題ないようです。
<meta charset="UTF-8" /> //上記と同じ意味でエラーにはなりません。 <meta charset="UTF-8">
HTML5がIEなど対応していないブラウザへ新要素への対応
IE6からIE8はHTML5の新要素に対応していない模様・・・つまり、新しい要素がレンダリングされないためにスタイルを適応することができないという問題が起こってしまいます。
そこで、JavaScriptを用いて新たに要素を作成します。
document.createElement(‘新しい要素’);
ただ、すべての要素分生成するのは大変だなと嘆いていたのですが、Remy Sharp氏が公開した『html5.js』というライブラリをインポートすることで解決することができるようです！
<!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
HTML5に対応したリセットCSSの導入
最後にHTML5用のリセットCSSを読み込んで完了です。
良いCSSリセット探していたところ、html5doctorのリセットCSSがよく使われているようなので、html5doctorのリセットCSSをダウンロードして読み込みます。
上記のリセットは利用しているサイトも多いようなので、私もこのブログで使用させていただきました。
CSSの中には今までどうり各要素を一度リセットさせる内容と、新要素をdisplay:block;でblock要素に変えていたり、新たに加わったものへの対応が書かれていました。
尚、新要素の説明は随時、勉強しつつ説明できたらと考えています。
第1回のまとめ
HTML5の最初の記述。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サイトのタイトル</title> <link rel="stylesheet" type="text/css" href="css/html5reset.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> //ここにサイトに表示するコンテンツ内容を記述 </body> </html>
以上です。
※HTML5では上記のlink要素のtype属性は省略可能です。また、style要素・script要素などのtype属性も省略可能です。[2011年10月 追記]
HTML5では、DOCTYPE宣言など旧来のものと比べてシンプルになった印象を受けました。
次回からコーディングの考え方なども勉強していくので大変になると思いますが、油断せずに日々精進していきます。
何はともあれ、これでサイト構築への最初の準備が整いました！
次回の第2回は『HTML5のCSSリセット』についてさらに勉強していこうと思います。
参考サイト：
- HTML5 を IE や Firefox 2 でも使えるようにする方法 【HTML5.JP】
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
『 HTML5 』でサイトを作ろうスタートしました
はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』