Lesson 11 HTML5のセクションマークアップ - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン
表現&技法の
新・スタンダード


Lesson 11 HTML5の
セクションマークアップ

制作・文 藤沢立也(Suika Cube Inc.)
To Use CSS
Browser IE 9over | Firefox 3over | Safari 3.1over

0 HTML5においては、文章の構造を意味的に解釈するためにセクションの概念が用いられる。つまりここは本文であり、ヘッダであり、余談であり、といった文章の構造的役割をマークアップすることになる。


01

HTML5ではセクションという新しい要素が追加されている。これでマークアップをしていけば従来までhnタグを用いて行われてきたセクショニング【1-1】を、より明確にすることができる【1-2】。ちなみに、前者を暗黙的、後者を明示的セクショニングといい、セクショニングされたコンテンツ構造を「アウトライン(階層構造)」という。

ひとつ注意する点は、ここでいう構造とはレイアウト的な構造ではないということだ。レイアウト目的ならば従来のようにdivで指定していく必要がある。

【1-1】暗黙的セクション。セクションと明示はされていないがh1〜h6要素を使うことによって実際はセクションが設定されている
【1-1】暗黙的セクション。セクションと明示はされていないがh1〜h6要素を使うことによって実際はセクションが設定されている

【1-2】明示的なHTML5のセクション。section要素を利用して項目の範囲を明示している。hn要素は各セクションの見出しを構成することになる
【1-2】明示的なHTML5のセクション。section要素を利用して項目の範囲を明示している。hn要素は各セクションの見出しを構成することになる

02

body要素

メインコンテンツのセクション。いままでと変わらないが見出しが必ず必要となる。


article要素

ひとつの独立したドキュメントやコンテンツ。代表的なものにブログのエントリがある。それ自体で完結していて、単独で再配信できる内容を持つ【2-1】。内容が独立していればネスト(入れ子)することも可能。その場合、子articleは親articleに関連した内容になる【2-2】。

【2-1】article要素でのブログエントリのマークアップ例。ひとつの独立したエントリをarticle要素で囲んでいる
【2-1】article要素でのブログエントリのマークアップ例。ひとつの独立したエントリをarticle要素で囲んでいる

【2-2】ブログのコメントをarticleとして記述。コメントは独立した内容のarticle要素(記述者も本文と異なる)だが、ブログの本文に関連した内容ということで入れ子をする
【2-2】ブログのコメントをarticleとして記述。コメントは独立した内容のarticle要素(記述者も本文と異なる)だが、ブログの本文に関連した内容ということで入れ子をする


nav要素

主要なサイトナビゲーションに用いられる。あくまで主要なもののみで補足的なものには用いない【2-3】。

【2-3】nav要素によるナビゲーションのマークアップ例。上にあるメインナビゲーションのみnav要素で囲んでいる。その他の補足的なナビゲーションはfooter要素などで十分だ
【2-3】nav要素によるナビゲーションのマークアップ例。上にあるメインナビゲーションのみnav要素で囲んでいる。その他の補足的なナビゲーションはfooter要素などで十分だ


aside要素

余談や補足記事、広告、サイドバーなど、必ずしも見出しを必要としないものに用いられる【2-4】。

【2-4】aside要素で余談、注釈を挿入する。記事内のバンドの解説をaside要素で囲んでいる。主題のミュージッククリップの説明においてバンドの解説は特に必要のない余談である
【2-4】aside要素で余談、注釈を挿入する。記事内のバンドの解説をaside要素で囲んでいる。主題のミュージッククリップの説明においてバンドの解説は特に必要のない余談である


section要素

一般的なドキュメントやコンテンツを含むセクションでnav、article、asideのセクショニング要素に該当しないものに使われる。たとえばarticle中の章、節、項などだ【2-5】。なおsection要素には必ず見出しが必要となる。新たな見出しがあったらそこは新たなセクションの開始地点になる。

【2-5】section要素で章立てする。桃太郎という独立したarticle要素の本文を、見出しごとに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-1】見出しをネストにあわせる

【3-2】h1だけ使ったもの
【3-2】h1だけ使ったもの

【3-3】hgroup要素で囲むことによってまとめた見出し。この場合は最も高いランクのh1と同じランクになる。サブタイトル等含む見出しを柔軟にコーディングできる
【3-3】hgroup要素で囲むことによってまとめた見出し。この場合は最も高いランクのh1と同じランクになる。サブタイトル等含む見出しを柔軟にコーディングできる

04

続いてセクションの補助的な要素について解説しよう。

header要素はイントロダクションやナビゲーション、見出し要素を補助するときに使われる【4-1】。

footer要素は直近のセクションの情報を扱う要素だ。具体的には記述者、関連リンク、著作権情報など。必ずしも最後に置く必要はない【4-2】。

address要素は作者の連絡先、おもにメールアドレスを扱う要素になる【4-2】。

【4-1】【2-3】で作成したnav要素をheader要素で囲む
【2-3】で作成したnav要素をheader要素で囲む

【4-2】footer 要素でセクションに対する情報を記載、連絡先はaddress要素で。footer要素はセクションに対する情報を記載する。この場合ブログのarticle要素にはfooter要素で投稿者と連絡先を記載し、さらに一番下のfooter要素ではbody要素全体の著作権情報を記載している
【4-2】footer 要素でセクションに対する情報を記載、連絡先はaddress要素で。footer要素はセクションに対する情報を記載する。この場合ブログのarticle要素にはfooter要素で投稿者と連絡先を記載し、さらに一番下のfooter要素ではbody要素全体の著作権情報を記載している

05

セクションの概念の目的は、サイトの アウトラインを明確にすることだ。実際にコーディングしたサイトをHTML 5Outliner(http://gsnedders.html5.org/outliner/)で確認してみよう。あなたのコーディングしたサイトの構造が表示されるはずだ【5-1】。もしsectionやarticleに対応する部分が「untitled section」になってしまっていたらそれは見出しがなくサイト構造の情報不足ということになる。たとえば、検索エンジンがアウトラインを解釈するようになればそこは取得されないものになるだろう。

今後、このセクションの主眼は検索エンジンなどのWebでの情報流通を円滑にするための必須事項になると思われる。たとえば大量の情報を持つサイトをブラウズするとき、最初にアウトラインを確認すれば大体把握できる(似た概念でサイトマップがあるが、意味構造ではなくリンク構造のみを扱っている)。逆にアウトラインが見にくく情報が取得しにくいサイトは価値が低いと判断されたら、別のサイトを探しに行くことになるだろう。今後、HTML5はSEO的な利用が増えていくことと思われる。検索エンジンにわかりやすいサイトを作ることがサイト繁栄の鍵であることを考えると、セクションの概念はこれから重要になってくると思われる。

【5-1】intervalID = setInterval(func,delay) はfuncに入れた関数をdelay ミリ秒ごとに呼び出す関数。CANVAS では一度描いたデータは消えないのでclearRect(x,y,width,height)で指定座標の範囲を消去する。またCANVASでは描いた図形の色などの状態は次の図形に引き継がれる
【5-1】【2-5】の桃太郎を若干変更してアウトライン化してみた。左は【2-5】にbody要素と見出し「セクション昔話」を追加したもの。右は雉編のあとに見出しのないsection要素を追加したもので、これだとUntitled Sectionになってしまっている

twitter facebook このエントリーをはてなブックマークに追加 RSS

▷こんな記事も読まれています

Recommended by