(2008.9.27) 新規作成
(2017.6.3) 最近の状況にアップデート.
HTML5は、HTML 4.01 (1999年) から15年ぶりとなった、HTML仕様のバージョンアップです。Apple, Mozilla, OperaなどによるWHATWGコミュニティで開発されたものを、W3C勧告として纏めたものです。
[2017-06] HTML仕様の現在の最新版は, WHATWG で開発されている, HTML Living Standard (2017年5月30日).
W3Cからも, バージョン番号を付けて纏めたものが出ている。HTML5勧告 = 2014年10月。しかし、HTML 5.1 (2016年11月) 以降は、WHATWG のものとさまざまな差異があり、仕様の品質も低く、参照すべきではない。これだけ大きな規格の二重開発は, 労力の無駄、粗大ゴミ。
W3Cのは『欠陥フォーク』！？ HTMLスナップショット2016 ── HTML5 Conference 2016セッションレポート | HTML5Experts.jp
2019年5月, W3Cはようやくやっと、独自のHTML 5.3とDOM 4.1の開発を終了させることに合意した。Memorandum of Understanding Between W3C and WHATWG
Validator.nu (X)HTML5 Validator アドレスを指定したり、ファイルをアップロードして検査できる。
ソースコードはこちら;
スキーマは RelaxNG + Schematron で書かれている.
W3C HTML5にはない, hgroup 要素にも対応。
HTML 4との違いがW3Cから出ている;
変更点は多岐に亘っていますが、追加される要素、属性は、Webブラウザの世代交代を待たなければ、もしくは古いWebブラウザでも使えるような手当てがされるまで、書くわけにはいかないと思います。
そういう意味で、すぐに使えそうなところを挙げると、
canvas要素 - 2Dグラフィック
ruby, rt, rb 要素 - ルビ
contentEditable 属性 - IE 5.5+, Firefox 3+
| 要素名 | 説明 |
|---|---|
| section | 文書のアウトラインを作るため.
W3C HTML 5.1は, HTML5 (5.0) から変更し, 入れ子になったsection要素で、入れ子のレベルとh1-h6要素のランクを一致させるべき (SHOULD) としている。§4.3.10. Headings and sections. WHATWG の方は、次のような書き方も可. 各section要素の子としてh1を使う. HTML/XML
|
| hgroup | 文書のアウトライン. WHATWG HTMLのみに存在 (W3C HTML5には存在しない)。 |
| article | 文書のアウトライン. ネスト (入れ子) 可. |
| nav | 文書構造. 子として main要素を含めることはできない. |
| aside | 文書構造. 子として main要素を含めることはできない. |
| main | 文書構造. 文書のアウトラインではない. |
| header | 文書構造. 子として header, footer, main 要素を含めることはできない. |
| footer | 文書構造. 一つの文書中に複数可. 子として header, footer, main 要素を含めることはできない. |
| figure, figcaption | |
| template | |
| video, audio, source | |
| track | video, audio要素の子として使用. |
| embed | |
| mark | |
| progress | |
| meter | |
| time | |
| ruby, rt, rp | |
| bdi | |
| wbr | |
| canvas | |
| datalist | input要素のlist属性から呼び出される. |
| keygen | |
| output |
WHATWG のほうには, hgroup要素がある。
input要素の, 新しいtype属性値:
作成する文書を HTML5に準拠するために、廃止されたものは, 代替的な書き方を押さえておく必要があります。
HTML 4で非推奨 (deprecated) となっていたものが中心.
u要素はイキ.
| 廃止された要素 | 移行先 | 備考 |
|---|---|---|
| applet | embed または object | |
| basefont | CSSを利用. | |
| big | CSSを利用. | |
| center | CSSを利用. | |
| font | CSSを利用. | |
| isindex | フォームコントロール | |
| strike | CSSを利用. | s要素はイキ. |
| tt | CSSを利用. | |
| frame, frameset, noframes | iframeはイキ. | |
| acronym | abbr | |
| bgsound (非標準:IE) | audio要素 | |
| dir | ul要素 | menu要素は, HTML4で非推奨となり, いったんHTML 5.0 で廃止。
WHATWG では, コンテキストメニューまたはツールバーとして蘇った。 |
accesskey属性は, 廃止されず, 逆にHTMLElement全体に拡張. (グローバル属性)
| 要素名 | 廃止された属性 | 移行先 | 備考 |
|---|---|---|---|
| link, a | rev, charset | ||
| a | shape, coords | ||
| iframe, img | longdesc | img要素のも廃止されている. | |
| link | target | ||
| area | nohref | ||
| head | profile | ||
| html | version | ||
| img, a | name | id属性 | a要素のも廃止されている。次の要素のはイキ: map, object, form, iframe |
| meta | scheme | ||
| object | archive, classid, codebase, codetype, declare, standby | ||
| param | valuetype, type | ||
| td, th | axis | headers属性はイキ. | |
| td | abbr, scope | th要素には scope, abbr属性が書ける. | |
| table | summary | ||
| form | accept | ||
| input | usemap |
script要素の language属性は, 省略するか, "JavaScript" でなければならない。charset属性はイキ.
以下は, CSSで代替:
| 要素名 | 廃止された属性 | 備考 |
|---|---|---|
| caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead, tr | align | |
| body | alink, link, text, vlink, background | |
| table, tr, td, th, body | bgcolor | |
| object | border | img要素のborder属性は廃止になっていないが, 値0でなければならない. table要素のborder属性は, 値"1"または空文字列のみ可. |
| table | cellpadding, cellspacing, frame, rules | |
| col, colgroup, tbody, td, tfoot, th, thead, tr | char, charoff | |
| br | clear | |
| dl, ol, ul | compact | |
| iframe | frameborder, marginheight, marginwidth, scrolling | |
| td, th | height | |
| img, object | hspace, vspace | |
| hr | noshade | |
| td, th | nowrap | CSS white-space: nowrap |
| hr | size | input, select要素のsize属性はイキ. |
| li, ul | type | ol要素のtype属性はイキ. |
| col, colgroup, tbody, td, tfoot, th, thead, tr | valign | |
| hr, table, td, th, col, colgroup, pre | width |
2Dグラフィック描画APIです。
もともとベクターグラフィックは、SVG (Scalable Vector Graphics) がありましたが、広く普及しませんでした。特に、Internet Explorer (IE) では、プラグインをユーザ各自がインストールしなければならず、使い勝手がよくありません。
CanvasはAppleが最初に導入しましたが、主要なWebブラウザが採用し、また、IEでもサーバ側でExplorerCanvasを導入すれば使えるので、幅ひろく見てもらえます。
CanvasをサポートするWebブラウザ:
Internet Explorer 向けに ExplorerCanvas を導入します。ExplorerCanvas
Canvas API - MDC Canvasチュートリアルなどがある。