HTMLのルール

HTMLには、幾つものルールがあります。ここでは「最低限これだけやっておこう」というルールを解説致します。

HTMLである事を定義

まず、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文書に関する情報を記述するには、その部分が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文書のタイトル

次に、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文書の情報を記述するタグの下に、実際の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タグを簡潔に一覧表しました。

次は「HTMLタグ一覧表」です。

一番上に戻る

この「初めてのホームページ作成」の分類には以下のページがあります。

  1. ホームページとは
  2. ホームページ作成に必要なもの
  3. 拡張子の変更方法
  4. 拡張子「.html」ファイルの作成方法
  5. HTMLのルール現在のページ
  6. HTMLタグ一覧表
  7. スタイルシートとは
  8. スタイルシートの書き方
  9. 文字を赤、下線、14ピクセル
  10. 色を16進数の#RRGGBBで求める
  11. カラーピッカー comin
  12. marginで空間作成
  13. paddingで空間作成
  14. backgroundで背景に画像
  15. font-familyで書式を変更
  16. font-weightで文字の太さ
  17. スタイルシートのプロパティ一覧
自作パソコンのキモ

ここより下はホームページに関するメニュー

ここより下はホームページに関するメニュー

ここより下は自作パソコン基礎&組み立てメニュー

ここより下はパソコンを納得して選ぶにはメニュー

ここより下はレンタルサーバーに関するメニュー


スマフォ時代にWiMAXが熱い!キャッシュバック有りの月額3,880円。クレードル(1,490円)も買えば、家では据え置きの一台二役で家ネットもパケット定額も解約出来る!?