HTML5 DocumentWorkspace Root | > | HTML5 Element -外部コンテンツ読み込み iframe |
HTML5 Contents Model Outline MarkupRule
HTMLで記述構文をする上で重要なポイントを載せていきます。HTMLで使用される要素の定義、ページの階層構造を決めるアウトライン・アルゴリズム、マークアップルール等、サイト制作を行う上で非常に重要な項目となっています。
HTML5によるマークアップについて詳細をご確認したい方は以下のサイトで確認をお願いします。
HTML5 Contents Model
コンテンツモデルとはその要素にどんなコンテンツを入れてよいのかを定義したものをコンテンツ・モデルと呼び、どの要素にもコンテンツ・モデルの定義がされています。
代表的なものがhtml要素には最初にhead要素、次にbody要素を入れる、hgroupには一個以上のh1-h6要素を使用しなければならないなどがあります。 HTML5でマークアップする上で、使用する要素がどのカテゴリーに属し、どの場所で使用可能なのか、どのようなコンテンツモデルを持つのかを把握しておくことが重要です。
1. Category
HTML5の要素は以下のカテゴリーに分類することができます。
メタデータ・コンテンツ
メタデータコンテンツは主にドキュメントのメタデータやスタイルの定義であり基本的にはブラウザー上に直接表示されないような要素となります。
base,command,link,meta,noscript,script,style,title
フロー・コンテンツ
フローコンテンツは基本的にはドキュメント内に現れるコンテンツ全般をあらわします。このカテゴリに属する要素の一例が以下の要素です。
a,abbr,article,aside,audio,b,bdo,blockquote,br,button,canvas,cite,code,command,figure,foote,form,h1-h6,header,hgroup,img,input,nav,menu,textarea
セクショニング・コンテンツ
セクショニングコンテンツとは章や付しのように見出しからその内容までを含んだ範囲(セクション)を定義するコンテンツを表します。以下の要素がセクショニング・コンテンツです。
article,aside,nav,section
ヘッディング・コンテンツ
ヘッディングコンテンツとは見出しを表し以下の要素が含まれます。
h1-h6,hgroup
フレージング・コンテンツ
フレージングコンテンツとはドキュメントのテキストのことで段落の中にあるテキストの範囲を指し示す要素がフレージングコンテンツにあたります。 p要素のように段落そのものを表す要素やsection要素はこれには含まれずhtml4でのインライン要素に近い要素のことを指し示すようです。一例を挙げると以下の要素がフレージングコンテンツです。
script,textarea,time,video,command,datalist
エンベディット・コンテンツ
ドキュメント・コンテンツとはドキュメントの中に外部のリソースをインポートするコンテンツやHTMLではない別の言語で表されるコンテンツのことを表します。
audio,canvas,embed,iframe,img,math,object,svg,video
インタラクティブ・コンテンツ
インタラクティグ・コンテンツとはユーザーが操作をすることができるコンテンツを表し、ハイパーリンクなどが含まれます。
a,button,iframe,detail,embed,label,select,textarea
セクショニングルート
一部の要素はセクショニング・ルートと呼ばれるカテゴリーに属します。ドキュメントは章、節の階層をもちますが、セクショニングルートに属する要素の中のコンテンツはその前後のコンテンツとは切り離されたものとしてみなされ独立したコンテンツとなります。
blockquote,body,details,fieldset,figure,td
コンテンツモデルにつきまして詳細を確認されたい方はW3C - HTML 5.1 - 3.2.5 Content models よりご確認をお願いします。
HTML5 Outline 階層構造
HTML5ではコンテンツの階層構造を判別する定義がなされており、新要素としてセクション要素が使用されます。階層構造を判断する判断基準は見出し要素のh1-h6が必要ですが、その理由として見出し要素が階層構造を決める判断基準となります。
前のセクションの見出し要素に対して次のセクションの見出し要素の数字が大きいかどうかを判断しページの階層構造を作ります。
以下の例がセクションを使用した階層構造の構文になります。
HTML5 MarkupRule
HTML5でもマークアップルールが定められています。簡単に例を挙げていきます。
1. 終了タグの省略
一部のタグについて終了タグを省略することが可能です。li要素の場合は次にli要素がくるかもしくは親要素の一番最後に来る場合に、p要素は親要素の一番最後に来る場合に終了タグを省略が可能となっています。 ただし、省略するのはその要素のデータがどこまでなのかわかりづらくなること、終了タグの省略は要素によってパターンが異なるため、一般的には終了タグを使用するほうが良いようです。
li要素、p要素
2. 空要素
空要素は自身にコンテンツを一切持たない要素のことで、終了タグを必要としません。 例としてはimgソースを挿入する場合に終了タグ(/img)を必要としないことです。 空要素の一例は以下のとおりです。
area,base,br,col,command,embred,hr,img,input,keygen,link,meta,param,source
CorporateSite