一言で言うならば
HTMLとはHyper Text Markup Languageの略で、みなさんがご覧になっているこのページも含め、ホームページのほぼ全てがHTMLという言語で書かれています。HTMLを一言で言うならば、
- SGMLのDTDのひとつ
です。これだけでピンと来た人は、おそらくこの先を読む必要はないでしょう。SGML (Standard Generalized Markup Language)というのは、文章に「タグ」と呼ばれる文章の性格(論理的な意味合い)を表す記号を付けて記述する方法を定めた標準のことです。そのタグの種類を定めたものをDTD (Document Type Definition)といいますが、HTMLはこれのひとつです。
かつては、様々な独自使用のHTMLが氾濫し、ブラウザーによって表示されたりされなかったりといった具合に、非常に困った状態にありました。現在では、W3C (World Wide Web Consotium)が勧告を出し、世界中がそれに従うように推奨されています。つまり、W3Cの定めたHTMLを使えば、より多くのブラウザーで正しく表示されるページを作ったことになります。
ルールは簡単
理屈はさておき、実際にHTMLで書かれた物を見ていただきましょう。
<HTML>
<HEAD>
<TITLE>HTML is very easy!!</TITLE>
</HEAD>
<BODY>
<H1>HTMLは簡単です</H1>
<P>HTMLなんて、誰でもすぐ書けるようになります。安心してください。</P>
<P><IMG src="img/sample.gif" alt="[サンプルの絵]" /></P>
<UL>
<LI>簡単に覚えられる。</LI>
<LI>そして、便利。</LI>
</UL>
</BODY>
</HTML>
いかがでしょうか。ややこしそうに見えても、実は簡単なルールがあります。
- "<" (less than)と">" (greater than)で囲まれた部分がタグ。
- タグは"<要素名>"で始まり、"</要素名>"で終わる。
- 終了タグがない場合は"<要素名 />"と表記する。*1
- タグで囲まれた部分の特徴付けは、"<要素名 属性名=属性値>"と指定する。
- 要素名と属性名は、大文字でも小文字でも構わない。*2
*1 : これは正確にはXHTMLのルールですが、この方がわかりやすいので、このように覚えておいてください。XHTMLはHTMLと互換性があります。
*2 : ここではわかりやすいように、要素名を大文字、属性名を小文字に統一しています。ただし、XHTMLでは大文字と小文字が明確に区別されていて、要素名も属性名もすべて小文字で書かなければいけません。
HTMLは文章に性格を付けている
では、今度は各タグ間の関係を見てみましょう。上の例を図で表すと、こんな感じになります。
文章全体は<HTML>で囲まれています。この文章全体にHTMLという性格が付けられたわけです。その次に<HEAD>で囲まれた部分と、<BODY>で囲まれた部分があります。それぞれヘッダーと本文という性格が付けられたわけです。さらに見ていくと、<TITLE>で囲まれたタイトルや、<P>で囲まれたパラグラフ(段落)や、<UL>で囲まれたリストなどがあります。
このように、タグを付けていって、文章をある単位で性格付けしていくことが、すなわちHTMLを書くことなのです。SafariやGoogle Chromeのようなブラウザーは、その性格付け(タグ)に合わせてレイアウトをし、きれいに表示してくれるわけです。つまり、私達は情報として残したい文章に性格付け(タグ付け)をするだけで、ワープロのようなレイアウト修正から解放され、内容の充実に力を注げるわけです。
HTMLとCSSで役割分担
ちなみに、それぞれの性格(タグ)をどのように表示するかというデザイン情報は、CSS (Cascading Style Sheets)で定義します。ちょっと難しい表現をすると、HTMLとCSSは以下のような役割分担になっています。
- HTML : 論理的情報 (見出し、段落、箇条書き というような意味)
- CSS : 物理的情報 (灰色、ゴシック体、18pt、左寄せ というような表示方法)
HTMLには論理的情報だけを書き、CSSを使ってデザインを変更するようにすると、HTMLが非常に簡潔になります。ブログの文章はそのままに、デザインだけを簡単に切換えられるのは、CSSだけを切換えているからです。
理屈もこれくらい書くと、いいかげん飽きてきますから、早速、HTMLで文章を書く方法を、具体的に説明しましょう。