YutaroWeb技術

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

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

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

https://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>

コンテンツをセクションごとにマークアップできているではないか(ドヤー)。
ほんとうにそうかな? 確認してみましょう。
https://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element
https://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の出番は無い可能性が高いです。

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

推奨されている書き方

h1〜6タグだけで表現するのと何が違うのか、これを納得するためにはhタグについても少し調べないといけません。
https://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)に対するパラグラフとなりますね。表現できる文書構造が増えたのです。
後者ほうが全然見やすいと思うのですよね。

これ以降アウトラインの判定は
https://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では次のように注意書きがされています。

https://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はどうなんじゃ?
https://www.html5.jp/tag/elements/article.html

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

とあります。
まんまですが、section が使える条件に当てはまり、かつ文章が単独で意味を成し完結できるセクションの場合にarticleを使うとよいでしょう。例えば次の例はとてもわかり易いですね。
https://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も言ってるけんね。

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

written by: Yutaro

WP-Eハマチ。ウェブ業界2年生のライトひきこもり系ウェブクリエイターです。 好きな食べ物は生クリーム。好きなヘルシングのキャラはベルナドットのじいちゃんです。

最近の記事

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

  1. ピンバック: SectionとArticleの違いについて。 | What is Design?
  2. ピンバック: HTML5　セクションとアウトラインについて | 東京の求職者支援訓練

  3. この問題はかなり難しいと思います。
    ・以前の書き方を修正するのに手間がかかる
    ・まだ完全な仕様でないため、今の書き方がすぐにダメになってしまう
    ・人によって書き方にバラツキがある(しかも、どちらも仕様的に正しい)時点でやる気が失せる
    ・現代のWEBサイトとの相性が悪い

    個人的には1番最後の理由である「現代のWEBサイトとの相性」が厄介だと思います。昔ながらのWEBサイトは文章メインのものがほとんどでした。論文、小説、ブログなど。しかし、現代のWEBサイトはアプリに近付いている印象があります。その理由はモバイル端末の普及とアプリ使用者の増大によるものでしょう。

    WEBサイトの製作者がどれだけマジメにアウトラインを明確にして、各セクションに見出しを付けても、それを利用するユーザーが不要だと思えば邪魔なものになります。ほら、モバイルアプリって画面内に見出しなんてほとんどないでしょう？その上、モバイルアプリの特徴として「パーツ単位の構成」になっている場合がほとんどです。

    モバイルアプリはそれぞれのパーツの組み合わせで作られていて、各パーツには(理論的な名称はあるものの)ユーザーに明確に示される名称(Hタグ的なもの)はありません。ただし、これがオンラインRPGになると話が別で、割と名称を記載しているように思います。メニューにはメニュー、マップにマップ、オプションにはオプションなどの文字が書かれている率が高いです。

    全般的に見ると、各パーツの名称をユーザーに示すかどうかは「割と適当でいい」ということが実践例からわかります。なので、わざわざサイトのナビにナビと書く必要もありません。あえて、RPGっぽく記載する手もあるし(HTML5の目的である「意味の明確化」からいえば、)そうするのが正しい方向だといえます。

    個人的な対策と考えとしては、
    ・サイト内の要素はすべて「何らかのパーツである」と考えるようにする
    ・各パーツには名称がある
    ・各パーツの名称は(99%)h1タグでユーザーに示す
    ・各パーツ内の下の階層になれば、h2やh3などを使う
    ・そのままのHTMLだと見た目が果てしなくダサくなるため、CSSでパーツ毎にスタイルを変える(RPGのように違和感のない名称記述を目指す)

    このような感じにすればいいと考えています。また、それに向けて、サイトを修正しています。ただ、この手の問題で1番の壁は「面倒」ということでしょう。誰から褒められるわけでもないし、結局は自己満足なのですが、HTMLの書き方自体99%は自己満足の世界なので、そこは割り切るしかないでしょう(笑)

    返信
  4. ピンバック: articleっていつ使うの？sectionって自分の認識で合ってるの？ – 仮のままブログ
  5. ピンバック: section, article を使う前に知っておきたいこと | sleepingrabbit_2

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。