HTML文書の基本的な構造

もっとも簡単なHTML文書例を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>もっとも簡単なページ</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</HEAD>
<BODY>
<P>これがもっとも基本的なページの例でです
</BODY>
</HTML>

この文書を表示する。

HTML文書は次の部分で構成します。

  1. HTMLのバージョン宣言
  2. ヘッダー部
  3. ボディ部

文章以外に<>で囲まれた言葉が登場します。<>内の言葉を要素といい、<要素>をタグといいます。

タグには開始タグと終了タグがあり、それぞれは<要素>、</要素>と表現します。これは要素による構造や体裁の範囲を指定することになります。

HTMLでは終了タグを省略できます。

HTMLのバージョン宣言

HTML文書の最初の一行で利用しているHTMLのバージョンを指定します。この例ではHTMLのバージョン4.0を使うことなどを宣言しています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

ヘッダー部

HEAD要素

ヘッダー部の範囲を指定するときに使います。ヘッダー部には文書のタイトル、検索エンジンに必要なキーワード、文書に関する情報などを定義します。

<HEAD>
各種の定義
</HEAD>

TITLE要素

この要素はHEAD部に一つだけ記述します。文書の内容を端的に示す文を指定します。ここで指定された文がウィンドウの表題として表示されます。

<TITLE>タイトルの文</TITLE>

追加データ(メタ・データ)

追加データは文書の内容ではなく文書に関する情報を設定するものです。

たとえば、文書の制作者名を文書の中に持たせたいときには次のように記述します。

<META name="Author" content="Kazuhisa Sakabe">

この例でnameとcontentを属性、Autho、Kazuhisa Sakabeを値といいます。

ロボット型の検索エンジンにページを登録させるためにname属性の値をkeyword、conten属性には検索用のキーワードを指定します。

<META name="keyword" content="検索のキーワード">

SCRIPT要素

JavaScriptのプログラムをヘッダー部に記述するときに使います。

<SCRIPT language="JavaScript">
スクリプトを記述
</SCRIPT>

JavaScriptについては右のリンクを参照してください。JavaScript

STYLE要素

スタイルシートの定義はヘッダー部に記述します。スタイルシートを使うと文書の体裁を制御できます。

文書ボディ

BODY要素

HTML文書の本体の範囲を指定する要素です。文書本体の始まりは<BODY>、終わりは</BODY>を使って指定します。

BODY要素には従来から背景色などいくつかの属性を指定できます。しかし、これは将来のHTMLバージョンで廃止される予定です。現在のバージョンでも属性は指定できますが、スタイル・シートを使うことが推奨されています。

このテキストでは将来廃止される属性は極力使用せず、スタイルシートを使った文書体裁の指定を行います。

BODYの属性指定

BODY属性には次のものがあります。これらの属性は省略可能です。

属性 働き
bgcolor 文書の背景色
backgound 背景画像の指定
text 文字の色
link リンクの色
vlink 訪れたリンクの色
alink 選択されたリンクの色

次のように属性を指定します。

<BODY bgcolor="xxx" text="xxx" link="xxx" vlink="xxx" alink="xxx">

xxxには色の名前あるいは色の16進数のコードを入力します。

背景画像を指定するには次のように指定します。

<BODY background="xxxxxx">

xxxxxxは画像ファイルの名前です。

スタイル・シートでの指定

スタイル・シートはHTML文書の体裁を指定するものです。HTMLの本来の目的は文書の構造を指定するための言語で文書の見栄え、体裁を指定するためのものではありませんでした。しかし、ブラウザの開発者は独自に体裁を指定する属性を追加するなどして構造と体裁の指定が混在するようになり、HTML本体の意味から離れたものになってしまいました。そこでこの状況を改善するためにスタイル・シートが登場したのです。

スタイルシートは文書内のヘッド部や文書とは別のファイルに記述することができます。

たとえば、文書の背景を黒、文字を白にするには次のように定義します。

<!DOCTYPE HTML PUBLIC "-//W3C/DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>サンプル</TITLE>
<STYLE type="text/css">
BODY { background: black; color: white; }
</STYLE>
</HEAD>
<BODY>
<P>スタイル・シートを使った例です。背景が黒、文字が白になります
</BODY>
</HTML>

この文書を表示する。

スタイルシートを外部のファイルに持つことで持つ場合、ヘッド部のSTYLE要素の指定を次のように変えます。

<LINK rel="stylesheet" type="text/css" href="外部スタイル・シートのファイル名">

通常、外部スタイルファイルの拡張子には.cssを付けます。外部ファイルにスタイル・シートを持つことで複数のHTML文書で同一のスタイルを共有できます。また、スタイル・シートを用いることで体裁の指定は一ヶ所ででき、変更も容易に行えます。