ID流HTML構造論

HTMLの本質

HTMLとは何なのでしょうか？たぶんこの解説が一番適切かと思います。

HTMLとは【HyperText Markup Language】 - 意味/解説/説明/定義 ： IT用語辞典

Webページを記述するためのマークアップ言語。W3Cが作成している規格で、最新版はHTML 4.01。
HTMLは文書の論理構造や見栄えなどを記述するために使用される。また、文書の中に画像や音声、動画、他の文書へのハイパーリンクなどを埋め込むこともできる。
～中略～
HTMLは本来文章の論理構造を記述する言語であったが、主にWebブラウザメーカーによる度重なる拡張の結果、単なる見栄えを記述するタグが大量に取り込まれた。しかし、HTML 4.0では文書の論理構造を記述するという本来の目的に立ち返り、見栄えの記述はCSSを使って行なうように改められた。

先程HTMLはプログラミング言語と紹介しましたが、正しくはマークアップ言語です。
つまりHTMLというものはWebサイトをデザインするための言語ではなく、本質的には文書にタイトルや見出し、小見出し、段落といった意味の重み付けをするための文書構造を示す言語だという事です。

HTMLの基本的な考え方

突き詰めて書いていくとものすごく長い解説が必要になるので、現時点で自分なりに答えが出ているHTMLの基本的な考え方を挙げてみたいと思います。

1. W3Cの定めた規格に従うWeb標準
2. HTMLは文書構造を示すための言語
3. 見栄えはCSSで指定すべき
4. タグのひとつひとつに必ず意味がある
5. tableは表組のためのタグなのでレイアウトに使うのは邪道
6. ウェブアクセシビリティに配慮する
7. 正しいHTMLの記述は結果的にSEOの効果が得られる

ではこの考え方に基づいてHTMLを記述していくと、どういう構造が最も正しいのでしょうか？

レイアウトからHTMLへの落とし込み

Webサイトの構築にあたっては「最終的にこういう風にしよう」という最終目標を描いてそのゴールに向かって突き進んでいくワケですが、見た目のレイアウト構造からHTMLの文書構造にいかに落としこんでいくかが重要なポイントになります。

例えばよくある「ヘッダー・メニュー・コンテンツ・サイド・フッター」という下のような内容のWebサイトがあるとします。

これを前述の「HTMLの基本的な考え方」に従って解釈していくとこんな風になるハズです。

どこに表示するかというレイアウトに関してや、文字の大きさや色の指定といったデザイン処理に関する部分などはあくまで見栄えに関する事なのでCSSで行います。
そうするとピュアなHTMLというのは文書構造になりますので、ワープロの文書の様に上から下に解釈されていきます。

ブラウザのFirefoxなら「メニュー＞表示＞スタイルシート＞スタイルシートを使用しない」でCSSで見た目を加工されていないWebサイトのピュアなHTMLの構造が表示する事ができます。この状態で見ると垂直に流れるように情報が羅列されている構造になっているはずです。
レイアウトをtableタグで行っているWebサイトは横に向かって流れていく構造になりがちです。

HTMLをカジッた事のある方の中にはこの図を見て「ハッ？」と思うか方がいるかもしれません。
見た目ではページ上方にレイアウトされているメニューがHTMLでは下の方に配置されている点です。
ここがID流HTML構造論のポイントであるゲームブック方式です。

ウェブアクセシビリティ=ゲームブック方式

HTMLの構造は何が正しんだろうな～と考えながらふと本棚を見ると懐かしい本が。

まだファミコンなんかが出始めた頃の1980年代中盤に流行ったゲームブックです。

ゲームブック - Wikipedia

一般に、ゲームブックの本文は数十から数百個のパラグラフ（段落）に分けられており、各パラグラフには順に番号が付いている。読者はそれらのパラグラフを頭から順番に読むのではなく、パラグラフの末尾で指定された番号のパラグラフを次に読む。パラグラフ番号の代わりにページ数をそのまま利用し、1ページを1パラグラフとして扱うゲームブックもある。いずれも次に読むべきパラグラフは1つに限らず、多くは複数の行き先が存在する。それらはプレイヤーによる任意選択ができたり、後述するランダム要素によって決められたり、以前に行った選択や判定の結果が影響して決まる。このような方法によって、多様に変化するストーリーを実現している。

「ドルアーガの塔 外伝」と「グーニーズ」とももう20年以上前の古い本です。何という物持ちの良さw
でもコレを見て急に思いついたワケです！ゲームブックの構造ってWebサイトの構造に似てるのではないかと。
「見出し・本文・選択肢」が存在するところとかソックリじゃないですか？

視覚障害者の方の気持ちになって目をつぶってHTMLを追っていくと、下の本文まで読んだ後に別のページにジャンプしたい場合はまた上のメニューの選択肢に戻って読まなければならないので、「見出し＞選択肢＞本文」という流れは明らかに手間がかかり読みにくいWebサイトになってしまいます。
つまりメニューが上にあるHTML構造はウェブアクセシビリティの精神に反するのではないか？と思ったわワケです。
またメニューがメニューである事を明示するためにh2タグで小見出しを付けてしまうと、h1タグより前にh2～h6タグが存在してはいけないというWeb標準のルールから外れてしまい、文書構造としての整合性も失われてしまいます。

そこでゲームブックの基本である「見出し＞本文＞選択肢」という構造に注目しました。
これなら本文を読んでからすぐに選択肢があるので、上から下まで淀みなくスムーズに読んでいけますし、コンテンツタイトルにh1タグで見出し、メニューにh2タグで小見出しを付けても構造が破堤しませんので、Web標準にも準拠する事ができます。

以上のようなHTML構造の組み方を勝手にゲームブック方式と呼んでいますw

Webサイトは心眼でみる

HTMLでは下部にあるメニューを上部に表示させるには、CSSの「position:absolute;」で絶対位置に配置してあげればOKです。
文書構造のHTMLと見栄えのCSSを分離させる意味はこういう所にあるんですね。

弊社内ではWebサイトを見た目で判断するのではなく、HTMLソースの中身をみて判断しろというのを例えて「目をつぶって心眼でみろ」とよく話しています。
Yahoo!やGoogleなどの検索エンジンは見た目ではなく、HTMLのソースコードからWebサイトを評価していますので、実際どのような情報がクロールされてどのように評価されているのかについても理解が深まるようになりました。
結果的にSEO対策の考え方などにも貢献しています。

長々と書いてきましたが、以上が「ID流HTML構造論」の考え方になります。
まだまだ足りない点もたくさんあるかとは思いますが、Webサイトを構築するにあたってHTML構造の考え方は基礎中の基礎になる部分ですので、今後もシッカリとやって行きたいものです。