|
Webデザイン |
 |
| Lesson 11 | HTML5の セクションマークアップ |
| 制作・文 | 藤沢立也（Suika Cube Inc.） | |||
| ＞ | To Use | CSS | ||
| ＞ | Browser | IE 9over | Firefox 3over | Safari 3.1over |
 |
HTML5においては、文章の構造を意味的に解釈するためにセクションの概念が用いられる。つまりここは本文であり、ヘッダであり、余談であり、といった文章の構造的役割をマークアップすることになる。 |
01
ひとつ注意する点は、ここでいう構造とはレイアウト的な構造ではないということだ。レイアウト目的ならば従来のようにdivで指定していく必要がある。
【1-1】暗黙的セクション。セクションと明示はされていないがh1〜h6要素を使うことによって実際はセクションが設定されている
【1-2】明示的なHTML5のセクション。section要素を利用して項目の範囲を明示している。hn要素は各セクションの見出しを構成することになる
02
body要素
メインコンテンツのセクション。いままでと変わらないが見出しが必ず必要となる。
article要素
ひとつの独立したドキュメントやコンテンツ。代表的なものにブログのエントリがある。それ自体で完結していて、単独で再配信できる内容を持つ【2-1】。内容が独立していればネスト（入れ子）することも可能。その場合、子articleは親articleに関連した内容になる【2-2】。
【2-1】article要素でのブログエントリのマークアップ例。ひとつの独立したエントリをarticle要素で囲んでいる
【2-2】ブログのコメントをarticleとして記述。コメントは独立した内容のarticle要素（記述者も本文と異なる）だが、ブログの本文に関連した内容ということで入れ子をする
nav要素
主要なサイトナビゲーションに用いられる。あくまで主要なもののみで補足的なものには用いない【2-3】。
【2-3】nav要素によるナビゲーションのマークアップ例。上にあるメインナビゲーションのみnav要素で囲んでいる。その他の補足的なナビゲーションはfooter要素などで十分だ
aside要素
余談や補足記事、広告、サイドバーなど、必ずしも見出しを必要としないものに用いられる【2-4】。
【2-4】aside要素で余談、注釈を挿入する。記事内のバンドの解説をaside要素で囲んでいる。主題のミュージッククリップの説明においてバンドの解説は特に必要のない余談である
section要素
一般的なドキュメントやコンテンツを含むセクションでnav、article、asideのセクショニング要素に該当しないものに使われる。たとえばarticle中の章、節、項などだ【2-5】。なおsection要素には必ず見出しが必要となる。新たな見出しがあったらそこは新たなセクションの開始地点になる。
【2-5】section要素で章立てする。桃太郎という独立したarticle要素の本文を、見出しごとにsection要素で囲んで章立てを明示している
03
h1〜h6要素
これらの要素はセクション要素の見出しを示す。HTML5では【2-5】のように各セクションに見出し1つという形が推奨される。また後ろの数字のランクの扱いだが、現在ではネストに合わせてランク付けしていく方法【3-1】、またはh1にする方法【3-2】が推奨されている。ただし現在の検索エンジンでは、h1の多用をスパムと見る傾向があるので、前者に合わせたランク付けの方が安全である。
hgroup要素はh1〜h6要素のグループ化を行う要素だ。主題に対して補足的な副題などを設定することができる。hgroupで作られる見出しのランクは含まれる見出し要素の最も大きなランクを持つものとする【3-3】。
【3-1】見出しをネストにあわせる
【3-2】h1だけ使ったもの
【3-3】hgroup要素で囲むことによってまとめた見出し。この場合は最も高いランクのh1と同じランクになる。サブタイトル等含む見出しを柔軟にコーディングできる
04
header要素はイントロダクションやナビゲーション、見出し要素を補助するときに使われる【4-1】。
footer要素は直近のセクションの情報を扱う要素だ。具体的には記述者、関連リンク、著作権情報など。必ずしも最後に置く必要はない【4-2】。
address要素は作者の連絡先、おもにメールアドレスを扱う要素になる【4-2】。
【2-3】で作成したnav要素をheader要素で囲む
【4-2】footer 要素でセクションに対する情報を記載、連絡先はaddress要素で。footer要素はセクションに対する情報を記載する。この場合ブログのarticle要素にはfooter要素で投稿者と連絡先を記載し、さらに一番下のfooter要素ではbody要素全体の著作権情報を記載している
05
今後、このセクションの主眼は検索エンジンなどのWebでの情報流通を円滑にするための必須事項になると思われる。たとえば大量の情報を持つサイトをブラウズするとき、最初にアウトラインを確認すれば大体把握できる（似た概念でサイトマップがあるが、意味構造ではなくリンク構造のみを扱っている）。逆にアウトラインが見にくく情報が取得しにくいサイトは価値が低いと判断されたら、別のサイトを探しに行くことになるだろう。今後、HTML5はSEO的な利用が増えていくことと思われる。検索エンジンにわかりやすいサイトを作ることがサイト繁栄の鍵であることを考えると、セクションの概念はこれから重要になってくると思われる。
【5-1】【2-5】の桃太郎を若干変更してアウトライン化してみた。左は【2-5】にbody要素と見出し「セクション昔話」を追加したもの。右は雉編のあとに見出しのないsection要素を追加したもので、これだとUntitled Sectionになってしまっている
