まずは1行目にDOCTYPE宣言を書きます。
(1行目が改行で2行目に書くと無視されることがあります)
これはこのHTML文書がどんな仕様に基づいて書いてあるかを宣言します。
省略するとほとんどのブラウザでは『互換モード』として解釈されるので、なくてもいいのですが、
どんな仕様でもよいととられてしまうので、指定した方がよいでしょう。
(省略したときに、必ず『互換モード』と解釈されるとは限りません)
DOCTYPE宣言の一覧より選択しますが、ブラウザによって『互換モード』『標準準拠モード』が違うものは避けましょう。
(ブラウザによって表示が変わることがあります)
互換モード、標準準拠モードの違い
モード | 特徴 | 例 |
---|---|---|
互換モード | 大雑把な解釈をします | htmlやbodyをheight=100%とします |
標準準拠モード | 仕様に沿った厳密な解釈をします | htmlやbodyをheight=autoとします |
どちらを選ぶかは好き好きですが、HTML文書を作っている段階で思った表示にならないときは、DOCTYPE宣言を変えてみるのもいいでしょう。
とりあえずページを作りたいと言う人は『互換モード』、より正しいHTMLを書きたいと言う人は『標準準拠モード』という感じだと思います。
HTML4.01の仕様であれば
互換モード
標準準拠モード
XHTML1.1の仕様であれば
標準準拠モード
XHTMLでは大文字にするのはここだけです。あとは小文字にするのが正しい表記なので、覚えるのは楽ですよね。
次にHTMLタグの内容を書きますが、最初にHEADタグとMETAタグを書きます。
HEADタグはページ本文には直接表示されない情報などを記載する部分です。
このファイルがどんなものであるか、どんな文字コードで書かれているかを表します。
文字コードの指定がないとブラウザが自動的に文字コードを判断しますが、間違ってしまうことがあります。
間違った文字コードだと文字化けします。
[参考記事] ブラウザの文字化け
文字コードがShift-JISなら次です。
JISなら
EUCなら
UTF(Unicode)なら
Content-Typeはファイルの種類の意味です。
text/htmlが種類名です。
MIME Content Typeとも呼ばれます。
[参考記事] MIME型の一覧
ページのタイトル
ブラウザ上部やお気に入りなどに使われるページのタイトルを書きます。
フレームページの子フレームなど、指定していない場合もあるようです。
でも<title>無題</title>ってなってるとちょっと恥ずかしいかな…
たまに文字コードの指定よりタイトルを先に書いているページを見かけますが、この場合はタイトルに使われている文字で文字コードが判断され、
その後の文字コード指定は無効になります。
タイトルで判断できなかったときだけ、文字コード指定が有効になります。
ブラウザは途中で文字コードを変えることはできません。
文字コードの指定はTITLEタグより前に書きましょう。
(ブラウザは「文字コードを早く決めたい」って感じで結構不安症なんです。)
HEAD部分をまとめると次のような感じです。
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
</head>
いよいよBODYタグです。
が、これは次回とさせてください。