読者です 読者をやめる 読者になる 読者になる

よーやまブログ(PHPと自動化と語学と資格)

PHPと自動化と語学にハマったWebプログラマー。主にWebネタ、MySQL、Linux、Apache、語学をやるよ

HTML5とは? 今までとの違いは?

HTML、CSS

どうも、yohyamaです。

HTML5が出て、しばらく経ってますが理解できていないので、簡単にまとめてみた。

 

HTML5_logo_and_wordmark.svg

 

HTML5の目的とは?

主に三つある。

  1. 今までのHTMLでは仕様がしっかりとしてなかったためブラウザの互換性が無かった!だから仕様をキチンと決めて、ブラウザの互換性を高めよう!
  2. HTMLのソースを見やすく、分かりやすくしよう!そのためにタグを分かりやすくしよう!
  3. もっと色々なWebアプリを作れるように、機能を充実させよう!

 

 

HTML5と、今までのHTMLとの違いとは

  1.  DOCTYPEの宣言が簡単になった! <DOCTYPE html>だけで良くなった!
  2. brタグのような1つだけのタグは、必ずスラッシュで終わるようにする。
  3. section,article,navi,header,footerなどのタグを用いて、メインとなるコンテンツを読みやすくする。
  4. フォームの入力支援機能が増えた。
  5. Flashなどのプラグインが不要になる。
  6. その他、色々な機能が増えた。

簡単にまとめると、「使用すべきタグが増えて、機能も増えた」ということ。

 

 

HTML5で作られているサイト

Apple : http://www.apple.com/

ローソン:http://www.lawson.co.jp/index.html

など多数。

 

 

HTML5に準拠しているのかを調べるツール、サイト

以下の二つがあります!

日本語

http://www.htmllint.net/html-lint/htmllint.html

 

W3C公式

http://validator.w3.org/

 

各ブラウザのHTML5への対応

詳細を書くと長いので省略します。

基本的に FirefoxGoogle ChromeInternet Explorerで対応している状況が異なります!

同じようにタグを書いてもGoogle Chromeでは動いても、Internet Explorerでは動かない!ということが存分にありえるので、気をつけましょう!

 

まとめ

やることとしては、「今までidで名前を付けていた箇所をheader, article, footerで囲む。flashを使用していた箇所は辞めて、canvas等で作り変える」でOKな感じですかね。

ただ、各ブラウザとも対応している状況が異なるので、しばらくHTML5で作るときは気をつける必要がありますね・・・。