HTML5とそれまでのHTML(HTML4.01)との違い(追記あり)
1年以上前の記事です。内容が古い可能性があります。
訓練校でも徐々にHTML5の話もするようになってきた。
とは言え、基本的には実践で使っているHTML4.01+CSS2.1があくまでも中心。
ただ、こういったところが違っている。程度の話はしていくようにしている。
そこで、HTML4.01を知っている人向けに、HTML5になるとどこが違っているのか解説していこうと思う。
ブロックレベル要素とインライン要素という定義がなくなった
HTML4.01においてはブロックレベル要素、インライン要素といった2つの要素の使い分けが重要だった。
ただ、これはHTML5になってなくなった。
厳密には、より細分化されている。
詳しくは以下の図、及びリンク先を見ていただくことにして、
これにより、いくつかのタグの使い方が変わってきてる。
<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を今後どう使い分けていくかが悩ましいところかなぁ。
アドセンス広告メイン
関連記事
-
フォルダにいれずに圧縮すると解凍できないことがある
1年以上前の記事です。内容が古い可能性があります。WindowsXPからZIP圧 …
-
オールフラッシュ
1年以上前の記事です。内容が古い可能性があります。最近、Flashをずいぶん覚え …
-
XPで新アカウントをつくったときまず最初にすること
1年以上前の記事です。内容が古い可能性があります。ちまたではWindows7が発 …
-
FTPサーバーによる簡単データ転送
1年以上前の記事です。内容が古い可能性があります。FTPサーバーを使って、自分の …
-
Tumblr(タンブラー)を勉強してみた (11/11追記)
1年以上前の記事です。内容が古い可能性があります。謎多きTumblr(タンブラー …
-
エントリーって何?
1年以上前の記事です。内容が古い可能性があります。3月26日のエントリー「ブログ …
-
電子カタログ(デジタルカタログ)も差別化の時代へ
1年以上前の記事です。内容が古い可能性があります。かつてはかなり高額だった電子カ …
-
他サービスとの連携を止める(アプリの削除)方法 【mixi編】
1年以上前の記事です。内容が古い可能性があります。OpenIDやOAuthによる …
-
Web制作・管理でよく使うツール
1年以上前の記事です。内容が古い可能性があります。以前、紹介すると言っていたWe …
-
「Internet Explorer 6」はまだ結構使われている
1年以上前の記事です。内容が古い可能性があります。株式会社サムライファクトリーか …