HTML5×CSS3 DOCUMENT WORKSPACE
 HTMLワーキンググループにより策定され次世代HTML標準になったHTML5及び新しく構造化文書を表現する方法として標準化されたCSS3を使用するサイト制作が主流となってきておりますが、当サイトではHTML5/CSS3草案より要素・構文の変更点や利便性・機能性の向上を確認していきながら次世代標準化仕様を広めていく目的でHTML5/CSS3を使用してサイト制作を行っております。
 当サイトにつきましては制作過程であり定期的に更新を行っております。誤表記や内容等の誤りにつきましては発見次第できる限り修正を図っていく意識で制作に取り組んで参りますのでご了承下さいますようお願い申し上げます。
HTML5 DocumentWorkspace Root > HTML5 Element -外部コンテンツ読み込み iframe

HTML5 Contents Model Outline MarkupRule

 HTMLで記述構文をする上で重要なポイントを載せていきます。HTMLで使用される要素の定義、ページの階層構造を決めるアウトライン・アルゴリズム、マークアップルール等、サイト制作を行う上で非常に重要な項目となっています。

 HTML5によるマークアップについて詳細をご確認したい方は以下のサイトで確認をお願いします。

W3C - The Markup Language (an HTML language reference)

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 よりご確認をお願いします。

W3C - HTML 5.1

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