HTML 入門
当サイトでは、将来的に JavaScript や VBScript を扱って行く予定です。 そこで、それらのスクリプトを挿入する先となる HTML 文書についても、 あらかじめ学習しておく事にしましょう。
最終更新日：2003.11.20
はじめに
WWW 上で公開する文書の基本である HTML 文書の作成方法については、 すでに多くの優れた指南サイトが、偉大なる先人達の手によって公開されています。
そこで、このコーナーでは HTML の仕様についての詳細な説明はあえてせず、 HTML 文書の作成方法について概要だけを説明する事で、 HTML の特徴的な部分を強調する事が出来れば‥と考えています。
HTMLとは何か概要を掴む
これからご紹介するリファレンス類を読む前に、次に列挙する HTML に関する土台となる考え方を覚えておくと理解が深まります。
- HTML 文書は、元となる文書に対して「タイトル」「見出し」「引用」といった役割や意味などの論理的な構造に関する情報が明示的に付け加えられた後のデータと言えます
- 論理的な構造に関する情報の追加は、仕様により定められた記述を加える事で行います。この論理的な構造に関する情報の追加を、マークアップと言います。HTMLという呼称は Hyper Text MarkUp Language の略から来ています
- この仕様は、W3C という団体により制定されています
また、次の用語及び雑学についても、あらかじめおさらいしておくと良いでしょう。
- Web（ウェブ）
- 蜘蛛の巣のような網状のモノ。しばしインターネットや WWW（World Wide Web）と同義語として使用される
- インターネット
- 世界各地の LAN を相互接続した TCP/IP プロトコルによる分散型ネットワーク
- WWW（World Wide Web）
- インターネットを利用した文書公開システム
- HTML（HyperText Markup Language）
- WWWでの標準の文書フォーマット
- HTML文書
- 上記の HTML の仕様に添って記述された文書
- ブラウザ（ Web ブラウザ）
- 何らかの情報源を閲覧・参照するためのプログラム。 WWW においては、Internet Explorer や、Netscape に代表される HTML 文書を閲覧可能なプログラムを指す。 W3C の仕様書では、WWW によるサービスに対して、ユーザの要求を代行するプログラムとしての位置づけから 文字・画像などを直接的に画面に表示するものを 「visual user agents （視覚系ユーザーエージェント）」。 点字出力や音声による読み上げを行うものや検索エンジンのロボット系プログラムは、 「non-visual user agents （非視覚系ユーザエージェント）」と表記されている。（※）
- ※当サイトでは、視覚系・非視覚系両方の特徴を備えたユーザーエージェントも有る事から、 必要と思われる箇所においてのみこの表記とし、視覚系ユーザエージェントを指す場合は、 「ブラウザ」と表記する事を基本とする。
- URI（Uniform Resource Identifiers）
- W3C による HTML 文書などリソースの保存場所に関する呼称。
リファレンスを読む
前記した通り HTML は W3C によって、その仕様が定められています。 まずは、その仕様書に目を通してみましょう。なお、最新の仕様は HTML4.01 となります。
- W3C／HTML4.01 Specification
- W3C の HTML4.01 仕様書です。HTML4仕様書邦訳計画 の皆さんの手による 日本語訳 も公開されています。
- ZSPC／SUPER HTML4.0 REFERENCE
- 大藤幹さまが運営する情報サイト ZPC の Web デザイン資料集のひとつとして公開されているリファレンスです。HTML4.01 との違いについても明記されているため、HTML4.01 のリファレンスとしても十分活用出来ます。
文書を作成する
〜はじめに文書ありき〜
公開したい文書が、構想段階だったり、紙ベースで準備されている場合は、 テキストファイルに起こす作業が必要です。
なお、保存する際にファイル名に指定する拡張子ですが、 仕様上の制限ではなく、慣例と、Windows などにおいて重要となる 拡張子による起動アプリケーションの関連付けに対応するために、 「.htm」または「.html」とする事をお勧めします。
テキストファイルを編集するには、エディタまたは、テキストエディタなどと呼ばれるツールを使用します。 詳しくは、こちらの記事「エディタ類のご紹介」をご参照ください。
マークアップする
文書が既にテキストファイルとして用意されている場合、HTML の仕様にそってマークアップを施します。
「HTMLとは何か概要を掴む」で書いた通り、HTML 文書とは、 元となる文書に対して、役割や意味などの論理的な構造に関する情報が付け加えられたものと言えます。
具体的には、「ココから、ココまでは、見出しです」といった情報を、 タグと呼ばれる記述を加えるコトで表現します。例えば、次のような周知目的の文書があったとします。
元となる文書
総務部より周知（No.1459）
平成15年10月1日 総務部
館内停電のお知らせ
来る平成15年11月1日、配線工事のため全館終日停電となる旨ご報告いたします。
注意事項
前日の退社時までに下記の作業を実施して頂くようお願いいたします。
OA機器の電源を切る
冷蔵庫の内容物を破棄する
本件に関するお問い合わせ先
総務部 立花英俊（電話：0XX-XXXX-XXXX）
上記の文書は、次のようにマークアップする事が出来ます。
マークアップの例
<h1>総務部より周知（No.1459）</h1>
<p>平成15年10月1日 総務部</p>
<h2>館内停電のお知らせ</h2>
<p>来る平成15年11月1日、配線工事のため全館終日停電となる旨ご報告いたします。</p>
<h2>注意事項</h2>
<p>前日の退社時までに下記の作業を実施して頂くようお願いいたします。</p>
<ul>
<li>OA機器の電源を切る</li>
<li>冷蔵庫の内容物を破棄する</li>
</ul>
<h2>本件に関するお問い合わせ先</h2>
<address>総務部 立花英俊（電話：0XX-XXXX-XXXX）</address>
マークアップの解説
- 開始タグ<h1>と、終了タグ</h1>に囲まれた部分が、見出しレベル１（最上位）の内容である事を表します
- 開始タグ<p>と、終了タグ</p>に囲まれた部分が、ひとつの段落の内容である事を表します
- 開始タグ<h2>と、終了タグ</h2>に囲まれた部分が、見出しレベル２の内容ある事を表します
- 開始タグ<ul>と、終了タグ</ul>に囲まれた部分が、リスト（番号付き）の内容である事を表します
- 開始タグ<li>と、終了タグ</li>に囲まれた部分が、リストの１項目の内容である事を表します
- 開始タグ<address>と、終了タグ</address>に囲まれた部分が、著者などこの文書に関する連絡先・問合せ先の内容である事を表します。 HTML 文書の場合はメールアドレスや著者のWebサイトのアドレスも含まれるでしょう。
上記のマークアップを済ませた文書に、 次の章でご説明する HTML 文書として必要な記述を更に加えたものがこちらです。 >>マークアップ後のサンプルを見る
このマークアップ後のサンプルを閲覧すると、多くの人が、 マークアップによって表現に変化が加えられている事に気が付くはずです。
ユーザエージェントによる構造情報の解釈と表現
Internet Explorer や Netscape などのブラウザには、 それぞれの要素に対して、文字の大きさが異なるなどの違いを持たせた 個別の表示形式が標準で用意されており、 閲覧者が視覚的に要素の違いや個々の意味を理解する手助けをしています。
また、音声読み上げブラウザなどは、それぞれの要素に対して 声色など音声の調子を変更するなどして 利用者に要素の違いや個々の意味を理解する手助けをします。
マークアップ以外に必要な情報
マークアップを終えたら、HTML 文書として完成させるために 更にいくつかの情報を加える必要があります。
HTML4.01 において、必須となる情報は次の通りです
文書型宣言
HTML 文書は、保存形式だけを考えると単純なテキストファイルでしかありません。 あるテキストファイルの内容が HTML 文書である事を、 それを解釈するブラウザに伝えるためには、テキストファイル内に何らかの情報を 含める必要が有るはずです。
その情報が「文書型宣言」と呼ばれる記述です。
タイトル
一般的に何らかの文書には、その内容を表すタイトル（題）が付けられるはずです。
「マークアップする」で挙げたサンプルの場合、 「停電に関するお知らせ」などと付ける事が出来るでしょう。また、 最上位の見出しとしてマークアップされている「総務部より周知（No.1459）」を、 そのまま使用しても良いかもしれません。
次の章では、これらの「文書型宣言」、「タイトル」を 具体的にどのように記述したらよいかを含めて HTML 文書の構造についてご説明します。
HTML 文書の構成
一般的な HTML 文書は、次のような構造となります。
| 文書型宣言 | HTML 文書である事の宣言。必ずファイルの先頭行から記述する | ||
|---|---|---|---|
| HTML 要素 | HEAD 要素 | META 要素 | 文書の著者や内容の説明や、使用されている文字コードの情報など |
| TITLE 要素 | 文書に付けられるタイトル | ||
| LINK 要素 | 外部ファイルへのリンク | ||
| BODY 要素 | (マークアップされた文書本体) | ||
HTML 文書の構造は、上記の表の通り 「TITLE 要素は HEAD 要素に含まれる」、 「HEAD 要素は HTML 要素に含まれる」といった具合に親子関係を持つ階層的な構造になっています。
各要素の詳細については次の通りです。
文書型宣言
「リファレンスを読む」にて記述した通り、 HTML の最新の仕様は HTML 4.01 です。
HTML 4.01 のリファレンスを元にマークアップを終えているのであれば、 その文書は HTML4.01 の仕様に沿ったものとして文書型宣言を記述する事が出来ます。
HTML 4.01 の文書型宣言には、厳密なるもの（Strict）、古い仕様から新しい仕様への移行に際し、 過去の仕様に沿った記述に対しても、それを吸収すべく用意された曖昧さを含むもの（Transitional）、 ブラウザの画面を分割して、それぞれに異なる文書（HTML文書とは限らない）を表示させる事が可能な フレーム分割機能を利用する HTML 文書のための（Frameset）という３種類が用意されています。
それぞれ、次のように記述します。
- HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">- HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">- HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
文書型宣言を記述する関する補足
- 文書型宣言は、必ず先頭となる行に記述します
- 文書型宣言の英字部分は、大文字で記述します
- URIの部分は、DTD（※）の保存場所が書かれていますが、この部分は省略可能です
※DTDとは、記述に関するルールが所定の様式にそって書かれているものです。
Strict と Transitional のどちらを選ぶべきか？
フレームセットを利用しない場合、文書型宣言に Strict か Transitional の何れかを選択する事になります。 これから新しく HTML 4.01 の仕様にそった HTML 文書を作成しようとしている人にとっては、 Transitional は意味の無いモノに思えるでしょう。
しかし、実際には、多くのサイトが Transitional を宣言しています。 これには、HTML 4.01 以前の仕様にそって作成された過去の HTML 文書を生かすためという 理由が有ります。
その他に Transitional を宣言する理由として、 無料のホスティングサービスを利用している場合など 文書作成者が変更出来ない広告表示用の１文を挿入されてしまうといった状況が 考えられます。このような形で提供された１文は、 HTML4.01 の仕様に沿ったものではないかもしれません。 文書作成者が、自分自身で変更出来ない記述を含める以上 Strict である事は保障されないでしょう。
HTML 要素
文書型宣言を除き、その他の HEAD 要素、文書本体である BODY 要素は全てこの HTML 要素の配下に含まれるものとして扱われます。 つまり、HTML 要素は子となる各要素にとって、共通する最上位の親となる要素として位置づけられます。
HEAD 要素
文書本体となる BODY 要素が、閲覧者に対して公開される直接的な情報を収納する場所である事に対して、 HEAD 要素は、ブラウザがコンピュータ内部での処理に用いる補助的な情報を収納する場所と言えます。
一般的に HEAD 要素には、 META 要素と呼ばれる文字コードや、 文書の内容を要約した簡単な説明文などの情報や、 文書のタイトルである TITLE 要素、 連続した複数の HTML 文書により全体が構成されている場合の他の HTML 文書との相関関係を表す LINK 要素などを記述します。
META 要素
META 要素は HEAD 要素内に複数記述する事が出来ます。 記述の仕方は次の通りです。
- サーバからの応答に際して処理されるもの（標準値の設定など）
- <meta http-equiv="レスポンスヘッダの名前" content="情報">
- 文書に関する情報の場合
- <meta name="情報の名前" content="情報">
いくつかの META 要素とそれらの記述例をご紹介します。
http-equiv="..."
- 文字コードの指定
- 例）シフトJISを用いて作成された HTML 文書である事を宣言する場合
- <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
name="..."
- 検索エンジン向けのキーワード指定
- 例）料理、お酒を扱うサイトにて「料理」と「お酒」というキーワードによる検索を期待する場合
- <meta name="keywords" content="料理,お酒">
- ※キーワードと文書の内容が一致していない場合も多い事から、 検索エンジンによってはこの指定が重要視されない場合も有ります。
- 文書の簡単な説明文
- 例）料理を扱うサイトに「管理人が好きな料理をご紹介するサイトです」といった説明文を指定する場合
- <meta name="description" content="管理人が好きな料理をご紹介するサイトです">
- ※検索エンジンによっては、この情報を検索結果に表示する場合が有ります。またブラウザによっては、 ブックマーク（お気に入り）に登録される際、追加情報の初期値として扱われる場合があります。
TITLE 要素
TITLE 要素は HEAD 要素内にひとつだけ記述します。記述の仕方は次の通りです。
- 例）HTML 文書のタイトルが「私的美味しいお店ベスト１０」の場合
- <title>私的美味しいお店ベスト１０</title>
メモ
タイトルは、ブラウザによってはウインドウタイトルやブックマーク（お気に入り）に登録する際の項目名に使用される場合があります。
LINK 要素
LINK 要素は HEAD 要素内に記述します。記述の仕方は次の通りです。
link rel="..."
- index（索引の指定）
- 例）閲覧中の HTML 文書に対して「索引」となる HTML 文書 index.html を指定
- <link rel="index" href="index.html">
- contents（目次の指定）
- 例）閲覧中の HTML 文書に対して「目次」となる HTML 文書 contents.html を指定
- <link rel="contents" href="contents.html">
- next（次ページの指定）
- 例）閲覧中の HTML 文書に対して「次のページ」に相当する HTML 文書 page2.html を指定
- <link rel="next" href="page2.html">
- prev（前ページの指定）
- 例）閲覧中の HTML 文書に対して「前のページ」に相当する HTML 文書 page0.html を指定
- <link rel="prev" href="page0.html">
- start（先頭ページの指定）
- 例）閲覧中の HTML 文書に対して「先頭のページ」に相当する HTML 文書 page0.html を指定
- <link rel="start" href="page0.html">
メモ
これらの HTML 文書同士の相関関係については、 いくつかのブラウザが、ショートカットキーを対応させています。 例えば Windows 版 Opera 7.x では、[Shift]+[Ctrl]+矢印キーで次のページ、 前のページへ遷移させる事が出来ます。
また、ナビゲーションバーに該当するリンクを表示させる事が出来ます。
BODY 要素
BODY 要素は、いわゆる HTML 文書本体となります。HTML 要素の中に記述します。
既に「マークアップする」でサンプルなどを挙げましたが、 もととなる文書に、論理的な構造を表すためにタグと呼ばれる記述を挿入する事でマークアップしたものが、 この BODY 要素の内容となります。
一般的な文書を想定した時、その構造は決して複雑ではありません。 ほとんどの文書が次に挙げる主要なタグでマークアップする事が出来るはずです。 慣れるまで手間と感じるマークアップも、やがて単純な作業に思えるようになるでしょう。
文書の各要素と論理構造を表す基本的なタグの対応
- 見出し-> h1〜h6
- 本文の各段落-> p
- 引用-> blockquote
- リスト-> ol または ul または dl
- 表 -> table
- 他のHTML文書などへのリンク及びアンカー -> a
BODY 要素において使用可能なタグの記述の仕方については、 「リファレンスを読む」にてご紹介している 「W3C／HTML4.01 Specification」 （日本語訳）や、 「ZSPC／SUPER HTML4.0 REFERENCE」を ご参照ください。
HTML文書サンプル
これから HTML 文書を作成する場合に、文書本体を除いた土台となる部分を記述したサンプルをご紹介します。
日本語で書かれた HTML 文書で、文字コードにはシフト JIS を用いている場合の例です。 それらの情報を、２行目（<html lang="ja">）、４行目（<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">）で 各要素の属性値として指定しています。
HTML文書サンプル
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>文書のタイトル</title>
</head>
<body>
文書本体
</body>
</html>
最後に
このコーナーでは、文字の色など外観についての指定方法や、 JavaScript などの付加的な機能について触れていません。
これは HTML が文書の公開を基本として作られている事から、 マークアップという基本機能に特化している点を強調するためです。
しかし、2003年11月現在、多くのユーザに利用されている主要なポータルサイトでは、 文書ではなく、目的の機能を実行するための操作パネルという 有り方でページが構成されています。またそれらはパソコンの操作に不慣れな人にも、 十分な利便性を提供するために様々な工夫が凝らされており、 技術的にも既に円熟したものになっている感があります。
このような現状を踏まえた上で、外観の指定方法や JavaScript については、 コーナーを改めて皆さまにご紹介したいと考えています。