こんにちは。WEB担当西本です。
HTML5でのコーディングが当たり前になってきた昨今ですが、具体的にどのような変更があるのか？を説明していきたいと思います。
◆ドキュメントタイプ宣言がシンプルになりました！
どのようなルールに従ってこのサイトが作られているかをブラウザに知らせる為の宣言文ですが、これがとてもシンプルになります。
HTML4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
↓
HTML5
<!DOCTYPE html>
既存ページは別ですが、新規ページであれば宣言によってレイアウトのずれが生じる可能性があることを考えてもしっかり宣言した方が良いです。
また、<head>内には<meta charset=”UTF-8″>も入れるようにした方が良いです。
◆ビデオやオーディオが扱えるように！
今まではFlashだったりJavascriptだったりを使って埋め込み等を行っていたビデオ（.mp4等）やオーディオ（.mp3等）がHTML内で扱えるようになりました。
これのおかげで背景に動画を使うようなサイトも増えてきたと思います。
作成した動画や音声等を気軽にWEBで公開出来るようになってよりインタラクティブ要素が増えた印象です。
◆マークアップ要素が増えました（廃止されたものもあります）
今まではヘッダーやフッター等はdivのidやクラスでそれぞれheader、footer等で指定したいる方も多かったと思いますがHTML5からそれらがタグとして扱えるようになりました。
これによってよりシンプルでわかりやすいマークアップが可能になりました。
例えば、ヘッダーにグローバルナビがありとフッターがあり、左側にメニューがあって右側でコンテンツがあるというよくある構造の場合
<header>
<nav>グローバルナビ</nav>
</header>
<aside>左側メニュー</aside>
<section>
コンテンツ1
</section>
<section>
コンテンツ2
</section>
<footer>
フッター
</footer>
上記は一例ですが、このような書き方になることで、それぞれ役割をタグで確認しながら用途に適したマークアップが出来る点がすごく良いなと感じています。
まだ他にもAPIの追加だったりフォーム機能の強化等もありますが、詳しくは解説サイト等でご確認ください！
参考サイト：http://www.htmq.com/html5/
次回は、追加されたマークアップ要素で特に使える！と思ったものをご紹介したいと思います。
2015年6月5日 | スタッフ：