今回はその中の１つであるsection要素を見ていきます。
section（セクション）とは章や節で見られるように見出しと中身がまとめられた範囲を指しています。
本などでそうですが、
・・・・・・
一章：桃太郎誕生
～川で桃を拾う～
むかし、むかし、あるところにおじいさんとおばあさんが住んでいました。
（どこに住んでたねん！？）
（中略）
～桃の中から～
川から拾ってきた桃を斧割ると中から可愛い赤ん坊が出てきました。
おじいさんは言いました。
「怪我しなくてよかった、よかった！」
桃から無事生まれた赤ん坊を２人は「桃太郎」と名づけました。
・・・・・・
という風に見出しである「桃太郎誕生」とそれに関する内容の文章が
合わさってセクションとなります。
さらに細かく一章の中にいくつかの節が「～桃の中から～」のように
ありますがこれももちろんセクションです。
これは本の世界だけでなく、通常Webの世界でも続くものです。
元のセクションがあって、その中に階層的にセクションが並んでいるのです。
元々ドキュメントというのはセクションのまとまりであります。
以前のHTML4などではマークアップだけで１つのセクションが
どこまでを構成しているかなんて分かったもんじゃありませんでした。
見出し要素の<h1>～<h6>要素でセクションを区別するために用いてたぐらいです。
従来のマークアップですと・・・
<h1>桃太郎</h1> <p>桃太郎とは?</p> <h2>生い立ち</h2> <p>桃から生まれた男の子とは？</p> <h3>なぜ川から流れてきたのか？</h3> <p>桃は川に流れやすい</p> <h3>なぜ斧で桃を割った時に怪我がなかったのか？</h3> <p>桃の強度</p> <h2>桃太郎のきびだんご</h2> <p>きびだんごの由来</p>
以上のような階層を持ったドキュメントのつもりとなっているのが従来のマークアップです。
「これで階層のようになっているやんね？」
と同じ階層であるのに若干ごまかしているのです。暗黙知的に階層であると。。。
そんなのいかんということで
HTML5で明示的に階層を示すことができるようになったわけです。
セクションを明示的に示す要素として、<section>や<article>などの要素が
役割を持つようになりました。
これらはセクションニング・コンテンツといい要素のグループ化がされています。
HTML5ですと・・・
<h1>桃太郎</h1><p>桃太郎とは?</p><section><h2>生い立ち</h2><p>桃から生まれた男の子とは？</p> <section><h3>なぜ川から流れてきたのか？</h3><p>桃は川に流れやすい</p> </section> <section><h3>なぜ斧で桃を割った時に怪我がなかったのか？</h3><p>桃の強度</p> </section> </section> <section><h2>桃太郎のきびだんご</h2><p>きびだんごの由来</p></section>
と階層的にマークアップすることできます。
構造的に非常に分かりやすくなったのがHTML5の魅力ということですね。
そこでsection要素についてふか
要素のグループ化のカテゴリー
○フロー・コンテンツ
○セクションニング・コンテンツ
コンテンツ・モデル
○フロー・コンテンツ
※フロー・コンテンツとはドキュメントに現れるコンテンツ全般を表しています。
コンテンツ・モデルの階層的にはフロー・コンテンツが上なのでフロー・コンテンツに
属していますが意味合いとしてはセクションニング・コンテンツの方が強いですね。
利用可能な場所
○フロー・コンテンツが期待される場所
開始タグと終了タグは必須
要素固有のコンテンツ属性はなし
section要素は名前から分かるように一般的なセクションを表します。
セクションニング・コンテンツに属する要素であるので
アウトライン・アルゴリズムというコンテンツの階層構造であるアウトラインを
どんな風になっているか見極めるための方法に基づいて
セクションを作ることになります。
よくわからないなという人もいると思うので
明日はアウトライン・アルゴリズムについて書こうと思います。
section要素をメモ書きする前にもっと基礎からやらねばですね！！
ちなみにこのmemo書きの参考文献や引用は
「徹底解説HTML5 マークアップガイドブック」
著者は羽田野 太巳さん
から多数memo書きしています。
メモなので自分なりに解釈して、似たようなことばかり書いています。
徹底解説HTML5マークアップガイドブック/羽田野太巳さん
￥3,150
Amazon.co.jp
0 件のコメント:
コメントを投稿