HTMLの思想 - シークの日記

そこら中に書きまくっていますが、はてなでは書いていなかったので一度記しておくことにします。
HTMLは、HyperText Markup Languageの略です。したがってHTML言語と言うと重言です。HTMLはSGMLを利用して、ウェブ上でハイパーテキストを実現するために作られました。
HTMLは、テキストにタグによるマークアップを施すことで意味づけを行う言語です。HTMLにおける一つ一つの意味づけを要素と呼びます。例えば、タイトルはtitle要素であり、段落はp要素であり、見出しはh1,h2,…,h6の各要素です。過去においては、見栄えを表す要素^*1もありました。しかし最新のHTMLであるHTML4.01 Strictにおいては、見栄えを表す要素はほとんど削除されました。太字を表すb要素や斜体を現すi要素など、よく使われる一部の要素は残されています。タグは、要素の開始と終了を示す記号です。<要素名>要素内容</要素名>という書式で記述されます。
HTMLは、プレーンテキストに対して基本的な要素を指定してやるだけで書くことができます。ブラウザは、それだけの指定でも適当な見栄えに整えてくれます。ブラウザのこのような機能をレンダリング機能と呼びます。フレームを利用したHTMLを除き、HTML文書は大きく二つの要素に分けられます。それは、head要素とbody要素です。また、HTMLはドキュメントタイプの指定を除き、すべてhtml要素に含まれる形となります。なお、htmlタグは省略可能です。ドキュメントタイプとは、HTMLのバージョンの記述です。HTMLには1.0から始まる複数のバージョンが存在するため、最初にどのバージョンを使用するのか指定する必要があります。
head要素には、主にmeta要素によるメタ情報とtitle要素によるタイトルを記述します。このうち、必須なのはtitle要素のみです。headタグは省略可能です。
body要素は、本文を表します。レンダリングの結果、このbody要素の内容がブラウザによって解釈され、表示されます。ただし、body要素だけでなくhead要素を解釈してそれなりの表示をするブラウザもあります。bodyタグも省略可能です。
ここまで省略可能と述べてきたタグは、省略しないことを勧められていますが、省略しても間違いではありません。また、HTMLのバージョンを示すドキュメントタイプも、省略しないことが勧められていますが、省略された場合はHTML2.0と解釈されることになっており、一応間違いではありません。したがって、かなり極端な例ではありますが、以下のHTMLは正しいHTMLということになります。

<title>シークの日記</title>
<h1>HTMLの思想</h1>
<p>HTMLはHyperText Markup Languageの略です。</p>

これだけなら、難しいと感じる人はおそらく少ないでしょう。このHTML文書を雛形にして、省略したタグや宣言を付け加えると以下のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>シークの日記</title>
</head>
<body>
<h1>HTMLの思想</h1>
<p>HTMLはHyperText Markup Languageの略です。</p>
</body>
</html>

このように、HTMLとは本来シンプルなものです。特に最近は、見栄えと意味づけの分離が叫ばれているためなおさらシンプルになりつつあります。これだけの内容をメモ帳か何かで書くだけということで、決して難しいことはないのです。したがって、HTMLエディタと呼ばれるソフトが数多く出回っていますが、普通にHTML文書を記述する限りでは必要ないと思われます。
問題となるのは見栄えです。誰だって優れたデザインのウェブページを作りたいと考えるでしょう。昔は、見栄えを記述するために、HTMLの要素ごとにさまざまな属性が用意されており、その属性を駆使して見栄えを整えていました。しかし、本来意味づけを行うためのHTMLでデザインを行うことにはかなりの無理があり、表現内容も自ずと限られていました。そこで、スタイルシートを利用したデザインが考えられるようになりました。
スタイルシートとは、要素ごとの表現ルールを決めるための文書です。HTMLに適用するためによく使われるCSSの場合、HTMLと同様にテキスト形式で書くことが可能です。また、複数のCSSを同時に適用できるという特徴もあります。CSSを利用したデザインは、HTMLの属性を利用したデザインと比べてシンプル、簡単でなおかつ柔軟性が高いという特長があります。欠点としては、極端に古いブラウザの場合対応していなかったり、対応状況が中途半端で思い通りの動作をしないということが挙げられます。

*1:フォントを表すfont要素など。