彩りの大地うぇぶでざいん

それぞれの要素について

<!DOCTYPE ～>宣言について

手始めにHTMLタグだのなんだのに入る前、<!DOCTYPE ～>宣言というのがあります。
実はこれ、多くのファイルヘッダにもバイナリとして組み込まれている大変重要なものなのです。 (バイナリファイルをテキストエディタで開いたときに、このような文言が読める可能性もあります。)
つまり、HTMLの仕様を宣言するだけでなく、どんなファイルであるかをも示している、ということでもあるのですね。

宣言しない場合

HTMLでは、HTMLの仕様にのっとって記述するのかどうかを決める領域となります。
宣言なしだと自由に書けますが、設定値のない部分はブラウザに依存し、良かれと思って書いた文章の評価は訪問者の裁量に依存し、いずれにしてもリピーターがいるかどうかにもかかわってきます。
なので、宣言がなくても、なるべく仕様に沿った文章を書き上げるようにしましょう。

HTML 4.01 Transitional を宣言する場合

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

HTML 4.01 は最終的にStrictのような仕様に移行することを目的としているようで、これがその第1ステップといえます。そのため、この仕様はTransitional(＝過渡期)仕様と銘打っているようです。
過渡期仕様では、使用できるHTMLタグこそ制限があまりありませんが、 インライン要素はブロック要素に含まれなければならないなどといった文法の定義は HTML 4.01 Transitionalですでに組み込まれているようです。
インライン要素とブロック要素について

使えるタグなどの種類はさておき、まずはこの仕様にならって文書構造をしっかりさせることを推奨いたします。

HTML 4.01 Frameset を宣言する場合

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

名前のとおり、フレームセットのページを使用する場合に宣言します。
これを記述する場合、<body>は記述せず、いきなり<frameset>を記述します。 <frameset>間には<frame>を使用し、その前後のいずれかに、フレームに対応していないページ用の代替表示として <noframes>間に代替表示を作るなどということをします。
一時期、これを使うページは粋だとされていたようですが、それも今や昔の話、スタイルシートによる表現に取って代わられ、どんどんなくなっています。

また、フレームページをうまく活用するにはターゲットリンクを設置しなければならない仕様であるため、フレーム内に表示されるページは必然的に過渡期(Transitional)仕様(または、それよりも規制の緩い仕様)でないといけなくなってしまいます。
ということはつまり、フレームセットのページも過渡期(Transitional)仕様のようなものであり、最終的にStrictに以降する目的で制定された仕様であると言えなくもない感じです。
フレームページなどでターゲットリンクを設置するのなら<base target>が役立ちます。

フレームページにはあらぬ欠点があります。それは、1つのページに複数のページが混在していることが原因で起こる不都合です。
。
ページの内容は有益だとしても、検索エンジンの動作はそのページのほうをヒットさせるため、母体となるフレームセットのページのほうは考慮しないなどといった弊害が起こります。

また、セッション履歴移動(戻る・進むを利用した履歴移動のこと)を多用するユーザにとってもマイナスに働きますので、ある意味お粗末な仕様だったりします。

HTML 4.01 Strict を宣言する場合

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

ヘッダ部に特別「Strict」という文言が含まれていないことを見てもわかるとおり、 HTML 4.01 の真の仕様がこのStrict(＝厳格)仕様です。
厳格仕様では、文書構造はもちろんですが、使ってはいけない(旧仕様から削除された)タグがあります。切り捨てられたタグというのは、基本的にレイアウトを定義する<font>や、要素だけでなく、 <xx align="center">や<xx target="_blank">などの属性まで使用の制限に引っかかってしまいます。

と、見てもわかるようにレイアウトを定義するタグが廃止となっているため、 スタイルシートを使うこと前提に考えられている仕様だということがわかります。
また、<xx target="_blank">などのようにレイアウトに関係のないものまで廃止されていますが、これ自身が別窓で開くという効果であることを考えてもわかるとおり、ブラウザ上での振る舞いをどうするかはユーザに委ねられている形となっています。
スタイルシートにしても、ブラウザに組み込む「ユーザースタイルシート」なるものを利用するユーザも少なくはなく、レイアウトの面でさえユーザーの手によって委ねられる時代が到来したのです。

