MD-Blog_Web Creative

アウトライン、意識してますか？ section、article、悩んでますか？

この記事は、HTML5に対してまだ若干のモヤモヤが残る人のために、スッキリ分かりやすくまとめようと努力してみる『HTML5再入門』です。
すべての内容を網羅するわけではなく、ツボをイイ感じに抑えることが目的です。

アウトラインがなくては始まらない

アウトラインとは何か

日本語に訳すなら文書構造。意味はそのまんま文書の構造です。
HTML5に限らず、文章で表現された資料には構造があります。

上図では、言うまでも無く枠で囲ったブロックの構造がアウトラインです。
このアウトラインをHTMLで表現することで、検索ロボットなどの機械が読んでも文書の流れや展開を理解してもらえるようなHTMLが出来上がります。

アウトラインを作る下準備

理屈で分かっていても、実際にその通りにアウトラインが組めているか、確認する手段が無ければ判断がつかないですよね。
何はなくともこれを導入しましょう。

HTML5 Outliner (Chromeプラグイン)
https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=ja

このプラグインを入れることで、今開いているページのアウトラインが丸わかりです。

導入するには、Chromeで上記URLを開き、「CHROMEへ追加」ボタンにインストールしてください。
注意点として、ローカルドキュメントを直接開いた場合はoutlinerが動きません。localhostを立てるか、どこかのサーバにアップする必要があります。
また、インストール直後も動かないことがあるようなので、その場合はchromeを再起動してみてください。

HTML5でコーディングするときは、このOutlinerで構造を常に確認しながら組み上げるようにしましょう。
下準備が済んだら、早速実践的な内容に進みます。

タグ選びで迷う必要なんてない

HTML5では、ご存じの通り様々な要素(HTMLにおけるelements)が追加されました。
代表的なものはsection、article、figureなど。どれもHTML5コーディングでは避けて通れない重要な要素です。
が、あまりに種類が増えすぎて、どれを使っていいか分からない、あれとこれとで迷う、という場面が増えていませんか？
心配いりません。HTML5はHTML4やXHTMLに比べて、ずっと機械的に、かつ概念的にコーディング出来る仕組みになっています。
昨今「セマンティック(semantic) web」と呼ばれるコンセプトがありますが、これはHTMLに「意味」を込めるということです。表現したい「意味」に対して対応する「要素」がはっきりしている。つまり、伝えたい想い、届けたい気持ちがはっきりしていれば、自然と美しく正しいHTML5構文が書けると言うことですね。そう、HTML5はとっても詩的なのです。

「セクショニング要素」と「非セクショニング要素」をまず分けて考える

「非セクショニング要素」という表現があるのかは知りませんが、これがHTML5の基本であり一番大切なことです。 「セクショニング要素」とは、前章で書いた「アウトライン」の1ブロックとなる要素です。セクショニング要素で囲んだ内容は、問答無用でアウトライン化されるということです。
逆に、「非セクショニング要素」で囲むことは、アウトラインには直接影響しません。

・セクショニング要素
article、section、nav および aside
・非セクショニング要素
上記以外すべて

...ということなので、「article、section、nav、asideがアウトラインに影響する」「そのほかの要素は影響しない(できない)」とだけ覚えておけば大丈夫。
sectionとdivで迷う場面というのは、実は「アウトライン的に区切るか区切らないか」の二択なのです。個人的には、無闇矢鱈にブツブツとアウトラインを切るよりも、全体の構造はある程度シンプルに抑えた方が人間にも機械にも分かりやすく保守しやすいコードになるんじゃなかろうかと思います。
また、HTML5において「アウトラインを切る」ということはすなわち「見出しを振る」ということにもなってしまうので、考えなしに切ると「Untitled Section」だらけになってしまいます。この見出しの問題については後述。

sectionとarticle

前節で、divとsectionの狭間で迷うことは無くなったのではないかと思います。
でも今度は同じセクショニング要素であるarticleとsectionの間で迷います。
articleの定義はHTML文書の中で「自己完結したパート」です、と説明されても、何をもって「自己完結」なのかが分からない。
そこで少し大雑把ですが一言でarticleを表現します。
articleとして扱われるべき（であろう）パートを私は以下のように考えています。

『ヘッダー、フッター、サイドバーなどの共通部分を抜かした、そのページの「メインでオリジナルな」部分』

"article"という単語は日本では"記事"と訳されることが多く、そのニュアンスが感じられてしまうのですが、記事ではなく静的ページであっても、そのページにだけ書かれた内容部分はarticleです。

では、記事一覧などにおける個々の記事は？
タイトルと要約だけ並べたような一覧の中の個々の記事はarticleでしょうか。
個人的には、上記の「自己完結」という意味合いから外れてしまうので、最近はarticleで組むのをやめてliなどを使っています。
最新の草案を読んでも、こういった場合にそれぞれの記事をarticleと表現することを肯定する根拠が見当たりませんでした。
ただ、それが「記事一覧」というページだった場合、記事一覧全体が一つのarticleになります。

見出しが無ければセクションじゃない

HTML5の各要素の概念が分かってきたら、次は見出しです。
かつて見出しはどちらかというと「SEOのために正しく付けよう」という扱いを受けていたと思うのですが、HTML5においてはSEO以前に「正しい文書構造のために正しく付けよう」です。

