構造的なマークアップ

articleとsection

HTML5からの新要素なのですが、<section>タグはそのブロックがひとつのセクションである事を示すタグです。 <article>タグは内容が単体で完結するセクションである事を示すタグです。 とのことで似たような意味合いのこの２つのタグはネットで検索しても使い方に迷われる方が結構いらっしゃるみたいです。 ちなみに僕はarticleは一つの大きなくくりでその中にsectionがあるようなイメージを持っています。 例えば食品についてのページがあるとして食材というarticleの中に肉、野菜、果物のsectionがあり、そして同ページに調理法というarticleがあり その中に焼く、煮る、蒸す等のsectionがあるイメージです。更に細分化していくなら肉の中に牛、豚、鳥articleその中に国産、輸入、ブランド等のsectionと言った感じに とらえています。更に言うと下の図を見ていただければわかると思いますが、そこまで入れ子にするとごちゃごちゃしますので、ページを分割します。 今の考えかたでいくとarticleでくくられたコンテンツは単独したコンテンツとして成り立ちますしsectionは一つのブロックとして機能していると思います。 ただこの考え方はタグを逆にしても成り立ってしまうので、この辺が皆さんが悩まれるポイントなのでしょう。ちなみにデザイン都合で使っては行けません。 構造的なマークアップの為のタグです。

上の図では調理法は割愛しています。

余談から入っていまいましたが本題です。 まずはサンプルソースから

サンプルソース

前回のサンプルソースよりもより構造的にマークアップしてみました。ではひとつづつ理解していきましょう。

<header>

headerタグはコンテンツの導入箇所に用いられh1〜h6やナビゲーションが含まれる事が想定されているタグです。 僕の経験則ではページの導入箇所に使われているイメージですが、各セクションの導入箇所に用いることもできます。

html5はhtmlの構造をより明確化するためのものなので僕の場合はほとんどページの導入箇所に使い各セクションでは使っていません。動的コンテンツでたまに使うぐらいです。headタグと間違わないように注意です。

<nav>

navタグはナビゲーションを囲むタグです。いわゆるリンクメニューですね。リンクについては下記のaタグをご参照ください。

リンクの箇所すべてを<nav>～</nav>で囲む必要はありません。グローバルナビゲーション（ページの上の方に配置されているメニュー）やローカルナビゲーション（ページの右側や左側もしくは両側に配置されているメニュー）に主に用いられます。

<ul>

ulは箇条書リストに用いられます。

<li>

liはリストの項目に用いるタグです。

<ul><li>はこのサンプルのようにナビゲーションに用いられることも多いです。

<a>

aタグはリンクの出発点と到達点に用いられます。出発点はサンプルのように <a href="到達点の場所">を記述します。到達点についてはまたサンプルで出てきた時に解説します。

<footer>

footerにはセクションの情報を記述します。著作者や運営者等。 footerタグはページの最後に記述されているイメージですが、headerタグ同様に各セクションの末尾に使用する事ができます。 僕はheader同様殆どの場合ページの末尾に使用しています。

気付いているかもしれませんが今回使用したタグで機能的なタグはaタグだけで後のタグは構造を示すタグばかりでした。 極端な話しレイアウトを表示するだけでしたらpタグだけでも多彩なレイアウトを作る事ができますが、構造的に正しくマークアップするところにhtmlの醍醐味があります。