kuma Diary

_ Web標準

昨日の車内でマァいろいろと雑談していたんですが、その中でhtmlの話をちと解説しようかと。

そもそもhtmlとは(と、大上段に構えて話せるほどの知識もないですが)研究論文などをどのようなコンピュータ環境でも読め、さらにリンクを用いて自由に結びつけ拡張できるようにと開発されたものです。ここで注意するのはhtmlは文書構造を機械(コンピューター)でも理解分析できる為に作られており、現在あるHPのように様々な視覚表現を表示させることは目的とされてなかったことです。

ところが、90年代後半あたりからNNとIEとのいわゆるブラウザ戦争が始まります。この前後あたりから、それぞれが表現力を競うために独自のタグを作っていきました。例えば<font>タグなどです。しかしこれらは直接文書構造を示すものではなく、いわゆる表現を示すものでした。

現在ではhtmlは構造を示し、表現についてはcssを使用するようになっています。html4.0ではfontタグなどは非推奨要素となっており、来年には策定される予定のhtml5では廃止されています。

で、具体的にはどういうことかというと、

「ともりん先生は2008年にJR全線完全乗車を達成した」という文章を、「JR全線完全乗車」を強調したいと思い、文字を赤字にしようとした場合、fontタグを用いれば

　ともりん先生は2008年に<font color="red">JR全線完全乗車</font>を達成した

と表記します。しかしこれだとJR全線完全乗車の部分は強調されたのかただ単に目立たせたいのか逆に目立たせたくないのか(少なくとも機械は)理解できません。

htmlにおいて強調を意味するタグはemまたはstrongです。強調の意味を持たせた上で赤字で表現するならばcssを使用し、

　ともりん先生は2008年に<em style="color:red;font-weight:normal;font-style:normal;">JR全線完全乗車</em>を達成した

となります。

両方を並べてみましょう

　ともりん先生は2008年にJR全線完全乗車を達成した

　ともりん先生は2008年にJR全線完全乗車を達成した

どちらも同じ表示になりますが、htmlとしての意味合いは全く違うというのが理解してもらえたかと思います。

ちなみに協調などではなく、単純に文字色を変えたいときにはspanタグを用います。spanタグ自体には特に文書構造上の意味はなく、文書内の「ここからここまで」を示している、といった理解でいいと思います。上記htmlのemをspanに置き換えた形になります。

ちなみにhtml5では文書構造がより明確に表現できるようになります。

HPのレイアウトでみると、以前はtableタグで組んだりしましたが、これは本来表を示すタグであり、現在はdivタグが使われています。しかしこれもspanタグと同じく範囲を表わすだけであり、これがhtml5ではheaderやfooder、sectionといったタグができることで各部分が持つ意味合いを構造的に明確にすることが可能になります。

ついでに、これは直接htmlにかかわる話ではないですが。

文章を書き表す際、一行を何文字にすればいいか。通常は40文字前後と言われています。これは目の動きに合わせたものなのですが、HPでも同じでデザイン上文字を小さくするのであれば横方向の幅を狭めるなどで一行が長くなりすぎないように措置を取る必要があります。

個人的にはデザイン重視であまり文字サイズを小さくするのはどうかな〜とも思います。ユーザー側で文字サイズを変えられるようにフォントサイズを絶対値でなく相対値にしておくのも忘れないように。