前の記事でHTMLとはどんな感じのものなのか、詳しいことはほとんどすっ飛ばして書いていたので今回はもう少しHTMLで使われている要素について調べて行きたいと思います。
HTML文書で書かれている最初の文字
- <!DOCTYPE html>
- <html lang=”ja”>
- <meta charset=”UTF-8″>
この3つの意味不明な英文についての意味がなぜか気になって仕方がない初心者の私・・・。
そこで今回はこの3つの英文の意味について書いていきたいと思います。
Contents
<!DOCTYPE>とは??
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML初心者</title> </head> <body>只今、HTML勉強中～ </body> </html> |
HTML文書の一番初めに書かれている「<!DOCTYPE>」という文字。
これは文書型宣言(document type declaration)というもので、そのHTML文書がどのHTMLのバージョンで書かれているかを宣言するものなんだそうです。宣言に従ってブラウザはそのバージョンのルール通りに表示をする・・・といった感じなんだそうですが。
HTMLにバージョンなんてあったの?!?!
HTMLのバージョンについて
やはりここでもつまづきましたね。まさかHTMLにバージョンがあったなんて・・・知らなかった・・・。
今現在、一番新しいバージョンはHTML5だそうです。
その前までのバージョンはというと
HTML4.01→XHTML1.0→XHTML1.1
という順番で進んできて、現在はHTML5となっているようです。
<!DOCTYPE html>はバージョンHTML5を宣言する
HTML5以前のバージョンの場合、<!DOCTYPE>から始まる宣言はもっと長かったそうです。
HTML5の宣言は「<!DOCTYPE html>」というたったこれだけの短い文でいいそうです。初心者には朗報です（ホッ）
つまり「<!DOCTYPE html>」という文の意味は
「このHTML文書のバージョンはHTML5なのでそのルールに従ってブラウザさん、表示をお願いします」
という感じの解釈でいいのではないでしょうか。
<html lang=”ja”>とは??
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML初心者</title> </head> <body>只今、HTML勉強中～ </body> </html> |
<!DOCTYPE html>のすぐ下に<html lang=”ja”>という文字が書いてあります。
これは少しイメージしやすいかも。
lang・・・言語??
ja・・・ジャパニーズ??
この文書は日本語ですって感じの宣言かな??
ニュアンス的には正解でした。
htmlの後に半角スペースをあけて、「lang=”ja”」と書くことで「このHTMLは日本語を使用しています」という宣言になるようです。
<meta charset=”UTF-8″>とは??
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HTML初心者</title> </head> <body>只今、HTML勉強中～ </body> </html> |
<meta charset=”UTF-8″>は<head>と</head>の間に書かれています。
UTF-8って文字、なにやら見覚えが・・・
そうそう、以前文字化け対策の記事を書いた時に出てきました。
どうやらこの<meta charset=”UTF-8″>という文も、文字化けを防ぐために記述しているということで間違いなさそうです。
タイトルが文字化けしてしまうのを防ぐために、絶対に<title>要素よりも上に書くことに注意が必要なようですね。
HTML5からはUTF-8が推奨されている
文字コードにはUTF-8の他にもShift_JISやEUC-JPなどがあるようなのですが、バージョンHTML5ではUTF-8が推奨されているようなのでこの<meta charset>でも”UTF-8″を宣言します。
ちなみに、このmetaとcharsetの間も半角スペースです。
今回のノートまとめ
- <!DOCTYPE>とはHTMLのバージョンを宣言するもの
- 現在のHTMLのバージョンはHTML5
- <html lang=”ja”>とはそのHTML文書は日本語を使用していることを宣言する
- スペースは全て半角スペースであることに注意
- <meta charset=”UTF-8″>とは文字化けを防ぐためのもの
- HTML5では文字コードを「UTF-8」にすることが推奨されている
- タイトルが文字化けしてしまわないように<meta charset=”UTF-8″>は必ず<title>よりも上に書く
これでやっとスッキリしました!!
意味不明な文があるとなんだかモヤモヤして気持ちが悪かったので・・・。
スッキリしたところで今日はここまでにしておきます。
また明日がんばりましょ～!!