その1 -まずは大枠を作ってみる-
- DOCTYPE宣言について
- 文字コードの指定について
- 1-2を踏まえてざっくりとしたテンプレート
- もっとシンプルなテンプレート
1.DOCTYPE宣言について
HTML4では↓こんな感じでした。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5では↓こうなります。
<!DOCTYPE html>
わーお、シンプル。
HTML4はなんであんなに長かったのか、、、は、もう今後なくなっていくだろうし説明しません。とにかくHTML5はよりシンプルな宣言になったよ、ということだけ覚えておきましょう。
2. 文字コードの指定について
HTML4では↓こんな感じ。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
HTML5では↓こんな感じ。
<meta charset="UTF-8">
はい、シンプルゥ～。
余計なものはもういりませんよ、と。
3. 1-2を踏まえてざっくりとしたテンプレート
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5、勉強してます！</title>
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
なんか、サッパリしてるねっ！
要はね、DOCTYPEを<!DOCTYPE html>に変えればHTML5と認識されるっぽいっす。
4. もっとシンプルなテンプレート
調べたら、なんと、
<html>タグ
<head>タグ
<body>タグ
は省略可能らしい。
ってことは、最高にシンプルにするとこんな感じになるんじゃない？
<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5、勉強してます！</title>
<p>Hello HTML5!</p>
短っ！
本当に省略していいの？
不安なので、HTML5のバリデーションチェックしてみた。
うん、大丈夫そうだね。
すっげーシンプルになったな。
懸念点としては、ソースが増えた場合に<head>と<body>がないとわかりづらくなる、ってくらいかな。まあ、2,3行改行して区切れば回避できるだろうけど。
よし、今後はタグ省略で作ってみよう。