HTML5 アウトラインを意識してみる
h1～h4とsection&h1を使って実験
HTML5では、新たなセマンティック要素を規定している。これはホームページやblogなどの文章の見出しや本文などを構造化することで、検索や様々なサービスを行いやすくし、結果的にユーザーのメリットになるというもの。ただ多くの有名サイトでも、まだ本格的に導入されていない。でもGoogleの検索エンジンでは、この構造が徐々に重要になってきているように思う。文章の構造はアウトラインとしてもブラウザー上でチェックすることができる。Google ChromeではHTML5 Outlinerという機能拡張がある。
これをインストールすると、omniboxにアイコンが表示されるので、開いているページで、このアイコンをクリックすると、そのページの見出しのリストであるアウトラインを見ることができる。これはページの目次のようなものなので、これだけ見て内容がある程度分かるようにしておくのがよいと思う。下はindexのページのアウトライン。こんな感じで階層化しておくと今後の様々なサービスに対応できそう。
html5以前ではh1～h6を使って見出しを定義するような仕様ではあるのだが、どうも積極的に使われていなかったりする。それに数値で階層分けをするのは、機械からみると理想的ではないし、階層の変更に弱い。html5では新たにsectionが導入された。これとh1などを組合わせてタイトルのツリーを作ることができる。これによって複数のhtmlファイルを組合わせても、正しい階層をキープできるなど、変更修正に強く柔軟性のある構造が実現できる。でも後方互換性のため従来のh1～h6も利用できるのが何とも中途半端だが。今後はsectionとh1だけを使う方法がベターだろう。 例えばこんな感じで。
<section>
<h1> 大見出し </h1>
<p>本文</p>
<section>
<h1> 中見出し </h1>
<p>本文</p>
</section>
</section>
上記は section の中に section が存在していて、2階層になっている。ということでBloggerで試してみたら、sectionを使うと階層が崩れてしまった。下は実際に記事の中に入れてみたところ。アウトラインで見るとひどいことになっている。
section 1
日付と同じ階層。どうしてもここから始まってしまうようだ。h2と同じ。section 2
記事タイトルと同じ階層。h3と同じ。section 3
記事の中を分けるのに使えるh4と同じ階層。ということで記事の中でsectionを使うと、どうして日付と同じ階層から作られてしまって下の記事タイトルの下の階層から始めることができないという結果になった。残念。 次にh1～h6を使う実験をしてみる。これはsectionを使わない従来の方法。
h1
Blogのタイトルと同じ階層になってしまう。これは使ってはいけない。重み付けがおかしくなってしまう。h2
これは日付と同じ階層だ。書式も日付と同じcssの指定になってしまう。h3
記事のタイトルと同じ階層。記事の中なのに記事と同じ階層というのはちょっと使えない。Bloggerのテンプレートを追っていくと、h3はpost-titleに位置づけされている。h4
記事の下の階層になるので、記事をさらに分けていく場合に使えるのだが、テンプレートではコメントの位置づけとなっている。このブログではコメント欄はないので、使えるが通常は避けたほうがよさそう。h5
h5はBloggerの標準的なテンプレートでは定義されてないので、自由に使えそうだ。h6
h6も使える。このページのアウトラインの結果はこうなっている。とんでもないツリーだ。
結論はBloggerの記事内ではh4以下を使う
こんな感じで記事の中でh1～h3を使ってはダメで、h4は記事タイトルの下の階層になるので、まぁ使えるという結論になる。ただh4は標準的なテンプレートではコメント扱いなので注意が必要。Bloggerからすると、記事内でさらに階層をつけるのはやめてくれというのが本音だろう。結果的にhtml5らしくないh4～h6を使うという方法になった 。でも現在のBloggerの話なので、将来的にはsectionでもきれいなアウトラインが得られるようになるかもしれない。あまりh4などを多用するのは避けようと思う。理想的には secitonとh1のみを使って文章の構造を明確にしたいところなので。
ここまで書いて思ったのだが、Bloggerのテンプレートと連携していろいろ修正すればsectionも使えるかもしれない。でもBloggerの標準的な仕様から離れると別の問題が浮上しそうなので現状ではやはりh4以下を使っておけというところかな。
実験的にテンプレートをいじってみたら、やはりsectionとh1だけでうまくアウトラインを作ることができた。それにしてもBloggerのテンプレートって分かりにくい。テンプレートの記述はスタイルシートとhtmlによるものなのだが、実際にアップしてみるとソースコードには、さらにJavaScriptなどいろいろ追加されていた。それらを総合的に見ながら判断する必要がある。個人的には使わない機能は削除したいと思っているので、シンプルに改造してみたら、2000行近いコードが200行程度まで少なくできた。もう少しhtml5らしくして、不具合が出なければ近々導入しようと思う。