HTML入門　−HTML文書とは何なのか−

HTMLの特徴

　HTMLそれ自体はプレーンなテキストファイルである［注2］。この場合の「テキスト」は狭義のテキスト、つまり普通の「文章」という意味合いより幅広く、書式を受け持つ「タグ」と「文章」の混在の総称となっている（タグは半角英数字に限られるが、それ自体も人間が読めるという意味で、テキストに他ならない）。HTML文書は、ブラウザで見ると、タグは隠ぺいされ、文章だけが表示される。HTML文書をエディタ（テキストエディタ）で開けば、タグと文章の全てが表示される。ある意味、タグはブラウザが読むために、文章は人間が読むためにある。

　HTML文書には、読む文章に加え、「画像（図）」と「リンク」という要素がある。リンクとは、別ファイルとの関係を指定できるという事である。HTML文書とHTML文書はリンクで結ぶことが出来る。
　この場合の「結ぶ」とは、ジャンプできるという事だが、HTML文書と画像ファイルを結ぶ場合、ターゲットの画像をHTML文書内に埋込む事もできる（実際に埋込まれているのは画像用のタグで、埋込み表示はブラウザの機能である）。画像が扱える故に、HTMLは標準文書として万能たりうるものとなった、と言っても過言ではない。

　命題２ではタグが消えているが、実際のところ、タグは文章・画像・リンクの全てを実現するために陰で働いている。

HTMLの基本

　HTMLの基本は文章（以下、単にテキスト）である。テキストは自ずと構造を持っている。つまり、文書タイトル、見出し、本文、段落などである。見出しには、章・節・項といった階層性がある。こうした構造をタグで指定していくのが、HTMLの編集に他ならない。［03.7.8文書タイトル挿入］

　ここでは文書タイトル・章・節・項と、見出し1〜4を対応させたが、これは決まりでも何でもなく、例えばの話である。ちなみに、見出しの階層はh6まで用意されている。具体的にHTMLのソースを示してみよう。

　つまり、本文は段落を<p>と</p>でくるんでやればよい。見出しは、適当な階層を選んで、例えば<h2>と</h2>でくるんでやればよい。

　ところで本ページのh2は、今ご覧のように青地に白字で表示されているが、それは、そうした物理的書式を別に指定しておいたからである。物理的書式の別指定は、スタイルシートと呼ばれる手段である。

スタイルシート

　タグの標準的な物理書式（表現形）は、ブラウザによって定まっている。つまり、特に指定しなければ、その標準書式が適用される。

　書式を変えて表示するスタイルシートは、具体的には下記のようなものである（例：h2）。

　これを全部解説すると複雑な話になるので省略するが、例えば青地は、background-color: #222255で表示されている。background-colorは文字通り、背景色。#222255は色の指定で、この番号だと、まあこういう色になるという事である。数字は0からfまで使える（16進数だから、9の上はa・b・c・d・e・fである）。#000000は黒で、#ffffffは白である。

読みやすい本文

［03.6.21］大昔のHTMLの文章は読みづらかった。その理由は、

• 行間が詰まっていた。
• 左右に余白が無かった（本なら、上下左右に余白があるのに）。

　いずれの点も、スタイルシートの適用で解決できるようになった。行間を開けるには、line-height を指定してやればよい。200%なら１行開けになる。実際は150%くらいが読み易いようである（好みだが）。余白は、margin で任意に指定できる。まあ、今ご覧のような具合である。

　また背景色が白の場合、ディスプレイによっては眩しいことがある。僅かに背景色をつけると、目にやさしい表示になる。ちなみに今ご覧のものは、背景色を#eeeedd にしている。

HTML制作の取っ掛かり

　HTML制作は、文章の用意から始まる。段落の冒頭は、全角スペース（空白）で頭下げしておく［注3］。見出しをセンタリングするためにスペースを使っていたら、それは削除しておく必要がある（センタリングはスタイルシートで指定する問題である）。またインデントのためのスペースも邪魔なだけである（インデントもスタイルシートで指定する問題である）。

　改行の次の行の冒頭がスペースだったら、これを段落とみなして冒頭に<p>を付加する（pの終了タグはHTMLでは省略可能）。見出しは、その階層に適した見出しタグでくるんでやる。実際には、hとpで済まない数多くのタグや約束事があるが（スタイルシートの解説も省略したけれど）、取っ掛かりとしては以上のような事である。ファイル名は半角英数字とし、拡張子は.htmか.htmlにしておくこと。

［03.7.10］なおHTML最新標準への対応は、市場の実勢を考えると（ブラウザのバージョン毎のシェア）、かなり控えめなものにすべきだろう。

注1

例えば、いわゆる「ブラウザ」は、仕様上は「ユーザーエージェント」である。この手の話はきりがない。［03.7.10］

注2

プレーンテキストとは、フォントや文字サイズ等の書式情報を（自らは）持たないテキスト（ファイル）のことである。実際に表示するフォントやサイズは、テキストを編集するエディタの設定に依存する。エディタは一般に全テキストを単一のフォント＆サイズで表示する。また、エディタは、ワープロと違って頁概念を持たない。一つのファイル内のテキストは、巻物状に一連のものとなっている。
　エディタの方が（ワープロと比較して）シンプルかつ高速に作動するし、テキストファイルには扱い易い点が多々あるので、エディタの常用を勧めたい。［03.6.17修正］

注3

DTPでの利用を考えると、全角スペースを入れた方が都合がよい。英文なら、タブ設定がよいだろう。［03.7.10］