ご存知の方も多いと思うが、HTMLとは「Hyper Text Markup Language（ハイパー・テキスト・マークアップ・ラングエジ）」の略である。
プログラム言語の一種でありながら「タグによるマークアップ」(SGML)という特殊な言語形式を持つため、一般的にプログラムとよばれるそれとは大きく性格が違う。そもそも「マークアップ」とは何だろうか？
技術的な説明を省き簡潔に言えば「マークアップ」とは「文章に論理的意味合いを印付けること」であるといえる。
考えてみてほしい、HTMLソースを書く際我々は必ず文頭に<html>と記述し、文末に</html>と記述するがそれはなぜだろうか。それがきまりだからといえばそこまでだが、当然それには理由がある。それこそがすなわち「文章の論理的意味付け」なのだ。
htmlタグは「ここからhtmlの記述を開始する」または「終了する」ということを宣言するために記述する。もっと言えば開始タグから終了タグまでに囲まれている部分に「これはHTMLである」という意味付けをするのである。
同じく、titleタグはページのタイトルであることを意味付け、headタグ、bodyタグは囲った領域がそれぞれヘッダ情報と本文であることを意味付ける。h*タグは「見出しタグ」とも呼ばれ、そのページ内の見出しであることを意味付ける。
とにかく存在する全てのHTMLタグがそれぞれが論理的意味を持っており、それぞれに決められた役目があるということを覚えておいてもらいたい。
このことを知った上でソースを組むか組むか否かでそのHTMLファイルの質が格段に変わってくるのだ。
RikiyがHTMLソースを構築する際の鉄則、それは「人にも機械にも見やすい構造」である。
「人に」というのはそのままの意味で、おそらく大体の方が意識している部分だろう。しかし「機械に」という意識を持つ方はプロならともかく、一般にはまずほとんどいないだろうしそもそもどういうことなのかすらわからないかもしれない。
機械と言うのは、具体的に言うと主にロボット型検索エンジンの巡回ロボット、クローラを指す。ご存知の方も多いと思うがロボット型検索エンジンはWEB上のリンクを伝ってページの情報を集めて回る。情報を集めるためにはそのページをまず見なければならないのでクローラは訪れたページを見るわけだが、ビジュアルを見る目を持たないクローラは代わりにそのページのソースを読むのだ。
ある程度デザインされていればブラウザに表示された画面を観て人はある程度各パーツが何であるのかを理解できる。どこがメニューで本文であるか、文の冒頭で若干大きめの文字で書かれていればそれを見出しであると判断できるし、本文において太字になっている部分があればそれが重要な言葉なんだなと直感的に受け取るだろう。しかしクローラはそんな見た目など全く関係なく、ソースに記述されたタグによってそのページの構造を理解する。
例えば、
- <h1 style="font-size: 18px;">ページの見出し</h1>
- <strong style="font-size: 18px;">ページの見出し</strong>
- <b style="font-size: 18px;">ページの見出し</b>
上記のソースはいずれもブラウザ上では（h1の場合上下にマージンができてしまうが）同じ18pxの太字で表示される。人からすればどれも同じ意味合いに見てとれるだろうが、ロボットからすればこの3つはいずれも全くの別物なのである。
囲まれている「本文の見出し」というテキストがその通りそのページの見出しであるのなら本文の見出しを意味付けるタグ、すなわち上記の例でいう1のようのに<h1>で囲わなければロボットはそれをページの見出しであると解釈してくれない。
<strong>、<b>はいずれも強調の意味合いを持つタグだがこの両者にも大きな違いがある。<strong>はその対象が重要な語句であるという論理的強調を意味付けるものに対して<b>は単に対象をビジュアル的に太く見せる視覚的強調の意味合いを持つ。
このようにそれぞれのタグには「使いどころ」というものがあり、それをを考えずにソースを構築すると視覚的構造は正しくてもソース上の論理的構造が破綻したページになってしまう。
Rikiy自身も恥ずかしながら、以前はh*タグは文字を大きく見せるだけのタグと目もくれず、使い勝手のよいdivタグとspanタグにスタイルをかけたものばかりを使った視覚的構造第一のコーディングをしていたが今ではこの部分にこだわったソース構造を追及している。
結論、「人にも機械にも見やすい構造」とは「視覚的構造と論理的構造がマッチしたコーディング」ということだ。
Rikiyはこう考えるようになってから自分の中のWebが一気に広く、深いものになった。
正しい論理的構造で書かれたソースはSEO的観点からの効果も高い。総じてインデックスされやすく、ロボットがページ内のテキストを正しい意味づけで認識してくれるのでこちらの意図に沿った検索結果が反映されやすくなるからだ。これから先の熾烈な大検索時代を生き残るために固めるべき礎である。
ホームページをお持ちの方はこれを機に、一度ご自分のHTMLソースを見直してはいかがだろうか。
(2005年01月26日)