eyemovic inc.

Culture blog会社の活動・働き方

2012.06.07

HTML5のsection

HTML5には、section(セクション)というタグがあります。
文章構造を整理するものです。
 
セクションとは、日本語で第1節、第2節の「節」です。
ちなみに、章は英語でチャプター(chapter)です。
 
とある記事のコーディングについて、
下記の見出しは同等の扱いとすることができます。
 
— HTML4 ——
<div>
  <h1>見出しランク1</h1>
  <h2>見出しランク2</h2>
  <h3>見出しランク3</h3>
  <h4>見出しランク4</h4>
  <h5>見出しランク5</h5>
  <h6>見出しランク6</h6>
</div>
 
— HTML5 ——
<article>
  <h1>見出しランク1</h1>
    <section>
      <h1>見出しランク2</h1>
      <h2>見出しランク3</h2>
      <section>
        <h1>見出しランク4</h1>
        <h2>見出しランク5</h2>
        <h3>見出しランク6</h3>
      </section>
    </section>
</article>
 
これで何が便利になるかというと、
 
・ひとつのHTMLファイル内でページ遷移するように見せる場合に、見出し順序の矛盾を回避できる。
・Ajaxによる非同期通信で別ファイルとページ遷移する場合に、見出し順序の矛盾を回避できる。
・h1の位置を柔軟に変更でき、階層ごとにCSSを統一できる。
・h7はないんですか?というときに、多様性のあるアウトラインができる。
 
他にもあるかもしれません。
 
sectionは、divの代用品としてコンテナ代わりに使うのではなく、
効率良く文章構造を整理するための利用価値があります。
 
 
————
 
 
HTML5繋がりで。
Googleが公開している、プレゼン用のHTML5です。
キーボードの矢印キーでページ遷移できます。
http://html5slides.googlecode.com/svn/trunk/template/index.html#1
 
こちらは、おそらくプレゼン用なので特に文章構造はなく、
この見栄えのテキストにしたいから、この見出しタグで囲む という発想です。
ソースは、<article> 〜 </article> で1ページ分です。
 
ウェブブラウザ上で見せるプレゼンなので、
cssやJavaScriptの演出ができるというメリットがあります。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。