新・元地方の中規模印刷会社で苦悩する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

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

  関連記事

WordPress+Welcartでショッピングサイト構築【テーマ編】

1年以上前の記事です。内容が古い可能性があります。過去は振り返らない性格なので仕 …

no image
ブログ移転!?

1年以上前の記事です。内容が古い可能性があります。突然ですが、ブログを移転しまし …

Google Chromeの場所が奥深すぎて分からない

1年以上前の記事です。内容が古い可能性があります。Dreamweaver(ドリー …

Googleマップストリートビュー。次はどこ?

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

no image
今週の予定

1年以上前の記事です。内容が古い可能性があります。今週末までに某学校のホームペー …

no image
Google AdSense はじめました

1年以上前の記事です。内容が古い可能性があります。このブログ、及びプロット・ファ …

.htaccessで完全移転(リダイレクト)

1年以上前の記事です。内容が古い可能性があります。ちょっとした勘違いで某社Web …

no image
ドメインリサイクル

1年以上前の記事です。内容が古い可能性があります。ドメインリサイクル業者(個人? …

no image
出会い系サイトの手口(予想)

1年以上前の記事です。内容が古い可能性があります。別のサイトでも出会い系サイトの …

いまさら気づいたはてなのタグ機能

1年以上前の記事です。内容が古い可能性があります。はてなブックマークでブックマー …

血液型オヤジ