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

HTML5/CSS3 Information

 当サイトではHTML5/CSS3を使用いたしまして制作及び記述法の説明を行っております。既存のHTMLの記述と異なっている点といたしましては冒頭の記述の簡略化、要素の追加が加わり以前より記述がしやすく、より柔軟にサイト構成ができるようになりました。

 今回の大きな変更点としては、既存のHTML4では動画を動かす場合にはFlashプラグインが必要でしたが、HTML5では必ずしも必要ではなくHTML及びCSSの記述のみで可能になったことが既存のHTMLとの大きな違いであり魅力です。HTML5とCSS3を使用することで動的なサイトがより簡単に作成することが可能になっています。

 HTML5/CSS3での新機能・変更を要約すると主な点として次のことがあげられます。
・文章の構造化が進み、ページの内容をより明確に検索エンジンに伝えることが可能となったこと
・様々なAPIが追加されたことでプラグインを必要とすることなく動画や音声データの公開がHTML内でコード記述が可能となったこと
・オフラインでもWebサイトのデータ閲覧が可能であること
・2D画像や3DをWEB上で比較的簡易なコード記述で表現することが可能であること

次の節よりHTML4からHTML5への変更について説明をしていきます。

W3C - HTML 5 differences from HTML 4

HTML5と旧来のマークアップとの違いは大きく3つに分けられます。

コンテンツモデルの導入
コンテンツモデルとは要素をグループ化するものでそれぞれのグループに名前をつけくくるという概念です。各グループではどのようなコンテンツを入れるのか規定されます。
アクセスビリティ重視
これまでのHTML4ではなかったアクセシビリティに配慮した規定が追加されました。
要素の変更
HTML5では新たにいくつかの要素が導入されています。section要素、hgroup要素などの文書構造に関係するものや、video要素、audio要素、canvas要素などAPIの利用を可能とする要素です。 また同様に削除となった要素もありbig要素、center要素が該当します。記述面では文字エンコーディングの指定方法、DOCTYPEの指定方法、MathML、SVGなどの扱いが変更されています。

W3C -HTML 5 differences from HTML4 について詳細をご確認したい方は以下のリンク先で確認をお願いします。

W3C - HTML 5 differences from HTML 4 日本語訳
W3C - HTML 5 differences from HTML 4 原文

1. DOCTYPE

 従来のHTML宣言文では<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">と冒頭に記述していましたがHTML5では簡略化され<!DOCTYPE html>での記述ですむようになりました。
 HTML5 の HTML 構文は、ブラウザーにページを標準モードで表示させるよう、DOCTYPE を必須としています。HTML 構文では大文字と小文字を区別しません。

Example

HTML記述
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example HTML5</p> </body> </html>

2. XML文書構造

 HTML5 で使用できるもうひとつの構文は XML です。この構文は XHTML文書および、その実装と互換性をもちます。XML 構文を使用する文書は、XML のメディア型を利用する必要があります。また、XML 仕様にて述べられた規則に基づき、要素は http://www.w3.org/1999/xhtml 名前空間に属する必要があります。
 次の例は、HTML5 文書の XML 構文に適合する文書の例です。この XML 文書は XML のメディア型、すなわち application/xhtml+xml, または application/xml で提供される必要があることに注意してください。

Example

HTML記述
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example</title> </head> <body> <p>Example paragraph</p> </body> </html>

3.文字エンコーディング

 HTML5仕様ではmeta要素にcharsetコンテンツ属性が新たに規定されています。head要素の中に次のようなmeta要素を使って文字エンコーディングを指定します。

Example

HTML記述
旧来の文字エンコーディング指定
<meta http-equiv="content-type" content="text/html";charset=UTF-8" />
HTML5文字エンコーディング指定
<meta charset=UTF-8" />




4. New Element

 HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されています。

section
文書やアプリケーションにおける一般的なセクションを表します。h1, h2, h3, h4, h5, h6 要素と共に使用することで、文書構造を表すことができます。

article
要素はブログのエントリや新聞記事など、文書内で自己完結可能な箇所を示します。

aside
ページ内にある見出しの補足文章等に使用します。

hgroup
セクションの見出しを表します。また見出しをグループで関連付ける場合に使用します。

header
ページのヘッダー部分として、導入部やナビゲーションをグループ化します。

footer
セクションのフッタを表します。フッタには作者に関する情報や、著作権情報などを含められます。

nav
ナビゲーションとなるセクションを表します。ページのメニュー部分に使用されます。

figure
本文から単独で参照されることの多い、自己完結した内容を表します。

figcaption
figcaption 要素はfigure要素の中で使用しfigure要素中のコンテンツのキャプションや説明をします。

Example

HTML記述
<figure> <video src="example.webm"></video> <figcaption>Example</figcaption> </figure>

audio/video
マルチメディアコンテンツのための audio 要素と video 要素が導入されました。どちらの要素にも API が提供され、製作者がスクリプトを利用し独自のユーザーインターフェースを開発できます。もちろん、ユーザーエージェントが自動的にインターフェースを用意する仕組みも提供されます。また、source 要素を使えば、異なるメディアデータを選択させることもできます。

