post1734_thumbnail

section, article を使う前に知っておきたいこと

何を今更、と言われるとツライですが色々な人と仕事をしていると、思わず”んー…”っとなるような使い方をされている場面に遭遇したりして、果たして自分はどれだけ正しく使えているのかと気になり調べてみました。ぼくがウェブの勉強を始めたのは2012年、時代は既にhtml5に移りつつあり、この辺りはちょっと苦労した思い出があります。
もしぼくがこれらに関して誤った認識をしていたらそっと優しく指摘して欲しい。聞くは一時の恥、聞かぬは一生の恥なのだと思えば、自らの過ちにも耐えられると思う。

html5のルールに関しては(5.1ですが…)

http://www.w3.org/html/wg/drafts/html/master/
HTML 5.1 Nightly
A vocabulary and associated APIs for HTML and XHTML
Editor’s Draft 3 April 2014

を元にして話を進めていきましょう。
但しW3Cのサイトはすごく見辛いのでhtml5doctor.comや、英語恐怖症の方はhtml5doctor.jpと併せて使うと見やすいんじゃないかと思います。

明示的なアウトラインを記述するお約束

これは要注意なsectionの例

まずは先日目にしたちょっと息の詰まるsectionの使用例から。

<body>
    <div id="main">
        <section>
            <img />
            <p></p>
        </section>
        <section>
            <img />
            <p></p>
        </section>
        <section>
            <img />
            <p></p>
        </section>
        <section>
            <img />
            <p></p>
        </section>
    </div>
</body>

コンテンツをセクションごとにマークアップできているではないか(ドヤー)。
ほんとうにそうかな? 確認してみましょう。
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element
http://www.html5.jp/html5doctor/the-section-element.html
抜粋すると

section は、あなたがデータベースに個別のレコードとして蓄積することができるような、ひとかたまりのコンテンツだ。それは、通常は、このような感じになる(見出しは section 要素の前ではなく、そのの中に入れることに注意してほしい)

ほとんど例外なしに、自然に見出しを入れることができないようなら、section を使うべきではない。HTML 5 outliner tool で自分の作ったものをチェックしてほしい。もし、section に対応するところが “untitled section” になっていたら、たぶん、あなたの作ったものには間違いがある。(しかし、nav や aside 要素にタイトルがなくても問題はない)

section の利用の経験則
もちろん常に例外はあるが、このガイダンスは、99% のケースで使えるはずだ:
スタイリングやスクリプティングのフックだけに使うべからず;それには div を使うこと。
article, aside, nav のほうが適切な場合には使うべからず。
セクションのはじめに見出しを自然に入れられないような場合には使うべからず。

えー、かなりしつこく見出しタグを入れろと申しておられる。sectionはhタグとセットで使うことが前提なのだ。なぜならsectionはアウトラインを定義するタグだから。
逆に、そこにhタグが自然に入らない様な文書の場合、sectionの出番は無い可能性が高いです。

アウトラインってなんじゃ!? となったらどうしましょう。この辺り見てみるとよいかな。
http://qiita.com/yuku_t/items/726a67d8ae74eea2540a
誤解されがちですが、アウトラインはhtml文書だけのものではありません。
パラグラフや論文なんかもアウトラインを生成して書かされたりすることもあると思います。
outline paragraph
とか
research report outline template
とかで検索すると一目瞭然ですね。

推奨されている書き方

h1〜6タグだけで表現するのと何が違うのか、これを納得するためにはhタグについても少し調べないといけません。
http://www.html5.jp/tag/elements/h1.html
を見てみると

<body>
<h1>Let's call it a draw(ing surface)</h1>
    <h2>Diving in</h2>
    <h2>Simple shapes</h2>
    <h2>Canvas coordinates</h2>
        <h3>Canvas coordinates diagram</h3>
    <h2>Paths</h2>
        <p>Blah blah blah</p>
</body>
<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
    <h1>Diving in</h1>
</section>
<section>
    <h1>Simple shapes</h1>
</section>
<section>
    <h1>Canvas coordinates</h1>
    <section>
        <h1>Canvas coordinates diagram</h1>
    </section>
</section>
<section>
    <h1>Paths</h1>
</section>
<p>Blah blah blah</p>
</body>

まず気をつけたいのは、bodyに対してもアウトラインが生成されるということ。なのでここをsectionやarticleで囲う必要は無い。
この2つの文書は同じ構造だと書かれています。(分かり易くするためにインデントはアウトラインに対応しています)
ついでにちょっと手を加えました。上の書き方だとbody直前のテキストはPathsに関するパラグラフとなりますが、sectionを使って記述した方はLet’s call it a draw(ing surface)に対するパラグラフとなりますね。表現できる文書構造が増えたのです。
後者ほうが全然見やすいと思うのですよね。

これ以降アウトラインの判定は
http://gsnedders.html5.org/outliner/
に委ねていきましょう。

先の例は

<body>
<h1>Let's call it a draw(ing surface)</h1>
<section>
    <h2>Diving in</h2>
</section>
<section>
    <h2>Simple shapes</h2>
</section>
<section>
    <h2>Canvas coordinates</h2>
    <section>
        <h3>Canvas coordinates diagram</h3>
    </section>
</section>
<section>
    <h2>Paths</h2>
</section>
</body>

と書くことも出来ます。現時点ではこれが推奨されている書き方ですね。この例ではh1だけでなくネスト階層に合わせたhタグを使用しています。何方も正しくアウトラインが生成されますが、W3Cでは次のように注意書きがされています。

