HTML5 要素構造 Design

　今まで、結構 HTML5 ページを書きましたけど、レイアウトを実現ために、どのような要素 (tag) を使うかとか、親 div に入れるかとか、結構ややこしいです。最近の考えをここでメモして、将来また best practice として、後輩に伝えよう。
　HTML 4 から、HTML 5になって、一ついいことは Web page 構造と意味が明確になります。例えば、以前何でもかんでも div を使うところ、今は article, section などで情報の構造により、適切にタグが定義してくれました。ただ、 Gmail などのページを開くと、驚きほど数の div タグが結構使われています。実際自分は Sigle page web app を使うとき、いざ何かを実現したい場合、まず親 div 要素を定義します。これはもう解決できないような気がしていますが、それ以下の子要素、孫要素の構造はもっとエレガントに書かないと、将来のメンテナンスや拡張が難しくなると思います。
　実際の考え方として、データの構造を理解した上で、それにあわせて、要素を決めようと。その後、CSS3 で位置を調整したり、z-index を使ったり、web app を完成します。それで、HTML を読むとき、実際のデータとあっているし、レイアウト変更する場合、例えば responsive デザインを導入する際に、新しい css を書けば済むでしょう。
・まず、Array に定義しているすべての複雑なデータアイテムをページにリストする場合。
　ul > li を使った方がいいと思います。inline 要素、block 要素でも全部 li に入れられますし、親子関係も見ればすぐわかります。もし全部 div を使う場合、class に一つ共通的なものを振りましょう。なぜなら、jQuery 一つで、または native js 一つで、すべて同類のものが取れるからです。そうすると、動画や、文字を大きくするとか簡単になります。
・次、数字などのデータをページに表示したい場合。
　table を使いましょう。以前なら、（IE 6 ぐらいの時代？）ページ全体を一つの table のおさめて、レイアウトを調整しましたが、現在では、それは bad practice の一つになっています。 table は数字など、ものを比べるとき使うべきです。例えば、月ずつの返済額とか、エリアの対象一覧とか、同類データは table に入れると、わかりやすいし、js で tr td 文字列を簡単に作れます。
・文章や説明など article と section, p, span を使いましょう。
　例えば、不動産の説明文書など、実際見れば、一つの article です。このようなタグを使うことで、 HTML 読みやすいなります。もう一つの例として、dt dd pair で使うことで、定義、説明であることはすぐ気づきます。

つまり、実際のデータ構造にあわせて、タグを使うことで、HTML がわかりやすくなります。
ただ、例外も結構あります。例えば、drop down の select に対して、特別なスタイルを使いたい場合、jQuery ui では新しい div , a , ul li を動的に作成して、select の上にカバーする形になっています。実際の a タグの意味はあってないけど、構造としてはこれもわかりやすいです。後日また整理します。

それでは。