(2008.9.27) 新規作成
(2017.6.3) 最近の状況にアップデート.
HTML5 (5.0) は、HTML 4.01 (1999年) から15年ぶりとなった、HTML仕様のバージョンアップです。HTML5勧告 = 2014年10月. Apple, Mozilla, OperaなどによるWHATWGコミュニティで開発されたものを、W3C勧告として纏めたものです。
[2017-06] HTML仕様の現在の最新版は, WHATWG で開発されている, HTML Living Standard (2017年5月30日).
W3Cからも, バージョン番号を付けて纏めたものが出ていた。しかし、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 アドレスを指定したり、ファイルをアップロードして検査できる。
ソースコードはこちら; GitHub - validator/validator: The Nu Html Checker スキーマは RelaxNG + Schematron で書かれている.
W3C HTML5にはない, hgroup
要素にも対応。
HTML5 (5.0) と HTML 4との差異
参照するヴァージョン; HTML5 A vocabulary and associated APIs for HTML and XHTML, W3C Recommendation 28 October 2014
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
- <body>
- <h1>The Tax Book</h1>
- <section>
- <h1>Earning money</h1>
- <p>Earning money is good.</p>
- <section>
- <h1>Getting a job</h1>
- <p>To earn money you typically need a job.</p>
- </section>
- </section>
- </body>
|
article | ブログのエントリや記事など、独立した文書の中身の一部分。文書のアウトライン. ネスト (入れ子) 可.
|
nav | 文書構造. 子として main要素を含めることはできない.
|
aside | 文書構造. 子として main要素を含めることはできない.
|
main | 文書構造. 文書のアウトラインではない.
|
header | 文書構造. 子として header, footer, main 要素を含めることはできない.
|
footer | 文書構造. 一つの文書中に複数可. 子として header, footer, main 要素を含めることはできない.
|
figure, figcaption
|
template
| JavaScript のための一時置き場。この要素とその内容は DOM内で描画されない。あらゆるHTML片を子に持てる。往年の XSLT からの流用。とはいえ機能性はずいぶん異なる。
[2022-07] Ruby on Rails 7 の Turbo Streams で大活躍。
|
コラム: Web Components
その後, 次の4つの技術の組み合わせが Web Components に発展している. https://www.webcomponents.org/introduction のリンクは古い。移転して, https://github.com/WICG/webcomponents/ (でもこれも古い)
- シャドゥ DOM
- 制御する JavaScript API.
Element#attachShadow()
など。'Shadow' というのが分かりにくい。実際は、ある一部分の DOM ツリーと CSS をカプセル化する技法。
- HTML カスタム要素
<popup-info>
のような独自の要素 (タグ) を定義する JavaScript API. 例: customElements.define('popup-info', PopUpInfo);
- HTML テンプレート
<template>
要素に加えて, 新しい <slot>
要素. HTML カスタム要素の基礎として、再利用できる。
- CSS シャドゥパーツ
- シャドゥツリーを指定するセレクタなど。
- JSON, CSS, HTML Modules
- HTML Imports の後継.
<template>
要素でテンプレートを作成し、それをクローンしてカプセル化されたシャドゥツリーとし、HTML カスタム要素の内容とする。
シャドゥツリーの根を shadow root と呼ぶ。
新しい要素その2.
要素名 | 説明
|
---|
video, audio, source
|
track | video, audio要素の子として使用.
|
embed
|
mark
|
progress
|
meter
|
time
|
ruby, rt, rp
|
bdi
|
wbr
|
canvas
|
datalist | input 要素のlist 属性から呼び出される. コンボボックスを作る。
|
keygen
|
output
|
WHATWG HTML のほうには, 上記のほか, hgroup
要素がある。文書のアウトライン.
input
要素の, 新しいtype
属性値:
- tel
- search
- url
- email
- date
- time
- number
- range
- color
廃止された要素、属性
作成する文書を 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 HTML では, コンテキストメニューまたはツールバーとして蘇った。
|
廃止された属性
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
|
Canvas
2Dグラフィック描画APIです。
もともとベクターグラフィックは、SVG (Scalable Vector Graphics) がありましたが、広く普及しませんでした。特に、Internet Explorer (IE) では、プラグインをユーザ各自がインストールしなければならず、使い勝手がよくありません。
CanvasはAppleが最初に導入しましたが、主要なWebブラウザが採用し、また、IEでもサーバ側でExplorerCanvasを導入すれば使えるので、幅ひろく見てもらえます。
CanvasをサポートするWebブラウザ:
- Safari
- Opera
- Firefox
- エンジンがGecko... SeaMonkeyなど
- エンジンがWebKit... Google Chromeなど
Internet Explorer 向けに ExplorerCanvas を導入します。ExplorerCanvas
Canvas API - MDC
Canvasチュートリアルなどがある。
クライアント側ストレージ
(Structured client-side storage)
sessionStorage DOM属性
localStorage DOM属性