HTML5
最近クライアント様によく聞かれるので、
HTML5について書いていこうと思います。
既にご存知の方も多いかと思いますが、2014年10月28日にHTML5がW3Cの勧告となりました。
Web界隈では大きな話題として各種ニュースサイトなどで盛んに取り上げられていたものの、「勧告って？今までと何が変わるの？」「そもそもW3Cってなに？」など疑問に思った方も多いのではないでしょうか。
W3Cとは
「World Wide Web Consortium（ワールドワイドウェブコンソーシアム）」の略語で、Web技術の国際的な標準規格化の推進を目指す非営利団体のことです。
メンバーはWeb技術と関わりの深い企業や大学、研究所に所属する方、個人クリエイターなどで構成されており、Webに関する情報の提供、研究開発の促進、新技術の実装・テストなどに取り組んでいます。
現在、W3Cが策定するweb技術（HTML、CSSなど）の仕様書は、国際的な標準規格として広く認められております。「工業規格のWeb版」とイメージしていただくとわかりやすいかもしれません。
つまりW3Cとは、Webページを制作するうえでの国際的なルールを決めている権威ある団体、ということになります。
HTML5とは
HTMLの大きな改訂の第5版です。
これまでのwebサイトの多くは「HTML4」や「XHTML1」が使われていましたが、その後継となる新しいHTMLです。
※XHTMLで書かれたものはXHTML5となります。
HTML5の現状
HTML5は2008年に草案が発表され、2012年12月にHTML5の仕様策定が完了しました。
そして、2014年10月28日にHTML5がW3Cの勧告となりました。
そもそもHTML5で何ができるの？
HTML4やXHTML1は、「文書」の作成のためのマークアップ言語でした。
HTML5ではマークアップの拡張に加え、「アプリケーション」の要素を含んでいます。
HTML5で新規追加された仕様のなかでも、特によく紹介される仕様について紹介します。
シンプルな定型句
従来に比べて、DOCTYPE宣言や定型句はシンプルになりました。
| DOCTYPE宣言 | 外部ファイル | |
|---|---|---|
| HTML4.01 transitional | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
<link rel=”stylesheet” href=”style.css” type=”text/css”> |
| XHTML1.0 Strict | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> |
<link rel=”stylesheet” href=”style.css” type=”text/css” /> |
| HTML5 | <! DOCTYPE html> | <link rel=”stylesheet” href=”style.css”> |
構造化タグによるマークアップ
HTML4までは、構造を示すタグは存在しませんでした。そのため<div id=”header”>…などとIDやクラスを付与した記述により構造化していました。
しかしHTML5では<header><nav><section><article><footer>など、タグのみでブラウザや検索エンジンに対して明確に文書構造を示せるようになりました。これによってアクセシビリティも向上しますね。
| HTML5で新規追加されたタグ | |
|---|---|
| <section> | 一つのセクションであることを示す |
| <nav> | ナビゲーションであることを示す |
| <article> | 記事であることを示す |
| <aside> | 余談・補足情報のセクションであることを示す |
| <hgroup> | セクションの見出しを表す、見出しをまとめる |
| <header> | ヘッダであることを示す |
| <footer> | フッタであることを示す |
| <figure> | 図表であることを示す |
| <figcaption> | 図表のキャプションを示す |
| <time> | 日付や時刻を正確に示す |
| <mark> | 文書内の該当テキストを目立たせる |
| <ruby> | ルビをふる |
| <rt> | ルビのテキストを指定する |
| <rp> | ルビを囲む記号を指定する |
| <wbr> | 改行しても良い位置を示す |
フォームの拡張
HTML5では、フォームに関する新しい属性や属性値が多数追加されました。
<input>要素のtype属性が大量に追加され、今まで使うことのできなかった機能が、HTMLタグの属性だけで実現できるようになります。
図形の描画<canvas>要素
Canvasは、図形を描画するための技術仕様です。HTMLの<canvas>とJavaScriptを組み合わせて図形を描画します。
いままではFlashなどのプラグインを必要としていましたが、Canvasはプラグインを使用しません。
Canvasの技術仕様に沿った書式のJavaScriptで描画内容を指定することで、様々な図形の描画やそれらの変形、画像やテキストの合成などの表現が可能となります。
画像と比べてスクリプトでの描画はデータ量が軽く、リアルタイムのデータを反映したグラフの描画など、動的に異なる図形を表示させることが可能なので、アイディア次第で様々な表現ができます。
下記のSchooさんの授業のようにCanvasでクリスマスツリーを作ったりすることもできるんですね♪
↓
※この授業（＾＾）
