HTMLには、幾つものルールがあります。ここでは「最低限これだけやっておこう」というルールを解説致します。
まず、HTMLは、HTML文書である事を伝えるために、拡張子を「.html」にする事と、後もう一つありまして、HTML文書全体を「<html>HTML文書全体</html>」という、HTMLである事を示すタグで囲まなければなりません。
更に、このHTML文書の前に、HTMLのバージョンを宣言するタグを書く事が推奨されています。HTMLは、バージョンごとにそのバージョンで使用できるタグや、書き方が異なります。このHTMLのバージョンを宣言するタグは「<html>HTML文書全体</html>」の前に、以下のように書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
この、HTML文書の前に、HTMLのバージョンを宣言するタグについては、複数あり、上記の例は「Transitional DTD」という種類にあたり、フレームという方法が使えませんが、制限はゆるく、比較的多くのタグの使用を認めるバージョンを宣言しています。よくわからなければ、このTransitional DTDで良いでしょう。(他の種類のHTMLバージョンの宣言もあります、詳しく調べたければ、Yahooなどで調べてください)
では、ここまでをまとめると、HTMLのバージョンを書き、HTML文書を<html>のタグで囲み、以下のような形になりました。(わかりやすく赤線で示します)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
HTML文章
</html>
では、次に、HTMLの文書自体ではなく、そのHTMLの文書に関する情報を記述する方法を解説致します。(HTMLの文書に関する情報を記述するにはこれだけで十分とは言えませんが、以下の事だけでも最低限記述しておくと、良いと思います)
まず、HTML文書に関する情報を記述するには、その部分がHTML文書に関する情報である事を定義するタグ「<head>HTML文書に関する情報</head>」で囲む必要があります。
次に、この「HTML文書に関する情報」に何を書けば良いかですが、まず、HTML文書がどういった文字コードで書かれているかを、ブラウザで見た時に文字化けを防ぐために書きましょう。(よくわからない人は、文字コードは基本的にはShift_JISで書かれている場合が多いので、下記のまま書けばよいかもしれません)
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
(「Shift_JIS」の箇所には、
その文書の文字コードが「シフトJIS」の場合に「Shift_JIS」、「EUC」の場合は「EUC-JP」、 「JIS」の場合は「iso-2022-jp」を指定します。文字コードの指定は、下記で記述するHTML文章のタイトルを定義するタグである<title>~</title>で日本語が使用されている場合、その日本語が登場するより前に記述する必要があります。)
次に、HTML文書のタイトルを記述するタグ「<title>HTML文書のタイトル</title>」タグを書きましょう。
他にも様々なHTML文書に関する情報を記述する方法がありますが、今回は省きます。機会があれば書きたいと思いますが、機会が無いかもしれませんので、Yahooなどで「html head」などといった単語で調べると関連する情報が見つかるかもしれません)
では、これまでをまとめて、どのようなHTMLになったか書いてみます。(わかりやすく赤線で示します)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>HTML文書のタイトル</title>
HTML文章
</html>
そして、次に、HTML文書の情報を記述するタグの下に、実際のHTML文書の本文である事を定義するタグ「<body>HTML文書</body>」があります。忘れずにこのタグでHTML文書の本文を囲むようにしましょう。
では、ここで、前回の「HTMLの書き方」で作った文書を、HTML文書の本文である事を定義するタグ「<body>HTML文書</body>」にあてはめ、これまで登場した<html>や<head>、HTML文書の情報(文字コードの指定、タイトルの指定)と組み合わせると、以下のようになります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>WindowsXP</title>
</head>
<body>
<h1>WindowsXP</h1>
<p>それは最先端の技術を集結したOSです。</p>
<ul>
<li>セキュアな環境</li>
<li>簡単で効率的なネットワーク環境</li>
<li>安定性</li>
</ul>
</body>
</html>
これでHTML文章として出来上がりました。しかしながら、HTMLには他にも多くの構造を指定するためのHTMLタグが存在します。ここで細かく説明するタグは以上ですが、ある程度のHTMLタグを簡潔に一覧表しました。
この「初めてのホームページ作成」の分類には以下のページがあります。