http://www.w3.org/html/wg/drafts/html/master/sections.html#headings-and-sections

Sections may contain headings of any rank, and authors are strongly encouraged to use headings of the appropriate rank for the section’s nesting level.

ネスト階層に合わせたhタグを使用することをオススメするそうです。

articleはどうかな?

sectionの使用方法に関しておさらいしました。じゃあarticleはどうなんじゃ?
http://www.html5.jp/tag/elements/article.html

article 要素は、ドキュメント、ページ、アプリケーション、サイトの中の自己完結した構成を表します。つまり、シンジケーションのように、単独で再配布でき再利用できるものです。

とあります。
まんまですが、section が使える条件に当てはまり、かつ文章が単独で意味を成し完結できるセクションの場合にarticleを使うとよいでしょう。例えば次の例はとてもわかり易いですね。
http://www.w3.org/html/wg/drafts/html/master/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

<body>
<h1>Site Title</h1>
<article class="book">
    <header>
    <h2>My Book</h2>
    <p>A sample with not much content</p>
    <p><small>Published by Dummy Publicorp Ltd.</small></p>
    </header>
    <section class="chapter">
        <h3>My First Chapter</h3>
        <p>This is the first of my chapters. It doesn't say much.</p>
        <p>But it has two paragraphs!</p>
    </section>
    <section class="chapter">
        <h3>It Continutes: The Second Chapter</h3>
        <p>Bla dee bla, dee bla dee bla. Boom.</p>
    </section>
    <section class="chapter">
        <h3>Chapter Three: A Further Example</h3>
        <p>It's not like a battle between brightness and earthtones would go
        unnoticed.</p>
        <p>But it might ruin my story.</p>
    </section>
    <section class="appendix">
        <h3>Appendix A: Overview of Examples</h3>
        <p>These are demonstrations.</p>
    </section>
    <section class="appendix">
        <h3>Appendix B: Some Closing Remarks</h3>
        <p>Hopefully this long example shows that you <em>can</em> style
        sections, so long as they are used to indicate actual sections.</p>
    </section>
</article>
</body>

WordPressで運用する上での現状

sectionとarticleの使い方が分かったところで、このブログで使用しているWordPressにフォーカスしてみましょう。
今回一番気になった部分、ブログでどれだけ正しくhtml5が扱えるのか。大抵はh1〜h6にスタイルが設定されていて、ビジュアルエディタを使って記事を書くと次の様な文書が出来上がることが多いのではないでしょうか。

<body>
<h1>siteTitle</h1>
<article>
    <header>
    <h2>pageTitle</h2>
    </header>
    <section>
        <h1>section1</h1>
        <p>They taste lovely.</p>
            <h2>section1-1</h2>
            <p>Red apples are sweeter than green ones.</p>
            <h2>section1-2</h2>
            <p>Red apples are sweeter than green ones.</p>
        <h1>section2</h1>
        <p>Apples come in various colors.</p>
    </section>
</article>
</body>

アウトラインは正しく構成されます。
あるいは次の様な例もありえるでしょう。

<body>
<h2>siteTitle</h2>
<article>
    <header>
    <h1>pageTitle</h1>
    </header>
    <section>
    <h2>section1</h2>
    <p>They taste lovely.</p>
        <h6>section1-1</h6>
        <p>Red apples are sweeter than green ones.</p>
        <h5>section1-2</h5>
        <p>you idiot</p>
    <h1>section2</h1>
    <p>Apples come in various colors.</p>
    </section>
</article>
</body>

見ていて全然ハッピーじゃないですが、これもアウトラインは正しく構成されています。

Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.

ダメとダイレクトに書かれている記述は見つかりませんでした。が、遠回しに良くないと言われているように取れます。推奨される書き方ではなさそうですね。
WordPressのビジュアルエディタでいい感じにするにはまだ色々遠そうです。

まとめ

自分なりに気になるケースを調べてみましたが、色々と変化していてよく分からない部分も多いですね。
“そもそもなんの為にアウトラインを明示するの? ブラウザで見られればいいじゃん? Googleもうるさく言ってこないし。”
なんて声はよく耳にするのですが、本来アウトラインはそういうものではないのですよね。国語の時間で作文の書き方を習った様に、英語圏出身のhtmlには英語圏のルールが色濃く反映されています。
大学の卒業論文を書くときもアウトラインを明示して書くよう指示された記憶があります。微かに。
少しだけ海外の大学にいた時にも文書の書き方についてはうるさく言わました。自由なイメージのある英語ですが、文書を書くのにまずパラグラフのルールから教えられたり、日本語より遥かに多くのルールがある様に感じました。もう忘れましたが。
(これは主観ですが、漢字のない英語圏で文書の内容を素早く認識するためには統一された文書構造が必要だったのでは無いかな、と思ったり)
何よりアウトラインがきちんと構成された文書は読みやすいし美しい。

ウェブデザイナーとして以前に、文書を扱う者として教養の無いバカなりに、正しい文書設計ができる人でありたいなと思いました。

2014/04/07 追記
8bitOdysseyさんが下記の通り教えてくれました。

英語だからちゃうで。もともと HTML は学術論文をハイパーテキストで表現するための技術だから、アウトラインが重視されるんやで。
チラ裏や日記帳に書くことならセクション区切る必要はないと、W3Cも言ってるけんね。

ありがとうございまうす!

2 thoughts on “section, article を使う前に知っておきたいこと

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です