| HTML5 DocumentWorkspace Root |
HTML5/CSS3 Information
当サイトではHTML標準化仕様のW3Cドラフトの翻訳を進めながらHTML5/CSS3を使用したサイト制作とHTML/CSSの記述法をご紹介しています。既存の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 について詳細をご確認したい方は以下のリンク先で確認をお願いします。
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要素は、追加情報や詳細情報のコントロール、そこから詳細ウィジェットを表示します。ブラウザがこのスタイルを解釈できない場合には無視して表示されます。
- 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で使用される新要素につきましてはメインページで記述いたしましたが、ここでは更に各要素について詳細に説明を行っていきます。
Example
各要素の詳細につきましてはW3C HTML: The Markup Language (an HTML language reference)に記載がされています。
W3C -HTML5の新要素につきまして詳細を確認されたい方は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
このウェブサイトに記載したW3Cドラフトの翻訳と解析をするにあたり、翻訳の解釈や記述法で以下のサイトを参考にさせていただきましたのでご紹介をさせていただきます。タグ・要素の確認、既存のHTML記述よりHTML5の仕様の違い、サイト制作方法、バリデーションについて、様々な側面から学習をさせていただいています。
今後も更新されるW3Cドラフトの技術情報に着目して、より表現力のあふれるWEBサイト制作を目指して解析を進めていきたいと考えています。
CorporateSite