Example

HTML記述
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"></meta> </head> <body> <video controls="controls"> <source src="video/01.ogv" type='video/ogg; codecs="theora, vorbis"'/> <source src="video/01.webm" type='video/webm' > <source src="video/01.mp4" type='video/mp4'> <p>このブラウザは対応していません</p> </video> </body> </html>

videoタグ使用については対応ブラウザが必要です。


canvas
要素はグラフやゲームなど、動的に描画・更新が行われるビットマップグラフィックスに用いられます。

embed
embed要素は外部コンテンツをプラグインするために使用されます。

mark
mark要素はコンテンツ内のテキストと区別するためにハイライトを行います。

progress
progress要素はhtml5からの新属性でタスクの進捗状況を示す場合に使用します。同じ様に使用される要素としてmeter要素があります

meter
meter要素は最小値、最大値を指定した範囲内での数値を表す場合に使用されます。

time
time要素は日時を指定するコントロールを提供します。input typeの後にtimeを指定します。ブラウザによって表示が異なっております。Google chromeでは確認しております。
<input type="time" name="time"/>

ruby
ruby要素は語句にルビをふります。ルビをふる語句に<rt>を使用します。

将能しょうのうありて君御きみぎょせざるものは

きゅうへん


bdi
その周囲のテキストとは異なる書字方向の語句の範囲を指定します。たとえばアラビア語などで書字方向が右から左へと記述する言語の場合、その前後のテキストがそのアラビア語の書字方向に影響を受けないようマークアップする為に使用します。

details
details要素は、追加情報や詳細情報のコントロール、そこから詳細ウィジェットを表示します。ブラウザがこのスタイルを解釈できない場合には無視して表示されます。

Example

HTMLワーキンググループにより策定され次世代HTML標準になったHTML5及び新しく構造化文書を表現する方法として標準化されたCSS3を使用するサイト制作が主流となってきておりますが、当サイトではHTML5/CSS3草案より要素・構文の変更点や利便性・機能性の向上を確認していきながら次世代標準化仕様を広めていく目的でHTML5/CSS3を使用してサイト制作を行っております。
HTML5 Contents Model Outline MarkupRule
HTMLで記述構文をする上で重要なポイントを載せていきます。HTMLで使用される要素の定義、ページの階層構造を決めるアウトライン・アルゴリズム、マークアップルール等、サイト制作を行う上で非常に重要な項目となっています。
HTML5 Element -Sectioning contents/Frow Contents
HTML5で使用される新要素について最初のページでふれましたが、ここでは更に新要素について詳細内容を説明していきます。
HTML5 Element -外部コンテンツ読み込み iframe/embed/object
HTML5で使用される新要素についてメインページで軽く説明を致しましたが、ここでは更に詳細に説明をしていきます。ここでは外部コンテンツの読み込みとしてiframe,embed,object要素を使用した例を取り上げていきます。
HTML5 Element -Validation
ここではホームページ制作する上でルールに沿った作成を行っているか検証する方法について確認します。今回、Validater.nuを使用して本ページの検証を行います。
HTML5 Element -form関連要素
HTML5で使用される新要素につきましてはメインページで記述いたしましたが、ここでは更に各要素について詳細に説明を行っていきます。

各要素の詳細につきましてはW3C HTML: The Markup Language (an HTML language reference)に記載がされています。

HTML: The Markup Language (an HTML language reference)

W3C -HTML5の新要素につきまして詳細を確認されたい方はW3C - HTML 5 differences from HTML 4で確認が可能です。

W3C - HTML 5 differences from HTML 4 日本語訳

5. Application Programming Interface

 HTML5 は Web アプリケーションを製作する手助けとなるいくつかの API を提供します。これらの API は新しいアプリケーションのために導入された要素と共に使用できます。

主なAPI
・新しい video 要素と audio 要素で利用可能な、ビデオやオーディオを再生するAPI
・オフラインアプリケーションを可能にする API
・Web アプリケーションが、位置情報を記憶したり特定のプロトコルやメディア型に対して自身を登録するためのAPI
・新しいグローバル属性 contenteditable と共に用いられる、編集 API
・draggable 属性と共に用いられる、ドラッグ & ドロップ API

About HTML5/CSS3 Document workspace

 今回のHTML5でのWebページの製作にあたり以下のサイトを参考にさせていただきましたので紹介させていただきます。タグ・要素の再確認、既存のHTML記述よりHTML5の仕様の違い、サイト制作方法、バリデーションについてなど様々な情報を学習させていただいています。

 簡易構成での制作でしたが、今後も新しい技術情報に注目して更に表現力のあふれる動的なWEBサイト制作を目指していきたいと思っています。

HTML5でサイトをつくろう!ゼロからはじめるHTML5でのサイト制作
HTML5クイックリファレンス