HTMLは半角英数字でタグを書きますが、大文字と小文字の区別は無いです。
つまり<html>と<HTML>は同じと認識されます。将来的な事を踏まえると、
できたら小文字で書く癖を付けた方が良いかもしれません。
<html>
"初めてのHTML"
</html>
上に書いたタグをメモ帳に書き、test.html などで名前を付けて保存すると、e のマークのファイルができ、
そのファイルをクリックするとIEが立ち上がり"初めてのHTML"と黒い文字で表示されます。
ホームページはこの延長線上にあるものです。
<html>
<head>
<title>初めてのHTML</title>
</head>
<body>
<div align="center">"初めてのHTML"</div>
</body>
</html>
上に書いたHTMLは、より実践的な書き方になっています。ここで出てきたタグについて説明しましょう。
<html>ここのテキストがHTMLによる記述である事を宣言。
<head><head>から</head>の間は、実際にブラウザで表示されない、
HTMLの情報を書き込む範囲。
<title>サイトやそのファイルのタイトルを入れる。
<body><body>から</body>の間は、ブラウザで表示する内容を書き込む範囲。
これらのタグは全て閉じるタグがあります。考え方は全てが <html> の範囲で、
その中を <head> と <body> に分けます。更にそれぞれの中で <title> や <div> タグが使われる。
head 内に書き込むものは、作ったHTMLを正しく表示してもらうための情報です。
それはサイトを閲覧してる人向けではなく、表示させてるブラウザ向けのもので、
ブラウザはその情報を元に、製作者の意図したスタイルで表示させます。
実践的なheadを書き込んだ例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<meta name="description"content="ホームページの作成">
<meta name="keywords"content="HTML,CSS,ホームページ,作成,">
<title>初めてのHTML</title>
<style type="text/css">
</style>
</head>
<body>
<div>"初めてのHTML"</div>
</body>
</html>
上の例は head がより実践的なものになっています。と言うかこれで十分です。
新たに<meta>が追加されているので、それについて説明しておきます。
上では３つの<meta>が使われていますが、記述がそれぞれ違うように役目も変ってきます。
<meta>タグには閉じるタグはありません。
<http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
これは文字化けを防ぐ役目です。このHTMLはShift_JISで表示する宣言です。
これは必ず入れておきましょう。通常は <title> より上に入れます。
<meta http-equiv="content-style-type" content="text/css">
タグに直接スタイルシートを使う時に、正しくスタイルシートを認識させます。
<name="description"content="ホームページの作成">
これはロボット検索、例えばgooなどにサイトを登録した際、ここに書かれた
内容が、サイト紹介文として登録されます。ロボット式の検索サイトに登録
しない場合や、登録したくないページは下のキーワードと共に必要ないです。
<name="keywords"content="HTML,CSS,ホームページ,作成,">
これもロボット検索、例えばgooなどにサイトを登録した際、ここに書かれた
キーワードが、キーワード検索で一致したサイトを結果として表示します。
キーワードは , で区切り複数入れる事が出来ます。
<style type="text/css">
これは、ホームページを作る際のデザインを担当するもので、<body> 内に表示させるタグをサポートするものです。
現在のHTMLはこのスタイルシートを使ってデザインする事を推奨しています。
この他にもhead 内に書く情報は色々ありますが、それは一般的なHTMLには必要無いものです。
逆に必要になった時だけ記述すれば良いとなります。
DTDの宣言（文書型宣言）
DOCTYPEは「このファイルはこのルールによって書かれています」と宣言するものです。逆にDOCTYPEで宣言した通りHTMLを書かなくてはならない事にもなり、
宣言通りHTMLを書かないとブラウザでの表示に責任は持てない訳ですし、時には表示が崩れる場合も出てきます。
HTMLのバージョンは時と共に進歩してきましたので色々なバージョンがある訳です。現在のHTMLは4.01が最終のバージョンですが、
この4.01バージョンをW3Cは正しいHTMLとしている訳です。よって4.01バージョンのルール通りのHTMLを広めたい訳ですが、
かつてから存在するHTMLを全て4.01バージョンに直せとは流石に言えない訳です。
そのために[ 厳格な4.01バージョン用の宣言 ]と[ 4.01バージョンに移行中 ]というバージョンがあり、4.01の厳格なルールを知らない方は、
[ 4.01バージョンに移行中 ]というルールの緩やかな方を宣言してHTMLを書く事が出来ます。
またフレームを使用する場合はフレーム用のDOCTYPEもあり、フレーム用以外のDOCTYPEを書くと正しく表示されません。
（フレーム用はframeタグを入れたHTMLで宣言する。）
・HTML 4.01で定義されたタグや属性のみ使用できる [ 厳格な4.01バージョン用の宣言 ]
<font><center>など非推奨タグやbgcolor・alignなどの非推奨属性は使えません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
（
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">）
・タグ使用制限の無し [ 4.01バージョンに移行中 ]
<font><center>など非推奨タグやbgcolor・alignなどの非推奨属性も使えます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
（
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">）
・フレーム用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
（
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">）
DOCTYPEはホームページビルダーなどでHTMLを作ると必ず入りますね。ちなみに大手検索サイトのHTMLには使われていません。
それはDOCTYPEを入れなくても、正しく表示される事の裏付けと言えるかもしれませんし、省略した場合は厳格なHTMLではないとしてブラウザは扱い表示するだけでしょう。
しかし
DOCTYPE は title と同じようにHTMLでは必須項目一つですので、
W3Cに忠実なHTMLを心がけている人はDOCTYPEを入れて、正しいHTMLを書きましょう。
ちなみにDOCTYPEは<html>の上、1行目に書きます。
<meta> メタタグ
・文字コード。文字化けの防止。シフトJIS＝Shift_Jis / EUC＝euc-jp / JIS＝iso-2022-jp
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
・ロボット検索向けにサイトのキーワード。現在どの程度の効果があるのか？
<meta name="keywords" content="キーワード１,キーワード2,">
・ロボット検索向けにサイトの説明。今ではどの程度の効果があるのか？
<meta name="description" content="サイトの説明">
・基準スクリプト言語。
<meta http-equiv="Content-Script-Type" content="text/javascript">
・基準スタイルシート言語。
<meta http-equiv="Content-Style-Type" content="text/css">
・作者の名前。
<meta name="author" content="名前">
・自動ジャンプ。[ url=飛ぶサイトのURL ] この部分を外すとページのリフレッシュ。
<meta http-equiv="refresh" content="3;url=飛ぶサイトのURL">
・ブラウザのキャッシュを制御。一時ファイルとして保存されないようにする。
<meta http-equiv="pragma" content="no-cache">
・検索ロボットの制御。検索に登録する場合は index 許可しない場合は noindex
ページ内のリンク先への許可は follow 許可しない場合は nofollow
<meta name="robots" content="index,nofollow">
・イメージツールバーの非表示。
<meta http-equiv="imagetoolbar" content="no">
