Hatena::Groupweb

vantguarde

 | 

4.20

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

| 01:14

もうちょっと。ひとまずこれで終わりかなあ。

sectioning contentとアウトライン

見出しのランクから開始されるセクションは暗黙的なものですが、sectioning contentは常に明示的なセクションを開始します。sectioning contentが存在する場合は、直下にある最初の見出しが、そのセクションの見出しになります。

その見出しのランクより高いものがsectioning content内に新たに出現した場合は、そこでセクションが閉じられ、新しいセクションがその兄弟として生成されます。

<h1>foo</h1>
<section>
  <h2>bar</h2>
  <h1>baz</h1>
</section>

この場合、baz(h1)はfooの兄弟ではなく、bar(h2)の兄弟になります。ランクが低いものはサブセクションになるけど、高いものは上に上がってくれないわけですね。なんか気味悪いという人もいるかもしれませんが、きちんとsectioning contentで囲ってあげれば済む話ということで。

さて、セクションと見出しからアウトラインを生成するアルゴリズムHTML5には存在しています。いろいろ面倒なので訳しませんが。

<h1>vantguarde</h1>
<section>
  <h2>09.xx.xx</h2>
  <article>
    <h3>HTML5のセクション</h3>
    <section>
      <h4>フラットでなんとか</h4>
      <h3>リニアがどうこう</h3>
    </section>
    <h4>見出しのグループ化</h4>
    <h5>headerの中にh1だけ?</h5>
    <h3>divをそのままsectionにするなんて</h3>
  </article>
  <h4>HTML5が2010年に出るってのはデマ</h4>
</section>

雑なHTMLですねー。それがこんな感じになります。たぶん(詳しく読んでない)。

  1. vantguarde
    1. 09.xx.xx
      1. HTML5のセクション
        1. フラットでなんとか
        2. リニアがどうこう
        3. 見出しのグループ化
          1. headerの中にh1だけ?
      2. divをそのままsectionにするなんて
      3. HTML5が2010年に出るってのはデマ

正しく実装されてるかはわかりませんが、HTML5 Outlinerなるものがあるので、確かめる事ができます。ただし、画像の代替テキストを読んでくれたりしないので、そこはちょっと不便かも。

今後どうなるか

こんなアルゴリズムが用意されてますが、どうなるんでしょうね。

まずは、どういう風に実装されるのかが気になるところです。Wordとかが持ってるようなアウトライン表示機能を内蔵してくれるんでしょうか。ただ、W3Cの仕様書みたいなものは変なアウトラインになってしまうし、HTML5限定で機能するというのも全く意味がない。

実装という観点から考えると、どれくらい意味があるものなのかちょっとよく分からないんですよね。制作者のための要件にもならないですし。アルゴリズムが使えなければ、あまり新しい要素を使う意味もないかなあと思うわけで(正しく使えない事が多いだろうから)。

とりあえず、使う時にはきちんと見出しとセクション、そしてセクションどうしの関係を見るようにしましょう。HTML5って処理系はゆるい感じに見えますが、意味的にはStrictよりもっと厳しいですよ。

 | 
Contact: @vant / lepetitcroissant@gmail.com.