世界一「雑」に説明するセマンティック・マークアップの手順（2）

前回の記事では、単純な文書を最低限セマンティックにマークアップする手順を解説しましたが、今回はそこから更に情報構造を肉付けしていってみたいと思います。
ただし、このnoteではあくまで出来るだけ楽に、でも不適切なマークアップにならないようにするための手順を示すことに主眼を置いているので、各要素の詳細な仕様や使い方の事例などは各自で調べるようにしてください。

コンテンツ情報をグルーピングする

見出し、段落、箇条書きといった文書内の個別の要素の意味づけが終わったら、次にそれらのコンテンツ情報を役割ごとにグルーピングして意味づけすることを検討します。

progateではコンテンツ同士のグルーピングは全てdivで行っていましたが、HTML5には色々な役割を持ったグルーピング要素が用意されていますので、そうしたものをうまく活用してマークアップするようにしましょう。

【１】ヘッダー/フッター/メインコンテンツ

まず、機械的に判断しやすいのがサイトのヘッダー領域、フッター領域、メインコンテンツ領域です。

Webサイトのヘッダー領域はheader要素、フッター領域はfooter要素、メインコンテンツ領域はmain要素でマークアップすることで、その領域の持つ役割を明確化することができます。

【２】ナビゲーション　

Webサイトには様々なナビゲーションが配置されますが、それらのうちそのWebサイトにとって重要だと思われるナビゲーションエリアは、nav要素でマークアップしましょう。

前回の記事でナビゲーションはul要素にすれば良いと書きましたが、それだけだと箇条書きの情報構造であることは示せても、「ナビゲーション」という役割を持っていることは伝えられません。ul要素でマークアップしたナビゲーションを、更にnav要素で囲むことで、明確に「ナビゲーションリンクである」ということをコンピュータに伝えることができるようになります。

【３】一般的なセクション構造

見出しとその見出しに伴う情報コンテンツのかたまりのことをセクションといいます。
見出しレベルが正しく設定されていれば、基本的な情報の階層構造（アウトライン）は自動的に作成されるのですが、実は見出しだけでは「どこからセクションが始まるか？」は示せても、「どこまでがそのセクションに含まれる情報なのか？」を明確に示すことはできません。

そこでHTML5では、sectionという要素を使ってその見出しの情報階層を明示することができるようになっています。
section要素を入れ子にする事で見出しだけでは表現しきれない正確な情報の階層構造（アウトライン）を表現できます。

section要素はセクションというものの定義からしてそもそも見出しを伴うものですので、見出しが存在しないところにsection要素を設置するのはsection要素の用途として望ましくない可能性がとても高くなります。従って、安全にsection要素を使おうと思うならまずは見出し要素を正しく設定し、その見出しで説明しているコンテンツの領域はどこか？ということを意識してマークアップするようにするとまずおかしなことにはならないのでお勧めです。

【４】独立した記事セクション

見出しとそれに伴うコンテンツのかたまりであるセクションのうち、内容的にそれ単体で配信可能な独立した記事コンテンツとなっているものについては、section要素ではなく、article要素を使ったほうがより適切なので、該当するものがないかどうかを一応確認しておきましょう。

なおarticle要素の対象となるセクションの代表的なものはブログのエントリーやニュースリリースなど、発行年月日をつけてアーカイブ管理して違和感のないコンテンツになるので、特にLPやコーポレートサイト等では使わないこともあると思います。

ザックリ言うと、WordPressで構築する場合の「投稿」で管理するタイプの文書コンテンツはaricleにしてもおおむね問題ないというイメージです。特にコーポレート系サイトの場合、迷ったらその辺を判断基準にするか、またはいっそのこと「使わない」という選択肢もあるかと思います（笑）

【５】補足的なセクション

例えば記事中の補足情報や関連リンク、余談として差し込まれるコラムや、あるいは広告エリアといった、本文コンテンツとの関連性が薄く、仮にセクションごと削除しても話の本筋には影響がないセクションがあったら、そこはaside要素でマークアップすることができます。

また、ブログ系のサイトなどでサイドバーを設置するレイアウトにしている場合、そのサイドバー全体をasideとすることも可能です。

