HTML5はアウトラインが重要みたい
こんばんは。
コーディングをするときに、意識することっていろいろあると思いますが、やはり文書構造を意識してマークアップするのが重要なのではないかと思います。
HTML5を勉強すると必ず出てくる「アウトラインを意識する」ということも、上記の延長線上にあるのではないかなと思います。
今回は、「アウトライン」と「セクショニング・コンテンツ」のことについてのお話です。
セクショニング・コンテンツって何？
「アウトラインを意識したマークアップ」とは、中身の意味を意識したマークアップをするということ。
もちろん、今までも「これは段落だからpで」「これは見出しだからh3」とか考えながらマークアップしてきたと思いますが、HTML5ではこれらを内包する範囲そのものにも意味を持たせます。
今まで、divで囲んできたものが、違う要素に置き換わっていきます。
では、セクショニング・コンテンツの要素を見てみましょう。
section要素
sectionの意味を調べたところ、「区切り」「節」ということらしいです。
その意味の通り、「区切り」を意味するところに使うもの、それがsection要素です。
こちらのブログにも書かれている通り、
http://another-step.com/2010/08/22/70/
見出しが書けない固まりにsectionは使いません。もちろん、divの代わりにもなりません。
aside要素
単体で独立した情報になれるものを、これで囲みます。
ブログの個別記事、ある商品の詳細ページ、レビュー記事なんかもこれで囲みます。
新聞や雑誌の記事、1個と同じように考えるとわかりやすいかなと思います。
nav要素
主なナビゲーションはこれで囲みます。今まで、div id=”gnavi”とかで囲っていた部分ってことになります。ここで重要なのは「主な」ナビゲーションということ。ですので、フッターについてるナビゲーションやサイドバーに入ってる関連リンクなどへのナビゲーションはこれで囲みません。
いろいろ書いたけど、実際にマークアップしてみる
では、説明文ばかりじゃなんなんで、仮のワイヤーフレームを使ってマークアップしてみましょう。
「Moi」という名の会社サイトのトップページです。「Moi」には特に理由はありません。なんとなくです。
<header> <h1>Moi</h1> <nav> <ul><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li></ul> </nav> </header> <div id="contentsbox"> <section> <h1>News</h1> <dl><dt>2011/04/04<dt><dd>会員制のスペシャルコンテンツ公開！</dd></dl> </section> <section> <h1>contents1</h1> <p>コンテンツ１の説明です</p> </section> <section> <h1>contents2</h1> <p>コンテンツ2の説明です</p> </section> <section> <h1>contents3</h1> <p>コンテンツ3の説明です</p> </section> <section> <h1>contents4</h1> <p>コンテンツ4の説明です</p> </section> </div> <aside> <ul><li>リンク先もみてね</li></ul> </aside> <footer><ul><li>menu1</li><li>menu2</li><li>menu3</li><li>menu4</li></ul> <ul><li>link1</li><li>link2</li><li>link3</li><li>link4</li></ul> <img src="images/flogo.gif" /> </footer>
というような感じでしょうか。
これをみて、今までのマークアップと明らかに違うところがありますよね。
divが少ない
今までどんなものでもdivで囲っていたものが、sectionやasideで囲えるようになりました。今回のマークアップでdivを使った箇所は１カ所。
左エリアを区別するために使った、id=contentsboxのところだけです。
この区別になぜsectionを使わなかったのかというと、自然な見出しがつけられないからです。Newsと４つのコンテンツの短い紹介エリアを囲むのは、あくまでも見た目として左側に位置しているということを示したいからです。後々CSSでレイアウトする時に、この左エリア全体をfloatするでしょう。そのレイアウトのために囲いたいのでsectionではなくdivが妥当だと判断しました。
もし、Newsと４つのコンテンツを代表した見出し（例えば「初めての方へのおすすめ」など）がついていたとしたら、sectionで囲むのが妥当だと思います。
h1が何個も出てくる
今までのマークアップだとh1は１回しか使えませんでした。ですので、ヘッダー内のロゴにつけるのが一般的だったと思います。
HTML5では、セクションごとにh1を使うことができます。もちろん、今まで通りに見出しレベルを継承することもできます。これはどちらでも良いようですが、どちらかに統一した方がいいようです。
個人的にはセクションごとにh1から始める方がいいかなと思いました。その方が迷いがなくマークアップできるかなと思いました。
headerとかfooterとか
いきなり出てきたheaderとかfooterのタグ。これもHTML5で使えるようになったものです。いままでid="header"とかid="footer"とかつけていたエリアに相当するものです。
なんとなく、HTML5のことがわかってきたような？という感じです。
やってみてわかったのは、今までと同じで、やはり文書構造を意識してマークアップしていくことを心がけるということでしょうか。
きれいなコードを書いていきたいなと思います。
今回参考にした記事
HTML5ことはじめ
http://another-step.com/2010/08/22/70/
