Web プログラマになる

:: be web programmer ::

▽ HTML 基礎・実践編
ページの基本的な構成
文章に改行を入れる
表を作成する

ページの基本的な構成

HTML は、階層構造になっています。

html 要素が最初の要素になり、その中に head 要素や body 要素が入り、またその中に他の要素が入る形になります。

階層  [1]         [2]         [3]

      html ──┬ head ──┬ base
               │          ├ link
               │          ├ meta
               │          ├ script
               │          ├ style
               │          └ title
               ├ body ──┬ ブロックレベル要素 / インライン要素
               │          ├ del
               │          ├ ins
               │          └ script
               └ frameset ┬ frame
                           ├ frameset
                           └ noframes

head 要素は、ページのヘッダ情報を表します。
html 要素内の先頭に一つだけ使用できます。

通常は、head 要素内の title 要素にページのタイトルを指定します。

指定したタイトルは、ブラウザのタイトルバーやブックマーク（お気に入り）のタイトルなどに使用されます。

body 要素と frameset 要素は、どちらか一方を使用します。フレームを使用する場合は frameset 要素を使用し、それ以外は body 要素を使用します。

普通のページ（フレームなし）を HTML にすると、次のようになります。

<html>
 <head>
  <title>ページのタイトル</title>
 </head>
 <body>
  ページの本文
 </body>
</html>

これがページの基本的な構成です。
この状態で HTML の文書になりますが、まだ完成ではありません。

html 要素の前に <!DOCTYPE> タグを追加する必要があります。

●文書型の宣言

<!DOCTYPE> は、HTML の文書型を宣言するタグです。

書式は次のようになります。

書式 1) <!DOCTYPE HTML PUBLIC "公開識別子">
書式 2) <!DOCTYPE HTML PUBLIC "公開識別子" "システム識別子">

公開識別子     … 文書型の種類
システム識別子 … 文書型定義（DTD）の場所

公開識別子の前に PUBLIC が指定してあれば、システム識別子を省略できます。

公開識別子は、HTML のバージョンによって変わります。

HTML は、「HTML 2.0」、「HTML 3.2」、「HTML 4.0」などのバージョンがあります。
今のところは HTML 4.0 が主流ですので、このバージョンで説明していきます。

HTML 4.0 には、３種類の文書型があります。

Strict DTD
Transitional DTD
Frameset DTD

文書型によって、使用できる要素や属性が異なります。

(1) Strict DTD

Strict DTD の文書型宣言は、次のとおりです。

≪完全形≫

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

≪省略形≫

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

Strict DTD は、廃止予定の要素と属性を使用できません。
また、フレーム関連の要素も使用不可です。

さらに、要素の配置や順序に厳しい制限があります。
（body 要素の直接の子要素としてインライン要素を使用できません）

他の２つと比べて、より厳密（Strict）な文書型です。

▼ Strict DTD の特徴

廃止予定の要素と属性を使用できない
フレーム関連の要素を使用できない
要素の配置や順序に厳しい制限がある

(2) Transitional DTD

Transitional DTD の文書型宣言は、次のとおりです。

≪完全形≫

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

≪省略形≫

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

Transitional DTD は、廃止予定の要素と属性を使用できますが、フレーム関連の要素は使用できません。

要素の配置や順序の制限は、Strict DTD よりも緩やかになっています。
（body 要素の直接の子要素としてインライン要素を使用できます）

Strict DTD への過渡期（Transitional）に使用する文書型です。

▼ Transitional DTD の特徴

廃止予定の要素と属性を使用できる
フレーム関連の要素を使用できない
要素の配置や順序に緩やかな制限がある

(3) Frameset DTD

Frameset DTD の文書型宣言は、次のとおりです。

≪完全形≫

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

≪省略形≫

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

Frameset DTD は、フレームを含む全ての要素と属性を使用できます。

要素の配置や順序の制限は、Transitional DTD と同じです。
Transitional DTD にフレーム関連の要素を追加した文書型です。

▼ Frameset DTD の特徴

フレームを含む全ての要素と属性を使用できる
要素の配置や順序に緩やかな制限がある

普通のページであれば、Transitional DTD で問題ありません。

html 要素の前に文書型宣言を追加して、HTML 文書の完成です。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
          "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
 <head>
  <title>ページのタイトル</title>
 </head>
 <body>
  ページの本文
 </body>
</html>

なお、<!DOCTYPE> は SGML のタグです。
HTML の要素を表すタグではありません。

※SGML … HTML のもとになった言語（標準一般化マークアップ言語）

Web プログラマになる最初のページへ

このページの一番上へ