情報を構造で捉える

前回 はhead周りの書き方を掲載しましたが、今回はbody内の事です。

まず最初にコーディングを行う際は、デザインのレイアウトでコーディングを行うのではなくエリアごとの文字情報が何を意味しているのかを捉えてコーディングを行います。

よく使う h1～h6タグ（以下h*タグと表記） から、その思想を考えて行きたいと思います。

そもそも h* タグは、見出しという意味があります。そして各数字は、その見出しの力を表しています。

h1タグは一番強力なタグで、雑誌で言えばページのタイトルに当たります。（目次に値するタイトルと言ってもいいかもしれません）

一昔前は（今もたまに見かけますが）h1を使いまくっているサイトがありましたが、あれは間違いです。ちゃんとページの情報を分析できていれば、h1タグばかりになるのがそもそもおかしいはずです。

普通は１ページにはタイトルは１つで、残りはサブタイトルのはずです。そうなるとh1タグは1つで、残りはh2以下のタグで構成される事になります。

考え方をまとめるとこんな感じです。

h1：タイトル

├ h2：サブタイトル

│　├ h3:サブタイトル

│　│　└ h4:サブタイトル

│　└ h3:サブタイトル

└ h2：サブタイトル

h* タグの役割自体をきちんと把握できていれば、この階層の図もよく理解できると思います。

情報を階層で捉えると言う考え方は、そのページやエリアの役割がはっきりします。自分のページはなぜか読みにくいと言う方は、この考えが出来ていない場合もあるので、一度試して見ることをおすすめします。