HTMLとCSSの概念

私の大学は、来年から必修の授業で本格的にWeb制作の基礎を教えることになって。
Web制作で食っていく身としては、本当に嬉しく、うらやましい限りです。

今後につながるようにWeb制作に関するレクチャーを行うには、テーブルレイアウトなんかじゃなく、HTML＋CSSのWeb標準的情報は必須になってきます。

この、HTML＋CSSでWebサイトを構築するのはけっこう難しくて、
「どうしてHTMLとCSSを分けるの？」とか、
「どうしてstrongタグなの？font-weight: bold; で太字っぽくできるじゃん。」とか、
基本的な概念から説明する必要があります。

ということで、基本的な概念をまとめてみる。

---

まず、HTMLというものは、文章の構造を明確にするために作られたものです。
特に、人間ではなくコンピュータに対して、文章構造を示すためのものです。

h1は、headline1（見出し1、つまり大見出し）の略。
pは、paragraph（段落）の略。
strongは強調。
などなど、これらのタグを使って、コンピュータに文章構造を分かってもらうためのものです。

どうしてコンピュータに文章構造をわかってもらう必要があるのか？というと、GoogleやYahooなどの検索エンジンは、見出しや、強調している部分などをキーワードとして読みとり、検索結果として表示してくれます。

おおざっぱに言うと、検索エンジンにヒットしやすくなるってことです。

文章構造がしっかり組み立てられていると、検索エンジンはWebサイトがどのような内容が書いてあるコンテンツなのか、判断することができます。

ただ、きちんと見出しがあって、段落があって、というWebサイトは、確かにHTML文書としては正しいものになりますが、味気がないのも確かです。
タグを入れただけでは、文字のサイズも見にくいし、行間も狭いし、色味もありません。
文書としての役割は確かに果たしていますが、現在ほとんどのWebサイトは、もっとカラフルですよね。

少し前までは、このそっけない文書を装飾するために、装飾用のHTMLタグががんがん使われていました。
HTMLは文章構造を明確にするためものだ、という根本的な存在理由が忘れられ、HTML文書が広告的効果の期待できるメディアとして使われていました。そのため、文章構造とは関係のない、装飾するためだけのタグが追加されていったのです。

そして、これはHTMLの本来の使い方ではない。ということで、CSSが生まれました。

CSSは、HTMLを装飾するための言語です。
ブラウザのデフォルトでは、strong（強調）タグをつけると太字になります。
この部分を、強調してることを示すために、赤字にしたいな。となったとき、CSSで指定をすれば、HTMLに触らずに、つまり文章構造を壊さずに色を変えることができます。

たとえば、人間は赤色を、「なんとなく強調されてる感じ」と理解しますが、コンピュータにとって赤色は「赤色」です。それ以外の意味はありません。
strongタグをつけた場合は、コンピュータにとっては「強調されてる」とわかりますが、人間にとっては「なんか太字になってるから強調されてそうだけどインパクトがない。」感じになります。

そこで、CSSを使ってstrongタグを赤色にする、といった指定を入れると、コンピュータにも人間にも強調されてるということがわかるということです。

個人的には、HTMLはコンピュータのための（文章構造を示す）言語で、
CSSは人間のための（装飾的表現をする）言語だと思ってます。

---

うーん。
説明あってるんだろうか。

とにかくまとめると、HTMLは文章構造を記述するための言語なんですと。
広告でもないし、DTPでもないんだと。

この点を理解してもらうのはけっこう難しい気がする。
ダメ出し待ってます。