コンピュータの世界は常に日進月歩であるが、インターネット上のウェブページ（いわゆるホームページ）もその例外ではない。 ウェブページを記述するために多く利用されるHTMLという言語も、かつてはホームページ作成ソフトに頼らなければならないほど煩雑であったものが、今や誰でも簡単に書けるほど洗練され、便利なものになりつつある。 ここではHTMLの概要を述べた上で、その記述方法を学んでいこうと思う。
HTMLとは、Hyper Text Markup Languageの略である。 これを日本語でそのまま表すならば、「ハイパーテキストに印付けするための言語」ということになる。 これでは何のことやらさっぱりわからないので、もう少し詳しく説明しよう。
まずはハイパーテキストについてだが、インターネット上においては、ある文書と別のある文書の連携が不可欠である。 これは「ハイパーリンク（或いは単にリンク）」という機能により実現されている。 NetscapeやInternet Explorerなどのウェブブラウザで、マウスをクリックすると別のページに移動するのは、このハイパーリンク機能によるものだ。 ハイパーテキストとは、このハイパーリンク機能を持ったテキストのことを指していうものだ。
次に印付けについてだが、これは文書を構造的に記述するために不可欠なものである。 構造的というと難しく受け止められるかもしれないが、要するに文書を題名や見出し、段落などといった要素にわかりやすく区分するということだ。 こういったことは、一般の書籍などでは文字の大きさや種類などで視覚的に区別しているが、HTML文書は基本的にテキスト形式ファイルなので、文字属性は持たない。 そこで、HTMLでは「タグ」と呼ばれる記号によって要素を明示する。
長々と説明したが、詰まるところHTMLとは、単なるテキストにハイパーリンク機能とタグが付加されたというだけの代物である。 決してプログラミング言語のような大それたものでもないし、ウェブブラウザに対して表示方法を命令するほど偉くもない。 言語とはいっても、ワープロ文書を作成するのと同程度と思っていただいて結構だろう。
HTML文書を記述するにあたって注意すべきことがある。 HTML文書は視覚的な情報を一切持たない、いや持てないという点だ。 おや？と思われるかもしれないが、これは事実なのだ。 確かに世に溢れるウェブサイトの中には、HTMLに強引にレイアウト情報を埋め込んでいるものもあるが、これは過去の規格に基づくものであり、現行の規格では非推奨もしくは廃止されている。 ではレイアウトはどうやって行うのかというと、スタイルシートと呼ばれるものを用いるのだが、これについては後述する。 とにかく、HTMLはあくまで文書の構造を明示するものであって、レイアウトとは切り離して考えていただきたい。
さて、こんなシンプルなHTML文書を記述するために必要なのは、テキストエディタのみである。 最初のうちはそれこそOS付属のものでも問題ないだろう。 シンプルな言語だけに、必要な道具もこれ一つで十分なのである。 何もホームページ作成ソフトやら、HTMLエディタなる専用のソフトウェアを用意することはない。
かなり端折ってはいるが、ひとまずHTMLについての大まかな説明は終わりにして、実際のHTML文書を見てみよう。 次の例文をご覧いただきたい。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>簡単な例文</title> </head> <body> <h1>簡単な例文</h1> <p>HTMLは非常に簡単です。 </p> </body> </html>
いかがだろうか。 たった11行の短い例文だが、これでも立派なHTML文書である。 まだ意味がわからない部分が多かろうが、中でも「<>」という記号に囲まれた文字列が初心者には難解なのではないだろうか。 だが、逆にいうならこの部分のみがHTML特有の部分であり、それ以外は普通のテキストと何ら変わりはない。 そこで、まずはこの部分について詳しく説明しよう。
さて先述の通り、タグとはHTMLにおける文書の要素を表すための記号だ。 そして、この「<>」に囲まれた文字列こそがタグの正体なのである。 タグには開始タグと終了タグがあり、それぞれ「<要素名>」、「</要素名>」と記述する。 つまり、一部の例外を除けば、一つの要素は「<要素名>要素の内容</要素名>」として表される。 例外とは、要素の内容が存在しない場合のことで、img要素が代表的だ。 img要素は画像を埋め込むための要素であり、詳しくは後述する。 さらに要素には、属性を設定できるものがある。 属性は開始タグの中に「<要素名 属性名="属性">」と記述する。
例文を見て既にお気づきかもしれないが、HTMLの要素は例外なく入れ子式となっている。 入れ子とは、数式の括弧を想像していただければわかるだろう。 例えば、「<p>これは<em>段落</em>です。</p>」は正しいが、「<p>これは<em>段落です。</p></em>」は正しくない。
HTML文書において、改行は意味を成さない。 例えば、「<p>これは（改行）段落です。</p>」としようが、「<p>これは段落です。 </p>」としようが、全く同じことなのだ。 ただ、タグに関しては途中で改行すると不具合が生じる場合があるので、これは避けるべきだ。 一般的には、例文のようにタグとタグの間で改行したり、長いテキストの句読点で改行したりすることが多い。
HTML文書において、半角文字と全角文字は明確に区別される。 まず、タグに使われる「<>/"=」などの記号は必ず半角で記述しなければならない。 また、要素名や属性名も半角のアルファベットで記述する。 大文字と小文字の区別はないが、最近の動向を見た限りでは小文字で記述するのが望ましい。 なお、「"」で囲まれた属性の部分に関しては、この限りではない。
HTMLの大体の特徴はおわかりいただけただろうか。 それでは、今度は先程の例文を1行ずつ解説していこう。
ここまでHTML文書の記述方法を一通り学んできたが、この状態のままでウェブブラウザに表示させると、何とも味気ないページになってしまう。 そこで、ごく簡単ではあるがスタイルシートの説明をしておこう。 ただし、今回はあくまでHTMLの解説が主体なので、説明はごく一部にとどめさせていただく。 スタイルシートに関するより詳細な文献は、WWW上で多数見られるので、そちらを参照して頂きたい。
さてスタイルシートとは、文書のレイアウトを定義するものである。 HTML文書に適用するスタイルシートとしては、一般的にはCSS（Cascading Style Sheets）と呼ばれるものが多用されている。 CSSを用いるとHTML文書の指定した要素に対し、一貫したレイアウトが適用されるため、簡便かつ効果的なデザインが可能となる。 では、何はともあれ実際のCSSを見てみよう。
@charset "Shift_JIS";
h1 {
color: white;
background-color: black;
text-align: center;
}
まずはこれだけ記述して、先程のHTML文書と同じディレクトリに「style.css」という名前で保存してみよう。 そして、HTML文書のhead要素に次の各文を追加する。
<meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css">
ここまでの作業が終了したら、ウェブブラウザでHTML文書を読み込んでみよう。 いかがだろうか。 h1要素の背景色が黒に、前景色が白に、また文字が中央寄せになっているはずだ。
このように、CSSを用いるとHTML文書の指定した要素に対し、フォントの色や大きさ、配置はもちろんのこと、文字間隔や枠の指定など、様々なレイアウトを適用することができる。 今回詳しい説明ができないのは残念だが、本格的にウェブページを製作してみたいという方は、WWW上の文献を参照してみてはいかがだろうか。
次に示す要素は、HTMLの全体構造を表すものである。
ブロック要素とは、HTMLの文書構造の大枠を表すものである。 その内容には他のブロック要素や後述するインライン要素およびテキストを含む。
インライン要素とは、個々のテキストを修飾するものであり、必ずブロック要素内に配置される。 その内容には他のインライン要素やテキストを含む。
HTMLの概要とその記述方法について駆け足で説明してきたが、いかがだろうか。 ウェブ上のいわゆるホームページ作成講座をご覧になったことがある方ならば、たったこれだけなのかと不満に思われるかもしれない。 だが、HTMLに限って言うならば、これだけ理解していただければ十分すぎるほどである。 ここで解説したHTMLの特徴といくつかの要素に加え、必要があればリストやフォームなどの高度な要素を覚え、スタイルシートを利用できれば、立派なウェブページを公開できるほどのレベルにまで到達できるはずだ。