HTML5

HTML5って何??

2011.09.03

2011年からHTML5が騒がれていますね。
2009年頃からgoogleが協力に指示をしはじめたのがきっかけと言われています。
それから世界中のデベロッパーに認知されはじめ、2010年にはMicrosoftがInternetExplorerでHTML5の機能を積極的に実装することが表明されました。
そこから急激に世界中へと広まったようなのですが、IE9にはHTML5のAPIが数多く実装されているにしろ過去のIEnのシェアはまだまだ大きい事が問題。
HTML5でサイトを作る上ではブラウザの互換性について、最も重視して作らなければならないです。

海外ではHTML5のサイトがどんどん増えていますが
日本でもちょこちょこコードを書き換えはじめています。
WEB業界の人しか興味の無い(というか知る必要が無い)事だとは思いますが
HTML5をしっかり抑えていればWEBの世界が大きく広がる事間違いないかと思います!!!

そこでHTML5に関してまとめてみました!

HTML5って?

何が出来るの?
今までとは何が違うの??

簡潔に言うと、WEBApplicationが実現できます。
画像が動いたりマウスで操作したり、HTML上で実現出来ちゃうって事。

例えばFlash。今まではFlashを用いて動く画像を表現したり
マウスで操作する複雑な動きもFlashやScriptが無くてはできなかったと思います。

が、これからはHTML5でApplicationが作れちゃう!!!
確かに、iPhoneやiPadではFlashがみれなかったりしますもんね。

後は、今まで難しかった事が簡単なコードで実現しちゃいます。
ビデオや音楽を再生したりグラフを描画することが出来ます。
どんな事ができちゃうのかは後ほどご紹介致します〜

ブラウザの実装状況

とはいえ、、実際まだまだHTML5の対応をしきれていないのが現実です。
safari、chrome、opera、firefoxはまだ対応出来ていても
IEに関しては厳しい状況です。

What is HTML5?

主要ブラウザの対応状況

今すぐにHTML5に乗り換える必要があるのか!というと、、実際はそうでも無いような気がします。
HTML5はHTML4、XHTML1.0のマークアップも問題なく使用することが出来ます。
宣言だけHTML5にして、時期を見てマークアップを書き換える方法が良いかもしれません。

HTML4やXHTMLと何が違うの?

HTML5は新しく生まれ変わったというより昔の記述は残したまま(一部は廃止)
新しい要素が追加されたという考えです。
もちろん、今までのXHTML1.0やHTML4のマークアップも使用できます。

HTML5で廃止されるタグ

<acronym> …… 略語(頭字語)であることを表す
※<abbr>に置き換える
<applet> ……… JAVAアプレットを挿入する
※<embed>や<object>に置き換える
<basefont> …… テキストの基準サイズ・基準色・基準フォントを指定する
※fontプロパティで指定
<bgsound> …… 効果音・BGMを鳴らす(IE独自の仕様)
※<audio>に置き換える
<big> ………… テキストのサイズをひとまわり大きくする
※font-sizeプロパティで指定
<blink> ……… 文字を点滅させる(NN独自)
※text-decoration: blinkで指定
<center> …… センタリングする
※margin:autoやtext-align: centerで指定
<dir> ………… リストを表示する
※<ul>に置き換える
<font> ……… フォントの種類・大きさ・色を指定する
※fontプロパティで指定
<frame> …… フレームに表示するファイルを指定する
※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。
<frameset> … ウィンドウをフレームに分割する
※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。
<isindex> …… 検索キーワードの入力欄を作る
※<form>と<input type="text">に置き換える
<listing> ……… ソースをそのまま表示する(タグは解釈される)
※<pre>や<code>に置き換える
<marquee> …… 文字をスクロールさせる(IE独自)
※CSS3のマーキー系プロパティで指定
<nobr> ……… 改行なしで表示する(NN独自)
※white-space: nowrapなどのCSSで指定
<noembed> … プラグインが利用できない環境用の表示内容を指定する(NN独自)
※プラグインが利用できない環境用の表示が必要な場合には、<embed>の代わりに<object>を使用する
<noframes> … フレームが表示できない環境用の表示内容を指定する
※<iframe>やCSSに置き換えるか、メニューなどの共通部分はサーバー側でインクルードする。
<plaintext> … ソースをそのまま表示する
※MIMEタイプに"text/plain"を指定する
<rb> ………… ルビをふる文字を指定する(IE独自)
※<ruby>内に直接ルビベースを記述、<rb>タグは省略
<spacer> …… スペースを挿入する(NN独自)
※marginやpaddingプロパティで指定
<strike> …… 打ち消し線を引く
※削除を表す場合には<del>に置き換える、 正確ではなくなった内容を表す場合には<s>に置き換える、 それ以外の場合はtext-decoration: line-throughで指定
<tt> ………… 等幅フォントで表示する
※font-family: monospaceで指定
<u> ………… テキストに下線(アンダーライン)を引く
※text-decoration: underlineで指定
<xmp> ……… ソースをそのまま表示する
※<pre>や<code>に置き換える
  • このエントリーをはてなブックマークに追加