aside要素も必ず使うわけではない要素ですが、補足情報であることを示しておくことで、間接的にメインのコンテンツ領域をより明確にする意図を示すことができるため、必要であれば使ってみると良いと思います。

ちょっと力試し

ここまでの解説を参考にして、次の文書のコンテンツを役割ごとにグルーピングして、今回紹介した要素を使ってマークアップしてみましょう。（1ページ単体のペラ文書で典型的なWebサイト構造ではないので逆にやりづらいかもしれませんが、典型的でない分いろんな考え方があっていいと思います。）

<h1>うちのにゃんこ</h1>
<p>うちのにゃんこさんたちのかわいい日常をちらっと紹介しちゃいます♪</p>

<ul>
<li><a href="#intro">ごあいさつ</a></li>
<li><a href="#cats">にゃんこ紹介</a></li>
<li><a href="#profile">飼い主紹介</a></li>
</ul>

<h2>ごあいさつ<h2>
<p>こんにちは！見てくれてありがとうございます。
うちのかわいいにゃんこさんたちを紹介するのでほっこりしてください♪<p>

<h2>にゃんこ紹介</h2>
<h3>●小町</h3>
<dl>
<dt>性別：</dt><dd>♀</dd>
<dt>年齢：</dt><dd>7歳</dd>
<dt>毛色：</dt><dd>黒</dd>
</dl>
<p>パパママ以外には基本誰にも懐かない超ビビリな性格な女の子。持病の猫喘息の影響でよくそこらじゅうで吐くのでひそかに「ゲロ町」とか言われたりもするけど、おめめくりくり、毛皮つやつやのかわいい奴です。</p>
<figure>
<img src="img/komachi.jpg" alt="写真：小町">
<figcaption>典型的箱入り娘の小町さん</figcaption>
</figure>

<h3>●小夏</h3>
<dl>
<dt>性別：</dt><dd>♀</dd>
<dt>年齢：</dt><dd>6歳</dd>
<dt>毛色：</dt><dd>白</dd>
</dl>
<p>短毛種なのになぜかフッカフカでモッフモフな毛皮を持ち、大型種でもないのに体重6kgオーバーの存在感ありまくりわがままボディな女の子。常にニャーニャースリスリゴロゴロしてかまって攻撃激しい甘えん坊さんです。</p>
<figure>
<img src="img/konatsu.jpg" alt="写真：小夏">
<figcaption>子守もおまかせ小夏さん</figcaption>
</figure>

<h2>飼い主紹介</h2>
<dl>
<dt>ハンドル名：</dt><dd>にゃんこ@マークアップの人</dd>
<dt>職業：</dt><dd>日々マークアップしたりCSS書いたりする人</dd>
<dt>趣味：</dt><dd>Twitter徘徊</dd>
</dl>

<p>©Copyright xxxxxxxxx All Rights Reserved.</p>

文書アウトラインのチェック

少し文法的に細かいことを補足すると、今回紹介したグルーピング用の要素のうち、section, article, aside, navの4つはいずれも「セクショニング・コンテンツ」と呼ばれるHTML5のカテゴリに所属する要素になり、それ自体が文書のアウトラインを生成する機能を持っています。

したがって、誤った使い方をすると知らない間に裏側でおかしなアウトラインが自動的に作られてしまう恐れがあります。①〜⑤の手順で役割とチェックポイントを確認しながらマークアップすればおおよそおかしなことにはならないとは思いますが、これらの要素を使った場合には念の為文書のアウトラインがどのように出力されているのかチェックしてみることをオススメします。

W3CのMarkup Validation Serviceの「More Options」で「Show Outline」にチェックを入れて文法チェックすると、見出しレベルでのアウトラインとセクショニング・コンテンツでのアウトラインを両方比較して出力してくれるので、一度は確認してみると良いと思います。

最後に

本当はこの後テキストレベルの細かいマークアップについても解説しようと思ったのですが、ちょっと長くなってしまったので今回はここまでにしておきます。繁忙期に入ってるので続きがいつになるかは分かりませんが、スキとかフォローとかサポートとかサポートとかしていただけると励みになりますので、応援よろしくおねがいします♪

続きが待てない方は弊著をご購入下さい（笑）

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】