こんにちは。WEB担当西本です。

前回はHTML5で変わった点をいくつかご紹介いたしました。
今回はHTML5で特にこれは使える！と思った要素をご紹介いたします。
※詳しい使い方やルール等は解説サイト等でご確認ください！

◆sectionタグの追加
これまで、区切りやブロックとしてわけていきたいのでdivの入れ子が多くなっていく・・・なんて経験があるかと思います。
このsectionに加えてheaderやfooter、余談を示すけれどサイドメニューもOKなaside等のタグを使うことでdivの入れ子を解消しより見やすいマークアップをすることが可能になりました。

◆aタグがブロック要素を指定できるように。
個人的に一番嬉しい要素です。リンクを貼る時に画像にそのままリンクする場合は特に問題ありませんでしたが、
更新することを考えて画像とテキスト、アイコン画像等で擬似的にバナー画像のようにしてその全体をリンクさせる為にはちょっとしたテクニックが必要でした。
というのも、これまではaタグでdiv要素やli要素を括ることが出来なかったためです。
今回の追加要素ではこれらもaタグで括ってOKになりましたので、リストの中を自由にスタイリングしてからli要素で全体にリンクを貼ってあげるということが可能になりました。
HTML上で画像やテキストの合成だったりも出来るようになったので、更新頻度が高いリンクバナー等は積極的にHTMLとCSSで作ってみるのも良いかもしれません。

◆フォームの入力規制等の処理が出来るように！
これはまだ実装経験はないのですが、これまでは主にJavascriptで行っていた入力規制や入力チェック等がHTMLベースで出来るようになりました。
フォーム要素だけでもかなりの量が追加されていて、カートシステムだったりお問い合わせだったりと使用されることが多くなってきたので
フォーム関連が強化されるととても助かりますね！

新しい要素が増えたことで、要素の分類が変わりました。
新しい分類の中で入れ子に出来る要素と出来ない要素に関してはしっかり理解してマークアップすることで
意図したコーディング、またはSEOに強いコーディングにする近道になると思います。
参考サイト：HTML5における要素の分類
→http://www.htmq.com/html5/007.shtml

2015年6月12日　|　スタッフ：