新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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で

#header {font-size:15px;}

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

header {font-size:15px;}

と書けるようになった。

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

一時期は<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を今後どう使い分けていくかが悩ましいところかなぁ。 

 - Webデザイン, パソコン教室

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

Adobe系ソフトの初期化コマンド

1年以上前の記事です。内容が古い可能性があります。過去に「フォトショップが立ち上 …

Facebook(フェイスブック)で公開範囲を設定してポスト(投稿、シェア)する方法

1年以上前の記事です。内容が古い可能性があります。基本的なことなのですが、意外と …

no image
自宅サーバーをいかに安価に設置するか【第一章】プロバイダはどこ?

1年以上前の記事です。内容が古い可能性があります。前提が前提なので重要なのがプロ …

DVDを入れると「ファンクションが間違っています」と言われた時の対処法

1年以上前の記事です。内容が古い可能性があります。WindowsXP(ウインドウ …

「Windows 10」への無償アップグレード、「7月29日」に絶対終了。有償化へ

1年以上前の記事です。内容が古い可能性があります。当ブログでもうるさいとネタにさ …

no image
使わなくなったデータCDどうする?

1年以上前の記事です。内容が古い可能性があります。「個人情報保護法」なんてのが施 …

Googleページランク(PageRank)終了のお知らせ

1年以上前の記事です。内容が古い可能性があります。過去に何度もネタにしてきたペー …

OpenOffice「Calc」のセルの結合はメニューから

1年以上前の記事です。内容が古い可能性があります。タイトル通り。 表計算ソフト「 …

HTML5は穴だらけ。まだまだ使うのはちと怖い

1年以上前の記事です。内容が古い可能性があります。HTML5に50件ものセキュリ …

iPhoneに現れる謎のメール受信画面の原因を追え

1年以上前の記事です。内容が古い可能性があります。いつからかiPhone(アイフ …

血液型オヤジ