ホームページ作成応援サイト

入門!ホームページNAVI

(X)HTMLの種類(DTD宣言)

Webページを作る言語には大きく分けてHTMLとXHTMLの二つがあって、その中でもXHTML1.0とかXHTML2.0などいくつかのバージョンがあります。 どの言語のどのバージョンを使うのかをあらかじめ宣言する事をDTD宣言といいます。 

DTD宣言は、〈!DOCTYPE〉の形で記述します。

HTML4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">

HTML4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Frameset//EN">

HTML4.01
Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN">

XHTML1.0 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.0
Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

TransitionalはStrictに移行するまでのつなぎとしての規格であり、body直下にインライン、ブロック両要素を配置することができますが、Strictはブロックレベル要素でしかおくことができません。
しかし、色々なサイトを見てみると、transitionalを用いているサイトが多いどころか、宣言すらしていないサイトも多々みられます。

最初はどんな場合にも適応できるTransitionalで宣言するのがいいでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>

XHTMLを使用する場合は、DOCTYPE宣言のほかにXML宣言も必要になっています。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
</body>
</html>

バージョン宣言は必ず記述する必要があり、文字エンコーディング宣言とスタンドアロン宣言は必要に応じて記述することになっています。
エンコードはUTF-8を指定しておけば問題はないです。スタンドアロン宣言もこの文書以外に参照すべきDTDがあるかどうかを指定するもので、XHTMLではどのバージョンでもnoでかまいません。
DOCTYPE宣言は英字が大文字でも可能です。

METAタグの記述

Content-Typeでは"media typeとエンコード"の指定をします。 HTML4.01においてはtext/html以外のmedia typeを使用することは禁止になっています。
media typeには"application/xhtml+xml"と"application/xml"と"text/xml"があり、XHTMLにおいて推奨されるのはapplication/xhtml+xmlなのですが、インターネットエクスプローラー(IE)がバージョン7ですら対応出来ないので、HTML・XHTMLともにtext/htmlするしかないのです。

JIS(電子メール)ならiso-2022-jp、シフトJIS(Windows,Mac)ならShift_jis、EUC(unix)ならeuc-jp、をheadとhead内に記述します。unicodeは日本語のような2バイト文字はUTF-16、1バイト文字UTF-8でしょうか?

Webブラウジングをしていて、文字化けしているサイトとかを見たことありませんか?これはエンコードエラーであり、Content-TypeでSift_jis宣言をしているのに、euc-jpで記述しているような文の場合に起こるのです。いっている事とやっていることが違うと言うことになります。

メモ帳のデフォルトエンコードはShift_jisですのでUTF-8など他のエンコードを使用する場合は、terapadで「ファイル→文字コード再読み込み」を使うのがいいでしょう。

descriptionでは"ペジの概要"を指定することができます。この部分に記述する文は、googleで検索したときの説明文として紹介されますので、パラパラと上位表示させたいキーワードを含めなら、30字程度で書いてください。

keywordsでは検索対象となる"キーワード"を指定することができます。keywordは”,”カンマで区切って記述しましょう。スパムが増えたために重要度はあまりありませんが、一応記述はしておいたほうがいいでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
</head>
<body>
</body>
</html>

XHTMLでは、「空要素は終了させる」という決まりがあるので、<html></html>のように空でない要素に関してはHTMLと同じでいいですが、<meta○○>のように”/”の終了タグがないものは、必ず”/"、半角スペース+スラッシュを最後に付けるようにしましょう。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis" />
<meta http-equiv="description" content="初心者が作るページです。"/>
<meta http-equiv="keywords" content="wakabagari,若葉狩り" />
</head>
<body>
</body>
</html>

言語の記述

html要素にはlang属性やxml:lang属性(XHTMLのみ)、xmlns属性(XHTMLのみ)を指定することを推奨しています。 言語は日本語なら"ja"、英語なら"en"ですが、省略も可能です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
</head>
<body>
</body>
</html>

XHTML1.0を使う場合でもlangとxml:langの両方を記述しましょう。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初めてのホームページ。">
<meta http-equiv="keywords" content="wakabagari,山登り">
</head>
<body>
</body>
</html>


コピーライト