![ブログ [果報は寝て待て]｜Blog](images/page_title.jpg)
HTML5 と文書構造（アウトライン）について考えてみた。
2012年6月5日 07:16
おはようございます。
HTML5 でマークアップしてみてるのですが、なかなかいい感じです。
CSS のセレクタをうまく使うと相当すっきりします。
いろいろ調べつつって感じでやっていってるんですが、HTML5 って h1 タグいっぱい使っても大丈夫なんですね。
SEO的にどうなのか若干気になりますが…仕様としてそうなってるのでそうしていってますが（汗）
例えばなにかページを一枚作る場合、以下のようになったりします。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>ほげほげのページ</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <header> <hgroup> <h1>ほげほげのページ</h1> <h2>ここはほげほげのページです。</h2> </hgroup> <nav> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </nav> </header> <article> <header> <h1>ページのタイトルとか入れちゃいます</h1> <h2>リード文とか入れちゃいましょう</h2> </header> <section> <h1>コンテンツ1のタイトルでーす</h1> <p>コンテンツ1の内容でーす。</p> </section> <section> <h1>コンテンツ2のタイトルでーす</h1> <p>コンテンツ2の内容でーす。</p> </section> </article> <footer> copyright. </footer> </body> </html>
これが正解なのかどうなのか分からないですけど、僕がW3Cとか見た解釈で書いてみました。
上のHTMLを文書構造（アウトライン）としておおまかに見ると以下のようになると思います。
・ほげほげのページ
・ページのタイトルとか入れちゃいます
・コンテンツ1のタイトルでーす
・コンテンツ2のタイトルでーす
ちなみに『article』はそれ単体で自己完結できるブロック。そのままどこか違う場所に持っていってもそれのみで意味が通じるもの。『section』はいわゆる章や節という個人的な解釈です。
タグにもそれぞれ意味があるようなので、スタイルあてるだけとかの場合は今までどおりdivタグを使ってマークアップしましょうってことらしいですね。
実際問題…ページを普通に閲覧する人からするとどうでもいいことではありますね（汗）
今はじみ〜な感じだけど API を試し出すともっと楽しくなるんでしょうね・・・。
使えるブラウザはまだ若干限られてしまうけど、File API は早急に実務で使えるようになりたい今日この頃です。
■参考にしたサイト
HTML5.JP - 次世代HTML標準 HTML5情報サイト
World Wide Web Consortium (W3C)
徳島県徳島市名東町
tel/fax 088-635-5859
営業時間 平日 10:00〜18:00
※打ち合わせ等で不在の場合は、お電話でのお問い合わせに対応できない場合がありますので、ご了承ください。
徳島・香川・愛媛・高知および大阪・京都を中心にご依頼を承ります。その他の地域でも、メール・お電話・FAX・Skype等での作業が可能であれば柔軟に対応いたします。
