| web creators特別号 |
| HTML5・スマートフォン・SNS・Webアプリケーション Webサイト制作最新トレンドの傾向と対策 |
Webデザイン 1-02
HTML5による文章構造の厳密化
HTMLはもともと見た目も文書構造も一緒に扱っていたが、そこからCSSという形で見た目を分離し、本来の理念に則った文章の構造を表現する言語になった。しかしHTML4まではそのためのタグが明確に存在せず、HTML5でようやく状況が整った。
制作・文／藤沢立也（Suika Cube Inc.）
Browser
IE 9over Firefox 4over Safari 5over Chrome 9over
HTML5はマークアップを整理し、新たにAPIのWeb標準化を進めることで、これまでのブラウズに関する主だった問題を解消した。またアウトライン・アルゴリズムが新たに導入され、文書構造が非常に明快になった。従来のHTML（及びXHTML）では構造的にあやふやなルール（暗黙的アウトライン）であった見出し要素のレベルによる階層化に対して、HTML5は新たにセクショニング・コンテンツによるマークアップを付け加えることで、アウトラインを明示的に生成することが可能になった。こういったHTML5の基本的なマークアップ、特にセクションについて簡単に説明しておこう。
HTML5における文章の構造化とは
HTMLがどのように文章を構造化していくかについては、まず一つ一つのタグに囲まれた文章がどういう意味、目的で囲まれているかを理解する必要がある。従来のHTML文書ではdivタグの存在に注目して構造解析を行ってきた。<div id="header">であればヘッダ部分、idがcontentsならメインコンテンツと大体想像はつく。しかし、誰もが同じ用語を同じ意味で区切るとは限らない。たとえばcontentsのように言葉の意味で区切る人もいれば、block1、block2のように構造的な意味で区切る人もいるだろう。【01】
この曖昧さを排除して明確にするのがHTML5のセクショニングだ。今後divは配置的な役割だけを担い、意味的な構造はHTML5のセクション要素がその役割を担うことになる。
【01】よくあるdivによるWebサイトの構成だが、全てのサイトがこうなっているわけではないし、レイアウトと文章構造が曖昧になっている。
セクション要素
セクションは、セクション要素とその内容を示す見出しからなる。現在主要なセクション要素のタグは４種類になる。実際はbodyタグなども1つのセクション要素なのだが、ここでは新しいタグを紹介しよう。
article
一つの独立したドキュメントやコンテンツを表す。代表的なものはブログのエントリだ。それ自体が完結していて再配布可能な内容を持つ 【02】。内容が完結しているものならば入れ子（ネスト）にすることも可能だ。その場合、子articleは親articleに関連した内容になる【03】 。
【02】もっと単純な例、ひとつの完結したエントリをarticleで囲む。
【03】ブログの本文に関連した内容で、なおかつ完結した内容ということでコメントを入れ子にする。
nav
サイトナビゲーションを示す要素だ。サイト内の主要なナビのみに使い、それ以外には使わない 。
【04】 上にあるメインナビゲーションのみnav要素で囲っている。その他のリンクなどまで囲む必要はない。
aside
補足的な内容を示す要素だ。サイドバーや余談、補足などに使う。補足的な内容のためこの部分については必ずしも見出しを必要としない 【05】。
【05】aside要素の解説というメイン記事にたいして、asideの語源を余談して挿入し、aside要素として追加している。
section
一般的なドキュメントやコンテンツを含むセクションだ。一見、文章を囲んでいる形はarticleに似ているが、articleは一つの完結したコンテンツを表すのに対して、sectionは一つの章、節、項などの一部分を表す。
【06】かぐや姫という完結したarticle要素の本文を、見出しごとにsection要素で囲み章立てる。
セクションの見出し
セクションを構成するもう一つの要素が見出しだ。セクションの内容をわかりやすく抽出したものを見出しとして設定する。それがh1～h6までのタグになる。後の数字が見出しのランクを表しており、ネストに合わせてランク付けしていく方法が現在は一般的だ【07】。
【07】h1～h6見出しのランクを正しく使うことで、文章の構造がわかりやすくなる。ランク順が反対になったりするとおかしくなるので注意。
サイト構造と検索エンジンの未来
人がサイトを見る場合は、明確に構造化されていなくとも「だいたいこんな感じのサイトなんだ。」というのは直感的に理解できるが、検索エンジンにとっては非常に曖昧なデータだ。しかし明確な構造がHTML5によって示されると、より整理された正確なデータを取得することができるようになり、見出しが不足したり、見出しとセクションの関連性が薄いと判断されれば使いにくいサイトと判断されるだろう【08】。制作側もHTML5を用いてより検索エンジンにわかりやすいサイトを作ることが今後のSEOなどで重要になる。まだまだブラウザの対応率は低いが一足先に理解しておけば、現在のdivを使ったコーディングにおいても役に立つことだろう。
【08】左記コードに見出しを忘れたsection要素を追加したものを、HTML 5 Outliner（http://gsnedders.html5.org/outliner/）で確認したものが右図。
見出しのないsection要素は「Untitled Section」と表記されてしまう。この種のエラーが多くなると、今後検索エンジンに信頼のできないサイトして扱われてしまう可能性がある。
[目次に戻る]
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。
※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。
