marketingblog.jp

世界のインターネット企業の動向とソーシャルメディア、スマートフォン関連のブログ情報サイト

【第7回】HTML5とHTML4,XHTMLの違いその6:セクションとアウトライン

Posted by 寺西 裕紀 | 12月 21, 2011 | No Comments

Share on Facebook
このエントリーをはてなブックマークに追加
Bookmark this on @nifty clip
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on FC2 Bookmark

HTML5とHTML4,XHTMLの違いについて最後となるこの回ではセクションとアウトラインという概念について説明する。

セクション

セクションとは文章の一区分のことである。文章は複数の章から成り、各章はそれぞれ見出しと内容を持つ。各章の内容にはさらに細分化された節という区切りが存在し、章と同様に節もそれぞれが見出しと内容を持つ。このような見出しと内容のひとまとまりをセクションという。本は章という複数のセクションに分かれ、それぞれの章は節というセクションを持っている。本自体が「本」という一つのセクションを成しているとも言える。文章は同じ大きさのセクションの集合が成す階層によって構造化されている。

パーフェクトJavaScript
├■Part1　JavaScript~overview
│└1章　JavaScriptの概要
├■Part2　JavaScript言語仕様
│├2章　JavaScriptの基礎
│├3章　JavaScriptの型
│├4章　文、式、演算子
│├5章　変数とオブジェクト
│├6章　関数とクロージャ
│└7章　データ処理
├■Part3　クライアントサイドJavaScript
│├8章　クライアントサイドJavaScriptとHTML
│├9章　DOM
《省略》

ウェブページも例外ではない。文書量や見出しの数の違いはあるが、多かれ少なかれHTML文書も階層を持つ。

旧来のHTMLでは、文書を階層化するために見出しの大きさに応じてh1～h6要素が使われてきた。

<h1>表題</h1>
<p>...</p>
<h2>第1章</h2>
<p>...</p>
<h3>1.1.節</h3>
<p>...</p>
<h3>1.2.節</h3>
<p>...</p>
<h2>第2章</h2>
<p>...</p>
<h3>2.1.節</h3>

階層の深さは見出し要素の数字によって暗黙的に表されていたが、上の例のように見出し要素で区切られた章や節の内容はマークアップ上では同じ階層に位置することになる。章という大きなセクションと節という小さなセクションが階層関係でなく並列な関係を表しているのだ。

HTML5では明示的に文書構造をマークアップできる要素が新たに規定された。sectionやarticleなどといったセクショニング・コンテンツに属する要素を使うことで、セクションを明示的に囲い込み、文書の階層構造を示すことができる。

<h1>表題</h1>
<p>...</p>
<section>
  <h2>第1章</h2>
  <p>...</p>
  <section>
    <h3>1.1.節</h3>
    <p>...</p>
  </section>
  <section>
    <h3>1.2.節</h3>
    <p>...</p>
  </section>
</section>
<section>
  <h2>第2章</h2>
  <p>...</p>
  <section>
    <h3>2.1.節</h3>

アウトライン

このようにHTML5ではマークアップ上でもコンテンツの階層構造を示すことができるようになった。人間だけが理解できる暗黙的な階層構造でなく、マークアップによってコンピュータでも理解することができるように明示的に表された階層構造のことをアウトラインという。

HTML5でマークアップする場合、コンピュータでも理解することができる階層構造を意識する必要がある。そのためにはまず、マークアップが構造化（アウトライン化）されるアルゴリズム（アウトライン・アルゴリズム）を理解しなければならない。以下アウトライン・アルゴリズムを簡単に説明する。

まずセクショニング・コンテンツに属する要素が使われていないマークアップの場合、見出し要素が現れるたびにその数字の大きさによってアウトライン化が行われる。アウトラインにおける階層の深さをアウトライン・レベルというが、以前に現れたセクションの見出しと比較して数字が大きい場合アウトライン・レベルが1段階下がり（より深い階層となり）、小さい場合はアウトライン・レベルが上がる（より浅い階層となる）。
次にセクショニング・コンテンツの属する要素を用いたマークアップの場合だが、この場合はセクショニング要素が現れるたびにアウトライン・レベルが1段階下がり新たなセクションが開始されたという解釈がなされる。この要素の中で最初に現れる見出し要素がそのセクションにおける見出しとなり、セクショニング要素の閉じタグが現れた時点でそのセクションが終了したと解釈される。ただしセクショニング・ルートというカテゴリーに属する要素はアウトライン・アルゴリズムにおいて独立したコンテンツとしてみなされるため、これらの要素の中にセクションが存在していてもアウトライン化はされない。

詳しい説明・例は参考URLを見ていただきたい。またマークアップされたHTML文書のアウトラインを確認する場合はHTML 5 Outlinerというツールを利用するとよい。

以上6回に渡りHTML5と旧来のマークアップとの違いを説明してきた。この違いは一言で”よりセマンティックになった”と言えるだろう。セマンティックなHTML5が持つもう一つの特徴であるAPI群については、今後メインで解説していく。各要素の使い方は必要に応じて追加で解説するが、全ての要素については網羅することはおそらくできないのでご了承いただきたい。要素の属性などの細かな違いはその属性に関連した要素を用いる場合に解説していきたいと思う。

■参考URL:

Category: html5

Comments

  • ABOUT

    このサイトでは、海外の情報サイトの参照と独自調査をしながら世界の注目企業の動向と、最近のソーシャルメディア（Facebook/Twitter等）、スマートフォン（iphone/android等）の動向について情報発信を行っていきます。

  • タグクラウドテスト

  • Twitterアカウント

  • カテゴリー

  • RSS Last Day. jp