WordBench鹿児島 × コーディングデザイン × Concent「IA塾」

3月16日(土曜日)に森が2010年まで在籍していた株式会社コンセントさんとWordBench鹿児島さんと共同で「IA塾」を開催することになりました!

WordBench鹿児島 × コーディングデザイン × Concent「IA塾」

森は株式会社コンセントには4年近く在籍しました。
情報設計(IA)にとても長けた会社で、クライアントの問題解決について突き詰めて調べる、突き詰めて考えるということが徹底していました。
とてもたくさん勉強させていただきましたし、いまでもなお得るものが多い会社です。

情報設計が得意な会社でIAとして働いている方から講義とワークショップをしていただきます。
鹿児島近辺でWebサイト制作をされている方にとって、Webサイト制作の視点を広げるものになります。ぜひご参加ください!

そろそろHTML5:セクショニング・コンテンツ

HTML5がけっこう使われるようになってきたかな?というところですが、いかがでしょうか。
既存のWebサイトはまだHTML4やXHTML1だと思いますが、新規制作ではHTML5が使われることが普通になってきてますね。

コーディングデザインではHTML5の重要なところを書いていきます。
今回は「セクショニング・コンテンツ」です。

HTML4とHTML5の文書構造

セクションはHTML5でのマークアップで理解しにくいところです。
HTML4やXHTML1では「見出し要素」を使って階層構造を作ります。
階層構造をしっかり作ることで、重要な部分を明確に示すHTML文書を作ることができます。

<body>
<h1>大見出し</h1>
<h2>小見出し</h2>
<p>本文</p>
<h2>小見出し</h2>
<p>本文</p>
</body>

いっぽう、HTML5では「セクショニング・コンテンツ」を使って階層構造を作ること「も」できます。

<body>
<h1>大見出し</h1>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
<section>
<h2>小見出し</h2>
<p>本文</p>
</section>
</body>

HTML5は完全に新しい仕様ではなく、HTML4とXHTML1のどちらもとりこんでいるので、「見出し要素」でも「セクショニング・コンテンツ」でも文書構造を作ることができます。

セクショニング・コンテンツって何?

HTML4ではブロック要素、インライン要素と呼んでいた要素のカテゴリーは、HTML5では以下のように区分けがかわりました。

  • メタデータ・コンテンツ…head要素の中に入るような要素
  • フロー・コンテンツ…ほとんどすべての要素
  • セクショニング・コンテンツ…article, aside, nav, sectionの4要素
  • ヘッディング・コンテンツ…h1〜h6要素とhgroup要素の見出し関係の要素
  • フレージング・コンテンツ…ほぼHTML4までのインライン要素のような文章の途中に使う要素
  • エンベデッド・コンテンツ…画像、動画、音楽など、外部リソースを埋め込むための要素
  • インタラクティブ・コンテンツ…リンクやフォーム系の要素、動画や音声を埋め込む要素で操作パネルがついてる状態など、ユーザーのアクションに反応する要素

セクショニング・コンテンツarticle, aside, nav, sectionの4要素です。

  • article…独立した記事
  • aside…関連記事
  • nav…主要なナビゲーション
  • section…一般的なセクション(テーマ区切り)

この要素たちは「セクション」を作ることができます。
セクションは書籍でいうところの章や節などのテーマの区切りです。セクションがあることで階層構造が明確になります。
HTML4やXHTML1では見出し要素という「点」で階層構造を作っていましたが、セクショニング・コンテンツはどこからどこまでという「範囲」で階層構造を作ることができます。
書籍にないWebならではの機能「ナビゲーション」はセクションと認識させることになってます。

つまり、セクショニング・コンテンツの重要な役割は「明確にセクションをつくることで、階層構造を範囲で示す」ということになります。

ブログはどうするの?

HTML5なら階層構造はセクショニング・コンテンツで作るべきだ!なんてことはありません。
ブログのWYSIWIGエディタでセクショニング・コンテンツの要素を入れ込むことはできません。なので、こうした領域は見出し要素による階層構造を使うことになります。

まとめ

  • セクショニング・コンテンツは「明確にセクションをつくることで、階層構造を範囲で示す」
  • セクショニング・コンテンツはarticle, aside, nav, sectionの4要素。
  • ブログのWYSIWYG部分は見出し要素による階層構造でOK。