パソコンQ&A

HTMLのキホン(1)

まずは1行目にDOCTYPE宣言を書きます。
(1行目が改行で2行目に書くと無視されることがあります)
これはこのHTML文書がどんな仕様に基づいて書いてあるかを宣言します。
省略するとほとんどのブラウザでは『互換モード』として解釈されるので、なくてもいいのですが、 どんな仕様でもよいととられてしまうので、指定した方がよいでしょう。
(省略したときに、必ず『互換モード』と解釈されるとは限りません)

DOCTYPE宣言の一覧より選択しますが、ブラウザによって『互換モード』『標準準拠モード』が違うものは避けましょう。
(ブラウザによって表示が変わることがあります)

互換モード、標準準拠モードの違い
モード特徴
互換モード大雑把な解釈をしますhtmlやbodyをheight=100%とします
標準準拠モード仕様に沿った厳密な解釈をしますhtmlやbodyをheight=autoとします
[参考記事] 『互換モード』『標準準拠モード』の表示の違い

どちらを選ぶかは好き好きですが、HTML文書を作っている段階で思った表示にならないときは、DOCTYPE宣言を変えてみるのもいいでしょう。
とりあえずページを作りたいと言う人は『互換モード』、より正しいHTMLを書きたいと言う人は『標準準拠モード』という感じだと思います。

HTML4.01の仕様であれば
互換モード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


標準準拠モード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


XHTML1.1の仕様であれば
標準準拠モード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


XHTMLでは大文字にするのはここだけです。あとは小文字にするのが正しい表記なので、覚えるのは楽ですよね。


次にHTMLタグの内容を書きますが、最初にHEADタグとMETAタグを書きます。
HEADタグはページ本文には直接表示されない情報などを記載する部分です。

このファイルがどんなものであるか、どんな文字コードで書かれているかを表します。
文字コードの指定がないとブラウザが自動的に文字コードを判断しますが、間違ってしまうことがあります。
間違った文字コードだと文字化けします。
[参考記事] ブラウザの文字化け

文字コードがShift-JISなら次です。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">


JISなら

<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">


EUCなら

<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">


UTF(Unicode)なら

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">


Content-Typeはファイルの種類の意味です。
text/htmlが種類名です。
MIME Content Typeとも呼ばれます。
[参考記事] MIME型の一覧

ページのタイトル
ブラウザ上部やお気に入りなどに使われるページのタイトルを書きます。

<title>タイトル</title>


フレームページの子フレームなど、指定していない場合もあるようです。
でも<title>無題</title>ってなってるとちょっと恥ずかしいかな…

たまに文字コードの指定よりタイトルを先に書いているページを見かけますが、この場合はタイトルに使われている文字で文字コードが判断され、 その後の文字コード指定は無効になります。
タイトルで判断できなかったときだけ、文字コード指定が有効になります。
ブラウザは途中で文字コードを変えることはできません。

文字コードの指定はTITLEタグより前に書きましょう。
(ブラウザは「文字コードを早く決めたい」って感じで結構不安症なんです。)

HEAD部分をまとめると次のような感じです。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>タイトル</title>
</head>



いよいよBODYタグです。

が、これは次回とさせてください。

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net