HTML アウトラインの見出しとセクション

現在，HTML5 は廃止され，HTML Living Standardへと代わっているようだが，見出しやアウトラインの部分はあまり変わっていないようだ．

ただし，hgroup は HTML5 で一旦廃止されたが，HTML Living Standard で復活したようだ．
そのように細かい仕様部分は変わっているが全体的な考え方は変わっていない．

流れとしては文章というか，記述物をデザインやレイアウトの部分と意味的な内容の部分を分けようとしているといえる．

スタイリングとセマンティックを分ける

具体的には

• デザイン・レイアウト(スタイリング)はスタイルシート(CSS)に．
• 意味(セマンティック)は HTML に．

ということになる．

コンテンツとデザインが分離されていれば，コンテンツを変えずにデザインだけ，飽きが来た時にいつでも変えられるという利点がある．

根底には「文章の内容の構成はデザインとは別物である」という考え方があるはずだ．

何よりコンピュータで解析する際には画像よりも文章の内容を解析したいはずである．

検索エンジンの目的を考えると既に文章がマークアップされて構成部分の意味が明白であるに越したことはない．

アウトライン

見出しとセクション

そう考えると文章のセクション(塊)(章や節や段落)ごとに見出しがはっきりしていれば，全体を把握するのが容易になる．

検索している人が本当に探しているものを出来るだけ上位に表示するためには各文章がどのような内容をどういう構成の元に書かれているかをどれだけ上手く把握するかが問題になるわけだが，その際に見出しの役割がとても重要だということは分かるだろう．

そこで登場するのが「アウトライン」という考え方で文章の骨格を表すわけである．

セクショニング要素

全体の骨格を見る上で重要なのはアウトラインだが，それは基本的には見出しが決めることになる．
しかし，見出しがどこまでの範囲を表すのかを表すのがセクションだとするとそれを分かりやすくするのがセクショニングコンテンツ要素である

• article
• aside
• nav
• section

である．
このタグは特別なものでこのタグで囲われているものはセクショニングコンテンツとなる．

このセクショニングコンテンツがどのような木構造を作って，文章全体を構成しているかが重要になる．

このセクショニングコンテンツは当然見出しを持つべきと決められていて，その中に h タグが存在する場合はそれがそのセクションの見出しとなり，h タグが存在しない場合はタイトルが決められていない状態となる．
この状態ではこのセクショニングコンテンツのテーマはそのセクショニングコンテンツの文章の内容から類推するしかなくなる．
Google などの検索エンジンはこの文章を解析して，セクショニングコンテンツごとのテーマを分析しているだろうし，見出しがあったとして，それをどれだけ重視しているかは開発者ではないので分からない．
そうだとしても，著作者がタイトルを示しているのを完全無視することは考えにくい．
タイトルがついている(見出しがついている)ということは読者のことを考えた行為であり，そのような親切心を無視することは文章の充実を目指す検索エンジン側にとって利益のあることにはならないはずだ．

そのような考え方から今後はできるだけマークアップ(タグ付け)を正確にしていく必要があると考えている．

そういう意味でも header や footer や main なども存在しているが，先ほどの４つのセクショニングコンテンツ要素でないタグは一旦忘れたほうがよい．

header

header の説明には
「セクションのコンテンツの目次，検索フォーム，または関連するロゴを包むために使用することができる」
と書いてある．
これはつまり，この header の含まれるセクショニングコンテンツ自体の目次などを入れろと解釈できる．
なので，目次部分は body の子要素として header の中に入れろと言っているようだ．

header の中の見出しタグはどう解釈すべきかというと header が含まれるセクションの見出しとなるので，body の子要素の場合，body の見出しとなる．もし，それが最初の見出しだとしたら，それが body のタイトルとなる．

footer

footer に関しては「セクションの著者や編集者に対する連絡先情報」と書いてあるので，やはりこのような情報も body の子要素として footer の中に入れるべきものなのだろう．

nav

nav の説明には「ページ上のリンクのグループがnav要素である必要はない - この要素は主要なナビゲーションブロックから成るセクションを主に対象としている」と書いてあるので，そもそも nav は使わなくてもよいということだ．

nav に見出しを作るとメニューにタイトルがつくことになるが，デザインの関係上，上部メニューにわざわざ「メニュー」のようなタイトルをつけることは通常ない．

例えば，WordPress を使っている場合に header.php 辺りに上部メニューを書き込んだ場合，どう考えても body の見出しが来る前に nav が来てしまう．
body の見出しは single.php に書くしかないからだ．よって，nav を入れると Body が Untitled となり，微妙な状態になってしまう．
WordPress に限らず，上部メニュー部分をファイルをインクルードして構成する構造になっていると同様になる．

この件に関してはネットで検索すると様々に言及されている．

トップページ以外のページ(セカンドページといっている人もいるようだ)では上記の理由で nav を使ってしまうと少し微妙なアウトラインになってしまう．

どちらにしても nav は必須要素ではないので，無理に使う必要はないのではないかというのが今の私の見解だ．

よって，弊社のサイトの場合，トップページにだけ主要なナビゲーションのセクションに関して nav を入れている．

アウトラインに関する考え方

実際のところ，アウトラインを綺麗に整備したところで検索エンジンの順位があがるのか？というと「分からない」としか言えない．
無視していると思えるページでも一位になれる．
結局，検索している人が一番納得してくれそうなページを上位にあげようとしていることに変わりはない．
しかし，アウトラインを意識することでまとまった読みやすい文章が書けることは言えると思う．
そういう意味では読みやすい文章を心掛けるならばアウトラインを意識してページを作成するべきだろう．