見出しってなんだろう

見出し＝heading＝hxについて改めて考えてみます。
「見出し」というより「表題」と訳した方がいいのではないかと思っています。
表題とはつまりタイトル。タイトルは何らかの内容に対して打ち出されるものだから、タイトルがあるなら内容がないと不自然ですよね。
だから、以下のようなhx要素は本来はおかしいのです。

・SEOのために、隅っこにポツンと置かれたhx要素。

    <h3>私たちは○○なサービスを提供します！</h3>

・目立たせたいからといって、とりあえずhx要素で囲んだキャッチ。

    <h1>MIOのホームページ</h1> //このh1はOK
    <h2>こんにちは、あなたはxxx人目のお客様です！</h2> //このh2はオカシイ

どちらもありがちですが、hx要素の本来の意味から言えば間違った用例です。
なぜなら、どちらも「内容を表す表題」になっていないからです。

セクショニング要素にはそれぞれ見出しが必要

前章で説明したセクショニング要素は、必ず「見出し」と「内容」で構成されます。
hx要素をまったく含まないsectionを作ってしまった場合、outlinerで確認すると"Untitled Section"などと表示されてしまうはずです。
含まないからと言ってinvalidだ、ということではないようですが、アウトラインとして適切ではないという判断がされてしまうのです。

section要素に見出しが一切ないという状況はあまり起こらないと思うのですが、よくある問題がnav要素、aside要素を用いる場合です。
たとえばグローバルナビにわざわざ「グローバルナビ」とタイトルが書かれているページデザインなんて、ほとんど見ません。でも、これはアウトラインとしては不十分です。
回避策として、

1. デザインの段階から、HTML5を意識して、さりげなく「MENU」などの見出し要素をデザインに組み込む。一番スマート。
2. コーディング上は<h1>グローバルナビ</h1>などと仕込んでおいて、css等で隠す。正しいことをしようとして悪いことをしてしまった感が悔しい。
3. サイト全体として「nav、asideには見出しを振らない」などと共通ルールを持たせた上で、無視する。秩序ある抵抗。

最初の案がおすすめですよ。

見出し要素のレベル問題

では、h1～6まであるhx要素のナンバリングはどうすればよいのか。
ご存知の方も多いでしょうが、この見出しレベルの使い方はHTML5になって大きく変わりました。
以前はアウトラインの概念がなかったので、h1～h6の使い分けによってぼんやりとファジーに区切られていた文書構造が、セクショニング要素が現れたおかげで明示的に表せるようになったのです。
なので、以前ほど数字の使い分けに神経質になることは無くなりました。むしろsectionの頭は全部h1でもいい、というくらいのあまちゃんぶりです。

だったらhxではなくhというタグに集約すればよかったのに、なぜまだ見出し要素には数字が付いて回るのか。
私としては<h>タグでも良かったんじゃないかと思うのですが、この数字にはまだちゃんと使い道があります。

[パターンA]

<section>
    <h1>見出し</h1>
    <section>
        <h1>見出し</h1>
        <p>
            本文本文本文本文本文本文本文本文本文本文
            本文本文本文本文本文本文本文本文本文本文
        </p>
        <section>
            <h1>見出し</h1>
            <p>
                本文本文本文本文本文本文本文本文本文本文
                本文本文本文本文本文本文本文本文本文本文
            </p>
        </section>
    </section>
</section>

[パターンB]

<section>
    <h1>見出し</h1>
        <h2>見出し</h2>
        <p>
            本文本文本文本文本文本文本文本文本文本文
            本文本文本文本文本文本文本文本文本文本文
        </p>
            <h3>見出し</h3>
            <p>
                本文本文本文本文本文本文本文本文本文本文
                本文本文本文本文本文本文本文本文本文本文
            </p>
</section>

上記2つのパターンは、実は全く同じアウトライン構造を表します。
そう、hx要素のナンバリングを組み合わせると、明示的にセクショニング要素を使わずとも「暗黙的」アウトライン構造を示すことができるのです。(上のソースのようにインデントで表現すると分かりやすい)
メリットとしては、コード量が減り、入れ子の階層がシンプルになります。
私がコーディングするときは、articleの中身、つまりページごとに内容を変える部分はシンプルな造りにしたいので、パターンBの暗黙的セクショニングを使ったりします。

どちらにしても、例えばh3の直後にh2があったり、h1の次がh3に飛んだりするのは気持ち悪いし無意味なので、そのあたりの基本的な数字の扱いはXHTML時代と同じく守っておきましょう。

HTML5のコーディングは難しくない

むしろXHTMLより簡単だし、叙述的でありながら情緒的だということが分かっていただけたでしょうか。

要点だけ押さえるべく、簡略化したまとめになりましたが、多くの人が正しくHTML5を使うことがHTML5の普及につながり、ひいてはモダンブラウザ環境の普及にも繋がっていく(かもしれない)のです。

だから、我々web制作に携わる人間が音頭を取って「正しいHTML5」によるコーディングに拘っていかなくてはいけないのです。と綺麗に纏まったので"</article>"。