今後はレイアウトの面では特にスタイルシートを使うようにしましょう。そうすれば晴れてTrasitionalから卒業でき、あなたもStricterになれます。
そして、私のページに見合ったCSSを提供してください。(爆

HTML 5 (HTML Living Standard)を宣言する場合

<!DOCTYPE HTML>

ヘッダ部がもはやHTMLであること以外は何も宣言されていない状態です。なんなんですか、これは。

HTML 5(LS)は、これまではウェブページというものは、ページを見ていても変化しない「静的なもの」だったのに対し、ページが動いている「動的なもの」であることに対応した形となっています。
動的なHTML、DHTML(Dynamic HTML)と呼ばれたりしますが、それがとうとう集約され、仕様によって制定されたものといえるでしょう。
そんなHTML 5(LS)のために新たに追加されたタグもいくつかはありますが、基本的にはHTML 4.01のような文書構造を守りつつ、かつ、レイアウトはスタイルシートに任せるなどといった、HTML 4.01の後継だからこその仕様を盛り込んでいます(逆に、HTML 4.01で非推奨とされたものが推奨されたものもありますが)。

なので、まずはHTML 4.01をマスターしてから宣言してみることを推奨いたします。(ここは強制ではないが)

XHTML を宣言する場合

<?xml version="1.0" encoding="(文字コード)"?>

XHTML(eXtensible HTML)を宣言する場合はHTMLのそれとは異なり、 最初にXML(eXtensible Markup Language)の仕様にも準拠するよということを宣言しなければなりません。
XHTMLはHTMLにXMLの仕様を掛け合わせたもので、HTMLとは構造は一緒だけど、物自体は別だと考えていいでしょう。
XMLの宣言が終わったら、続いて、XHTMLの宣言を行います。

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

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

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

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

どれが何なのかは見たままなので割愛します。ちなみに1.1は1つだけというとおり、Strict仕様のバージョンアップ版です。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<html>タグにも指定があり、バージョンや言語コードの記述が必要です。

<meta http-equiv="content-type" content="application/xhtml+xml; charset=(文字コード)">

さらに、XHTMLで書く場合のルールがあります。

まず、タグの要素名や属性名はすべて小文字であること。
HTMLでは大文字小文字が混在していても、大文字で書いても問題がなかったのですが、XHTMLでは小文字限定です。

それから、終了タグを省略してはなりません。 <p><td><li>など、HTML 4.01では終了タグは省略可能でしたが、 XHTMLではその仕様上、省略はできません。
ただし、<br> <meta ～> <link ～> <img ～>などのように、終了タグがないものもあります。そういう場合は、<br /> <meta ～ /> <link ～ /> <img ～ />のように、自己完結型の書式にしてください。
※逆に、HTML 4.01 などで自己完結型の書式にすることはできません。

ほかにもいろいろとできない・書き方に制約があるなどといったものもあります(特に文字参照など)。ここではそれ以上深く掘り下げませんので、各人でいろいろと調べてみてください。

ただし、このXHTMLはHTMLの仕様を策定するW3Cの暴走癖によるものらしく、各ブラウザ開発組織の反対攻勢によって廃止(開発中止)の方向へと進んでいっています。
そのため、これからウェブページを作るという人はHTML5を見据えていく方向でいいでしょう。

<html>要素について

!DOCTYPE宣言が終わったら、これで初めてHTMLタグというのを記載します。
html要素は見たとおりの要素です。つまり、「ここはHTMLのコードですよー！」の意。 すべてのHTMLタグはこれが定義されている領域内に書かれなければなりません。

一応、この要素にも属性があり、言語コード等を宣言するのに使われたりします。

<head>要素について

ヘッダを定義する要素で、基本的にはウィンドウ上に表示されないけど、ウェブページに情報を搭載させるためには必要不可欠な領域です。

たとえば言語コード・文字コード・使用しているCSSやJSなどの指定はもちろん、ページのタイトルやページアイコン、著作権情報、検索ワードやページの説明、キャッシュ・検索の拒否設定、最近ではSNSとの連携をするような要素(いわゆるOGPと呼ばれるもの)など、そういったものを取り扱います。
非常に重要な領域ですので、きちんと設定しておきましょう。

<body>要素について

ウィンドウ上に表示される胴体の部分です。 <head>部分を設定した上で、ここの領域の表示を確かなものにしましょう。
ほとんどの要素はここの領域で使う要素ばかりです。使えるタグは言うまでもないですね。
インライン要素とブロック要素について

彩りの大地 うぇぶでざいん

ぺぇじへっどらいん