人気ブログランキングへ
<< Android アプリ開発環境の構築 | TOP | HTML5 のセクション関連タグ >>

2010年07月18日

HTML4/XHTML1 から HTML5 への変更点

HTML5 が話題になってずいぶん経ったけれど、いったい何がどう変わったのだろう?
現状ではほとんど何の恩恵も受けていない気がする。
そういえば HTML5 が何者なのか、そもそもよく知らないではないか。

そんなわけで W3C のサイトを覗いてみたところ、こんなものが置いてあった。
『HTML5 differences from HTML4』
ありがたや、まさにこんな解説がほしかった。

以下、この文書をもとに HTML5 の特徴をごく荒っぽくまとめてみた。
※参照したテキストは "W3C Working Draft 24 June 2010" 時点のもの
  • HTML4、XHTML1 と互換性はあるが、SGML との互換性は無い。
  • 1行目の書き方は、
    HTML (HTML5) の場合:
    <!DOCTYPE html>
    ※SGML 準拠をやめたので DTD の指定は不要になった。
    XML (XHTML5) の場合:
    <?xml version="1.0" encoding="UTF-8"?>
  • MIME形式 text/html-sandboxed が追加された。(参考サイト:『HTML 5 sandbox 属性による iFrame セキュリティの向上』)
  • ファイル先頭の BOM で文字エンコーディングが判断されるようになった。
  • MathML と SVG の要素を直接記述できるようになった。
  • IRI (Internationalized Resource Identifier) をネイティブサポートした。
  • lang 属性に空文字列を指定できるようになった。
  • 要素、属性が変更された。→要素の変更点、属性の変更点
  • 各種 API が導入された (映像とか音声とかドラッグ＆ドロップとか)。
  • HTMLDocument, HTMLElement の機能が拡張された。
    • getElementsByClassName()
    • innerHTML
    • activeElement
    • hasFocus
    • getSelection()
    • classList
    • className

要素の変更点

追加要素 廃止要素
(存在しないもの、
推奨されないものを含む)
  • head 要素内での object 要素
  • basefont (CSS を使用)
  • big (CSS を使用)
  • center (CSS を使用)
  • font (CSS を使用)
  • s (CSS を使用)
  • strike (CSS を使用)
  • tt (CSS を使用)
  • u (CSS を使用)
  • frame, frameset, noframes
  • acronym (abbr を使用)
  • applet (object を使用)
  • isindex (フォームを使用)
  • dir (ul を使用)

属性の変更点

要素名 追加された属性 廃止された属性
(存在しないもの、
推奨されないものを含む)
(グローバル属性)
  • contenteditable
  • contextmenu
  • data-*
  • draggable
  • hidden
  • role
  • aria-*
  • spellcheck
●root要素
html
  • manifest
  • version
●文書メタデータ
head
  • profile
base
  • target
link
  • sized
  • rev
  • charset
  • target
meta
  • charset
  • scheme
style
  • scoped
●スクリプト
script
  • async
  • language
●セクション
body
  • alink (CSS を使用)
  • link (CSS を使用)
  • text (CSS を使用)
  • vlink (CSS を使用)
  • background (CSS を使用)
h1, h2, h3, h4, h5, h6
  • align (CSS を使用)
●グループ化
p
  • align (CSS を使用)
hr
  • align (CSS を使用)
  • noshade (CSS を使用)
  • size (CSS を使用)
  • width (CSS を使用)
pre
  • width (CSS を使用)
ol
  • start (復活)
  • reversed
  • compact (CSS を使用)
  • type (CSS を使用)
ul
  • compact (CSS を使用)
  • type (CSS を使用)
li
  • value (復活)
  • type (CSS を使用)
dl
  • compact (CSS を使用)
div
  • align (CSS を使用)
●テキストレベル
a
  • media
  • ping
  • target (復活)
  • name (id 属性を使用)
  • rev
  • charset
  • shape
  • coords
br
  • clear (CSS を使用)
●埋め込み
img
  • border (CSS を使用)
  • longdesc
  • name (id を使用)
  • align (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
iframe
  • sandbox
  • seamless
  • srcdoc
  • longdesc
  • align (CSS を使用)
  • frameborder (CSS を使用)
  • marginheight (CSS を使用)
  • marginwidth (CSS を使用)
  • scrolling (CSS を使用)
object
  • archive
  • classid
  • codebase
  • codetype
  • declare
  • standby
  • align (CSS を使用)
  • border (CSS を使用)
  • hspace (CSS を使用)
  • vspace (CSS を使用)
param
  • valuetype
  • type
area
  • media
  • ping
  • hreflang
  • rel
  • target (復活)
  • nohref
●テーブル
table
  • summary
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • border (CSS を使用)
  • cellpadding (CSS を使用)
  • cellspacing (CSS を使用)
  • frame (CSS を使用)
  • rules (CSS を使用)
  • width (CSS を使用)
caption
  • align (CSS を使用)
colgroup
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
col
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
tbody
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
thead
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tfoot
  • align (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
tr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • valign (CSS を使用)
td
  • axis
  • abbr
  • scope
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
th
  • axis
  • abbr
  • align (CSS を使用)
  • bgcolor (CSS を使用)
  • char (CSS を使用)
  • charoff (CSS を使用)
  • height (CSS を使用)
  • nowrap (CSS を使用)
  • valign (CSS を使用)
  • width (CSS を使用)
●フォーム
form
  • novalidate
fieldset
  • form
  • disabled
legend
  • align (CSS を使用)
input
  • autofocus (type 属性が hidden の場合を除く)
  • placeholder
  • form
  • required (type 属性が hidden, image, ボタン類 (submit など) の場合を除く)
  • autocomplete
  • min
  • max
  • multiple
  • pattern
  • step
  • list (datalist 要素と一緒に使用)
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • type 属性の値に以下を追加
    • tel
    • search
    • url
    • email
    • datetime
    • date
    • month
    • week
    • time
    • datetime-local
    • number
    • range
    • color
  • align (CSS を使用)
button
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
select
  • autofocus
  • form
textarea
  • autofocus
  • placeholder
  • form
  • required
●対話
menu
  • type
  • label
  • compact (CSS を使用)

【関連記事】
HTML5 のセクション関連タグ
HTML5 のコンテンツグループ化関連タグ
HTML5 のテキストの意味付け関連タグ
HTML5 の埋め込みコンテンツ関連タグ
HTML5 のフォーム関連タグ

【修正・2010年7月18日】
表「属性の変更点」をカテゴリ分け
【追記・2010年7月22日】
「コンテンツのグループ化関連タグ」を追加
【変更・2010年7月26日】
「コンテンツのグループ化関連タグ」を別記事に独立
タグ：HTML5
【技術メモの最新記事】
posted by Ｋ/Ｉ at 00:20 | 東京 ☀ | Comment(2) | TrackBack(0) | 技術メモ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
日本語で表になっていてすごいわかりやすいです。ありがとうございます。ただ、要素の変更点のところに、canvasが2つ書かれてしまっていますね。
Posted by 通りすがり at 2010年07月18日 06:02
あわわ、ご指摘ありがとうございます。
source と summary が抜けていたので、そちらも追加しておきました。
Posted by Ｋ/Ｉ at 2010年07月18日 06:36
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバック
×

この広告は90日以上新しい記事の投稿がないブログに表示されております。