「section要素」と「見出し」の解釈

新しい要素の1つsection要素、「divとは違います」「コンテナ要素ではありません」などなど、HTML5を勉強し始めるとよく見かけるテーマの1つのなので、自分なりの解釈で要点を少々...

section要素の概要

一般的なセクションを表す。

セクションとは
見出しと内容を含んだグループ　章
その他のセクショニング要素
  • article要素は単体でも意味を成す内容を表す。
  • nav要素は主要なナビゲーションを表す。
  • aside要素はサイドバーなどの補足内容を表す。

目的と利点

文章構造の明確化。
セクションごとに、適切なランク付けの見出しを用いることが出来る。
論理的な構造化はプログラムにとっても理解しやすくなり、アウトラインアルゴリズムを活用した何らかの操作に役立てることが出来る。

アウトラインアルゴリズムとは
内容を階層に分けて順番に管理する事　階層構造
【例】
  1. 1. コンテンツタイトル
  2.   1.1. 記事その1
  3.     1.1.1. 記事その1の内容A
  4.     1.1.2. 記事その1の内容B
  5.   1.2. 記事その2

どんな時に使うのか？

判断基準は見出し要素。
見出し要素を使用した時点で検討する。
見出し要素がないのなら使用しない。

注意点
  • 内容に合わせて適切なセクショニング要素を選択する。
  • スタイルやスクリプトの都合で使用しない。その場合はdivを使用する。
  • 階層レベルは見出しレベル（数字）の「前後の大小」で判断する。
  • 見出しレベルが上がるか同等なら、そのセクションを終了し、
    同階層のセクションを設ける。
  • 見出しレベルが下がるなら、現在のセクションの下（内側）にセクションを設ける

【例】


	
コンテンツたいとる

	
テキストテキストテキストテキストテキストテキスト

	

		
記事その1

		
テキストテキストテキストテキストテキストテキスト

	

	

		
記事その2

		
テキストテキストテキストテキストテキストテキスト