(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全体に拡張. (グローバル属性)
a
および area
要素の target
属性は、逆に、生きることになった。No longer deprecated.
要素名 | 廃止された属性 | 移行先 | 備考 |
---|---|---|---|
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チュートリアルなどがある。