デザインのあれやこれ
HTML5：セマンティックなセクショニング【前編】
HTML5で提唱される『セマンティックなマークアップ』は、要素の持つ意味や役割を定義するだけでなく、文書構造としての『アウトライン』も生成します。両者は関連性が深いので、まとめて『セマンティックなセクショニング』と称して、構造的なHTML文書の作成とその手法について紹介します。
旧来のHTML4やXHTMLに比べ、HTML5では一体何が変わったんだろうね？って考えてみると、どうしても目立つところで動画再生が備わったとか、canvasで自由な描画が可能になった等が目に付くんじゃないでしょうかね。でもWebページ本来の目的である『情報を発信して効果を得る』っていう視点で考えると、管理・運用・情報拡散等の効果において無視できない大きな変更点として『文書構造と意味付けの定義化』が挙げられると思うんです。
個人的にはこれを『セマンティックなセクショニング』と称しています。
『要素の持つ意味を明確にした構造的な文書作成』という意味ですが、横文字で表現したほうがインパクトあって覚えやすい気もしますし、なによりHTML5仕様の原文で『Semantic Elements』『Sectioning Elements』と題されているので、それに倣った形で呼んでいます。
セマンティックなセクショニングってどういうこと？
これは、HTML文書内の各要素の意味や役割を明確化して、構造的に整った文書として作成するということです。
では、そうじゃない『意味や役割が明確化されてない』『構造的に整ってない』HTML文書とはどういうものか例を挙げてみます。
Web黎明期のTABLEレイアウト
まずは下記のサンプルコードを見てみてください。
<h1><font size="30">わたしのWebサイト</font></h1>
<p> </p>
<p> </p>
<table>
<tr>
<th><img src="menu_home.jpg"></th>
<td rowspan="5" background="#ccccff">
<p><font size="20">わたしの写真集</font></p>
<p>
<br><br>
<font color="#ff0000"> 注意！</font><br>
この写真は私が撮影したもので、著作権は<font color="#ffcc00">私</font>です。無断使用禁止！<br>
<br>
<br>
</p>
<img src="photo_top_big.jpg">
<p>
● <a href="page_08.html">2001/8/13</a> 公園で撮影した写真<br>
● <a href="page_07.html">2001/7/30</a> 友達と旅行のときの写真<br>
● <a href="page_06.html">2001/5/8</a> 新しいカメラのテスト！<br>
<br>
</p>
<img src="photo_12.jpg"><img src="photo_11.jpg"><img src="photo_10.jpg">
</td>
</tr>
<tr><th><a href="diary.html"><img src="menu_diary.jpg"></a></th></tr>
<tr><th><img src="menu_photo.jpg"></th></tr>
<tr><th><a href="bbs.cgi"><img src="menu_bbs.jpg"></a></th></tr>
<tr><th><a href="link.html"><img src="menu_link.jpg"></a></th></tr>
</table>
このソースの問題点を挙げてみます。（キリが無いほどありますが…）
- どの部分が何を意味しているのかわからない
- tableタグがレイアウト目的で使用されている
- レイアウト目的で、本来の用途とは違うタグの使用がされている
- 見出しがpタグで記されている（見出しか文章かわからない）
- 文字サイズや文字色の変更タグが文書内に埋め込まれている
Web黎明期の2000年頃は本当にこんなカンジのWebサイトが主流でしたよね。有名な（悪名高い）テーブルレイアウトというやつです。この頃はまだCSSも使われていませんでした。
構造やアウトラインがどうのという以前の問題で、これではどこが本文でなにがタイトルか、ナビゲーションはどこで謎の空白は何を意味しているのか、まるでさっぱりわかりません。
このように、レイアウトや装飾の目的でタグが使用され、表示されて見れればOKなHTMLが組まれていたので、文書としてわかりづらいだけでなく、管理・更新の手間もかかり、文書データとしては他に応用することができないようなものが氾濫…というより、これが普通の組み方だと捉えられていたんです。今考えるとすごい話ですね。
このようなHTML文書の組まれ方は、大半は所謂○○○ビルダー等のWebページ作成ソフトによるものではないでしょうかね。これは○○○ビルダーが悪いワケではなく、要素を感覚的に（＝意味や構造の概念を省いて）配置できる仕様であれば、必然的にこういう形になってしまうだろうという事なんです。
ここで１つ、『○○○ビルダーはもう流行りじゃないから使わないよ』と言ったとしても、同じく感覚的に要素を配置できるWordPressの存在があります。ページ全体ではなく記事部分のみとはいえ、ツールで直感的に要素を置いていくと、上記のような（汚い言葉を使えばクソミソな）HTML文書を公開してしまう事になります。
しかしそこはさすがのWordPress、バージョン５のGutenbergにより構造的な文書が作成”しやすい”ように改良を図っていると見て取れます。しかしこれもあくまで補助的な要素なので、実際に記事の作成者が構造化と意味付けを意識している必要があると思うんです。
構造化が意識されはじめたHTML
（私の記憶ではたしか）2005年頃からですが、前述のようなHTML構造の問題意識が浮上し、より構造的で管理効率も良く、文書として応用し活用することができる形にするべきだという流れになってきました。
HTMLはあくまで文書として、本文とその他の部分を明確に区分けし、レイアウトや装飾はCSSで指定するようになりました。
その頃のソースがこんなカンジです。
<div id="header">
<h1>私の写真撮影サイト</h1>
<ul class="main_menu">
<li><a href="index.html"><img src="images/menu_button_home.jpg" alt="ホーム" /></a></li>
<li><a href="page_about.html"><img src="images/menu_button_about.jpg" alt="自己紹介" /></a></li>
<li><a href="page_photo.html"><img src="images/menu_button_photo.jpg" alt="写真記録" /></a></li>
<li><a href="page_other.html"><img src="images/menu_button_other.jpg" alt="その他" /></a></li>
</ul>
</div>
<div id="main">
<div class="main_header">
<h2>写真記録</h2>
</div>
<div class="photo_alert">
<h3>ご注意事項</h3>
<p>このサイト内に掲載している写真の著作権は<strong>watashi</strong>にあります。</p>
</div>
<div class="main_block">
<h3>写真記録</h3>
<p>私は写真撮影のため日本全国を飛び回っています。<br />
写真を見ただけで、その場に行ったような気分になれるような、素敵な写真が撮れるよう頑張っています。</p>
<p>どうぞ、写真からその地の魅力を感じて楽しんでください。</p>
<ul>
<li><a href="photo_08.html"><span>2005/08/13<span>○○○公園</a></li>
<li><a href="photo_07.html"><span>2005/07/30<span>□□□旅行</a></li>
<li><a href="photo_06.html"><span>2005/05/08<span>△△△カメラの試写</a></li>
</ul>
</div>
</div>
<div id="footer">
<p class="contact">ご連絡はこちら <span>watashi@mail.com</span></p>
<p class="copyright">copyright(c) watashi-photo , all right reserved.</p>
</div>
構造が区分けされ、どの区画が何を表しているかが明確ですね。見出しや本文も整っています。レイアウトや装飾はCSSとして分割され、文書として綺麗な形になっています。
このように、divという区分けタグを用いてブロック化し、各構造にidやclassで意味付けをして、構造的なHTML構文の組み立てが推奨されるようになり、徐々にこのスタイルが主流になっていきました。
しかし統一規格として定義づけられたものではなかったので、人によりスタイルの違い・ブレが生じていました。ページのヘッダーを指すidが『header』の他『main-header』『page_header』だったり、はたまたidではなくclassで指定されていたり…といったカンジですね。
HTML5で文書構造の規格統一化が図られた
このように、ブレが生じていた構造化の手法が、HTML5によって明確に定義づけらました。
<header>
<h1>Watashi-Photo</h1>
<nav>
<h1>メインメニュー</h1>
<ul>
<li><a href="home/">Home</a></li>
<li><a href="about/">About</a></li>
<li><a href="photo/">Photo</a></li>
<li><a href="blog/">Blog</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h1>Photo</h1>
</header>
<section>
<h1>フォトグラファーWatashi</h1>
<figure>
<img src="images/photo_header.jpg" alt="フォトグラファーWatashi撮影中のイメージ" />
<figcaption>フォトグラファーWatashi 撮影中のイメージ</figcaption>
</figure>
<p>趣味で始めた写真撮影が高じて、今ではプロのフォトグラファーとして活動しています。</p>
</section>
<aside>
<h1>所属グループ</h1>
<p><a href="http://anata.com">フォトチームANATA</a></p>
</aside>
<section>
<h1>ご注意事項</h1>
<p>サイト内の写真の著作権は<strong>Watashi</strong>が所有しています。ご利用希望の方はご連絡ください。</p>
</section>
<section>
<h1>Album</h1>
<ul>
<li><a href="photo/?page=08"><span>2015/08/13<span>○○○公園</a></li>
<li><a href="photo/?page=07"><span>2015/07/30<span>□□□旅行</a></li>
<li><a href="photo/?page=06"><span>2015/05/08<span>△△△新型の試写</a></li>
<ul>
</section>
</article>
<footer>
<p><small>Copyright Watashi-Photo,All Right Reserved.</small></p>
</footer>
全体的な構造としては前のものとたいして変わっていませんが、区分けされた部分の役割が明確ですね。
以前はdivという箱で区切られ、idやclassによりヘッダー・フッター等の役割を（それとなくわかるように）定義されていましたが、headerやfooter等の専用タグできっちり明確にその区分の役割が示されています。
このように、テキストや区分といった要素の持つ役割・意味合いを明示的に記述したHTMLを、セマンティックなHTMLと呼びます。
歴史的な進化といってもいいんでしょうか？問題の洗い出しと解決を積み重ねていった結果、構造的に区分化され、区分の持つ意味・役割が明示的な記述の仕方が確立されたような形ですね。
構造的なHTMLの必要性やメリットは？
構造化要素の登場で複雑化していっているようにも見えますが、『ページを開いて見え方に問題なければオッケー』なHTMLに比べ、構造的に組み立てたHTMLはどのようなメリットがあるかというと、下記のようなものが挙げられると思います。
- ページ管理・運用の効率性
- マルチデバイス対応化
- アウトラインの生成とSEO面での効果
※３つ目の『アウトラインの生成』は重要なテーマなので詳しく後述します。
ページ管理・運用の効率性
構造的に整ったHTML構文は、ページを管理・運用するうえでのメリットが大きいです。
追記・修正・編集をする際など、（たとえHTMLがわからない人が見たとしても）だいたいどの部分をいじればよいか検討がつきますね。
一時的なキャンペーンサイト等でなければ、基本的にWebサイトは長期間にわたって更新・運用していくものですが、常にHTML知識を持つ技術者が更新を担当ようなケースは少なく、どちらかというと特別な技術を持たない担当者が更新を任されるようなケースが多いのではないでしょうか。
そういった際、例えば最初の例で挙げたようなソースでは、作った本人以外に構造を理解してもらうのは難しく、そもそもどこを触っていいかもわからないと思います。
構造的に整えれば自然とシンプルなソースとなり、更新や編集も容易で、効率的な運用が見込めます。
また文書の再利用性も高くなります。
一過性の（再利用する事がありえない）キャンペーン記事等ならともかく、例えばインタビューや商品の説明・特に言えば学術的な文書などは、最初に公開したサイト以外でも再び掲載したいという場合があると思われます。この手の記事の作成にはそれなりに時間もかかり、新しいメディアに掲載するたびに作り直していたのでは効率が良いとは言えません。
構造的に整えられた（レイアウト目的でのマークアップではなく、文面の持つ意味や役割でマークアップされた）記事であれば、あらゆるメディアへの応用が簡単になります。
（誤解を招かないように付け足すと、決してマルチポストや転載を促すためのものではありません。有益な文書であれば様々な場所で使用されるべきという考え方ですが、転載が用意になったという負の側面もあるかもしれません…）
マルチデバイス対応化
ほとんどの場合、このマルチデバイス対応の為にHTMLを構造化しているというのが現状ではないでしょうか？
『スマートフォンユーザー限定キャンペーン！』といったように、よほどターゲットが限定されたページでなければ、基本的にWebサイトはマルチデバイス対応が求められます。
一昔前はPCブラウザ用ページとモバイル用ページが分けられているサイトも多くありましたが（そして現在も稼働中ですが）、現在はレスポンシブ（１つのHTMLページで、開くブラウザの画面サイズによりレイアウトが可変する）デザインで作成するのが主流となっています。
ここで前述の、HTML文書の再利用性が高いというメリットが活きてきます。
マルチデバイス対応ページを組むということは、PCブラウザ用に組んだページを（同じHTMLソースを用いて）モバイル用に再利用・またタブレット用に再利用するという事と同じ考え方になります。閲覧デバイスによりレイアウトは大きく変える必要がありますが、文書の持つ意味や構造は変わりません。構造と意味付けによりマークアップされたHTML文書であれば、様々なデバイスへの対応が容易になります。
例えば、グローバルメニューをPCブラウザでは横一列並び表示、スマートフォン閲覧時は開閉式メニューにするというパターンは多いと思います。
このようなケースは、もしtableタグを使ってレイアウトを固めてしまったHTMLでは再現ができません。
レイアウトはデバイスやデザインによって変化していきますが、要素がそもそも持つ意味（この例だと『この連続する要素は他ページへ遷移するメニューの役割である』という意味）は変化しませんので、不変である要素の持つ意味合いに沿った＝セマンティックな記述をするのが理想的でしょう。
<nav> <!-- 要素の意味：これはナビゲーションです（不変） -->
<ul> <!-- 要素の意味：これはリストです（不変） -->
<li><a href="menu01.html">メニュー１</a></li> <!-- 要素の意味：これはリスト内の１要素で（不変）、選択すると他ページへ遷移します（不変） -->
<li><a href="menu02.html">メニュー２</a></li> <!-- 同上 -->
<li><a href="menu03.html">メニュー３</a></li> <!-- 同上 -->
</ul>
</nav>
このように、HTML上ではデザインによって左右されないセマンティックな記述をし、CSS側でデバイスによって横並び・縦並びとレイアウトを切り替える指定をしてあげれば、最小の工数で安定した運用が図れますね。
SEO面での効果とアウトライン
SEO効果の基準は日進月歩で常に変化していくので、これが効果ある！と言えるものは無いと考えるべきだとは思いますが…
しかし、構造的に区分化・要素を意味づけるマークアップがなされていなければ、クローラーに正しくページ情報を伝えることが出来ません。狙った意図を正しく反映させる為の下準備として、構造的でセマンティックなマークアップが必要と考えて良いと思います。（もし間違った意味付けをして、主題に関係のない補足や広告などがキーワードとして拾われてしまったら目もあてられませんからね！）
構造化の概念が追加されたHTML5では、アウトラインという文書の構造を表すものが生成されます。サイトマップのページ版みたいなもので、クローラー等の機械はページの構造としてこのアウトラインを参照します。
下記のURLから、ページやHTMLソースのアウトラインがどうなっているかを確認することができます。
前項のソースをコピペして確認してみると、下記のようなアウトラインが生成されているのがわかります。
1.Watashi-Photo
1.メインメニュー
2.Photo
1.フォトグラファーWatashi
2.所属グループ
3.ご注意事項
4.Album
また、同名で同機能のプラグインがChrome用に提供されているので、そちらを利用しても良いと思います。
各区分の見出しが階層構造になっていますね。クローラーはこのアウトラインを参照するので、正しく整ったアウトラインを組み立てるのが理想ですね。
このように、レイアウト目的のマークアップではなく、構造的な文書として整えられたマークアップを目指すものです。
後編では実際のマークアップ方法等について紹介します。