HTML5とそれまでのHTML（HTML4.01）との違い（追記あり）

1年以上前の記事です。内容が古い可能性があります。

訓練校でも徐々にHTML5の話もするようになってきた。
とは言え、基本的には実践で使っているHTML4.01＋CSS2.1があくまでも中心。
ただ、こういったところが違っている。程度の話はしていくようにしている。

そこで、HTML4.01を知っている人向けに、HTML5になるとどこが違っているのか解説していこうと思う。

よくわかるHTML5+CSS3の教科書

posted with ヨメレバ

大藤 幹 マイナビ 2012-07-28

Amazon

Kindle

楽天ブックス

7net

honto

ブックオフ

e-hon

ブロックレベル要素とインライン要素という定義がなくなった

HTML4.01においてはブロックレベル要素、インライン要素といった2つの要素の使い分けが重要だった。
ただ、これはHTML5になってなくなった。
厳密には、より細分化されている。
詳しくは以下の図、及びリンク先を見ていただくことにして、

HTML5における要素の分類（コンテンツ・モデル）－HTML5リファレンス via kwout

これにより、いくつかのタグの使い方が変わってきてる。

<a>タグで旧ブロックレベル要素（<div><h1>等）を囲えるようになっている

特に大きな違いは、HTML4.01まではインライン要素としてブロックレベル要素を囲むことができなかった<a>タグでブロックレベル要素を囲えるようになっている。
これにより、リンクボタンなどをCSSで設定する方法が幾分簡単になっていると予測できる。
【参考】 <a>－HTML5タグリファレンス

<header><footer><nav>なんてタグが増えた

HTML5ではいくつがタグが増えてるが今まで<div id=”header”>やら<div id=”nav”>やらでボックスモデルデザインを行なっていたところ、これがそれぞれタグになり、<header>、<footer>、<nav>などのタグができている。
今までCSSで

などと書いていたところが

と書けるようになった。

動画や音声等の埋め込みがかんたんになった

一時期は<img>タグを使って埋め込ませている画像も<object>タグに踏襲という方向で勧められていたようだが、これがいつの間にか動画は<video>、音声は<audio>タグで画像の<img>タグと同じような感覚で簡単に埋め込みできるように仕様変更になった様子。
ただ、実装されているかいないかは不明。
ちなみに、HTML4.01で廃止、<object>タグに踏襲の方向で考えられていた<embed>タグもあらためて正式に復活。
Flashの埋め込みも簡単になった。

<canvas>タグがすごい

これがいずれFlashに取って代わると言われているヤツ。
JavaScriptやCSS3の助けも借りてFlash並のコンテンツがHTML上で可能になるそうだ。
詳しくは以下のサイトあたりを参考に。
□ Canvasとは – Canvas – HTML5.JP 
□ 第1回 JavaScriptを使って描画するCanvasとは？ | Think IT

Form（フォーム）の<input>タグで使えるtype属性が増えた（追記）

「text」や「radio」、「checkbox」等に加えて、「email」、「search」、「color」なんてのも使えるようになった。
□ フォーム機能の拡張－HTML5リファレンス

といったところ。

いずれにしてもHTML4.01のときに培った技術はほぼ、活用できるのでご安心。
むしろ、 <div id=”header”>が<header>と書けるようになったり、<a>で旧ブロックレベル要素を囲めるようになったりと、しっかりとしてノウハウを身に着けている人にとってはプラスになることばかり。

しいて言うならば<canvas>タグとFlashを今後どう使い分けていくかが悩ましいところかなぁ。