vantguarde

HTML5のセクション(その3)

html5, markup | 15:01

続きを書くの、わすれてました。というわけで、今回はセクションの構成と、sectioning contentについて。

フラットでなんとか

ここの構造って、たぶんこうなってると思います。

<h1>vantguarde</h1>

<h2>09.04.18</h2>
<h3>くたばるのは僕の方だよね</h3>
<h4>まあでも考えなよ</h4>
<h4>例考えるの飽きた</h4>

<h2>09.04.17</h2>
...

HTML5のHeadings and sectionsというセクションには、だいたい次のような感じセクションを構成する流れが書かれています。

1. 見出し要素に出会ったら、セクションを開始する
2. 次の見出し要素に出会ったら、そのランク（hn）を調べる
3. ランクが同じ、または高ければ、そこで現在のセクションを終了し、新しいセクションを開始する
4. ランクが低かったら、新しいサブセクションを現在のセクションの中に開始する

だから、こんな感じになりますね。

1. vantguarde
   1. 09.04.18
      1. くたばるのは僕の方だよね
         1. まあでも考えなよ
         2. 例考えるの飽きた
   2. 09.04.17

特に難しくはないかなと。

見出しのグループ化

さて、じゃあこういうのはどうなるんでしょう。

<h1>HTML 5</h1> 
<h2>A vocabulary and associated APIs for HTML and XHTML</h2> 
<h2>W3C Working Draft 12 February 2009</h2> 
<dl>
  <dt>This version:</dt>
...

W3Cの仕様書なんですが、h2が前にあるh1とともに、一つの見出しブロックを構成しています。サブタイトルみたいなものと考えればいいでしょう。

しかし、今言ったアルゴリズムでは“HTML 5”の下に“A vocabulary...”と“W3C Working Draft...”という、二つのサブセクションができてしまいます。これは意図されたものではないでしょう。

そこで登場するのが、見出しブロックを構成するheaderです。headerはh1-h6とともに、heading contentとしてカテゴライズされています。

<header>
  <h1>HTML 5</h1> 
  <h2>A vocabulary and associated APIs for HTML and XHTML</h2> 
  <h2>W3C Working Draft 12 February 2009</h2> 
  <dl>
    <dt>This version:</dt>
  ...
</header>

こういう風に囲んであげると、ひとまとめの見出しとして扱われます。

グループ化という側面もあり、たとえばheaderの中にh1ひとつしかないってのは良くないです。non-conformingではないですが。

sectioning content

sectioning contentはセクションを開始する要素を表します。section, nav, article, asideが該当します。

ここの場合、たとえばこんな感じになるかなあと。

<h1>vantguarde</h1>
<section>
  <h2>09.xx.xx</h2>
  <article>
    <h3>HTML5のセクション</h3>
    <footer>
      <p><a>html5</a>, <a>markup</a> | 12:26</p>
    </footer>
    <section>
      <h4>フラットでなんとか</h4>
    </section>
    <section>
      <h4>見出しのグループ化</h4>
    </section>
    <section>
      <h4>sectioning content</h4>
    </section>
  </article>
  <article>
    <h3>HTML5が2010年に出るってのはデマ</h3>
    <footer>
      <p><a>html5</a> | 23:35</p>
    </footer>
    <p>出るわけないです。本気で思ってるんですか？目を覚ましてください。</p>
  </article>
</section>

こんな感じです。ちょっとfooterを入れてしまってるのでごちゃごちゃしてますが、まあこちらも理解できるかなあと。

なんでもsectionにする人はくたばればいいと思う

気をつけてほしいのが、divをsectionでそのまま置き換えたもの。

<article>
  <h1>タイトル</h1>
  <section class="content">
    <p>blah...
  </section>
  <footer class="related">
    <ul>...
  </footer>
</article>

たぶんスタイルシートのために用意してるんでしょうが、そういうものはまずdivでやりましょう。section.contentがあると、その中に見出しのない無名のサブセクションができてしまいます。もちろんそれがサブセクションである場合ならば構いませんが。

ほかにもsection#containerとか、とても怪しい感じのマークアップを見る事があります。もしそういう風に書いていたら、悔い改めてdivにしましょう*1。

レイアウト関係はあとで書くようにして、とりあえず見出しとセクションを意識する事からはじめましょう。