スマートフォン最適化ノウハウコラム

HTML5におけるページの構造に関する新要素


スマートフォンコーディングでは、様々なOS・ブラウザで閲覧されることが想定され、安易に新技術を使うことができない現状のPCサイトコーディングとは異なり、HTML5CSS3を使っても問題ないため、それらの機能をフルに使ってコーディングを行うことができます。
そこで今回は、HTML5の中でもheader要素やfooter要素といった、ページの構造に関する新要素にスポットを当て、それらを使ってマークアップを行うとどうなるか、従来の手法と比較して検証していきます。

header・footer要素

一般的なレイアウトのWEBサイトには、ヘッダやフッタと呼ばれる、様々な情報を表示させる部分が存在します。
ヘッダはサイト上部に位置する部分で、主にロゴやサイトの内容紹介や、メニューなどのナビゲーション要素が配置されます。一方のフッタは、ページの下部に位置する部分で、コピーライトや関連ドキュメントへのリンク、あるいはヘッダと同様、ナビゲーション要素などが配置される部分となります。
HTML4以前では、これらの部分の部分を指し示すタグがありませんでした。つまり、ヘッダやフッタを作成する場合は、

<div id="header">
~
</div>
<div id="main">
~
</div>
<div id="footer">
~
</div>

上記のように、divタグにIDやクラスを定義することで、他のコンテンツ部分と区別する手法が一般的でした。

一方のHTML5では、

<header id=”gHeader”>
~
</header>
<div id="main">
~
</div>
<footer id=”gFooter”>
~
</footer>

上記のように、ヘッダやフッタを区別するマークアップタグが用意されており、その内部にヘッダ情報やフッタ情報を記入することができるようになります。スタイルについても、これまで通りの方法で指定することが可能です。
ただし、header要素、footer要素は1ページに複数個存在する可能性があるため、ID等で区分けをしておいた方が無難です。

section・article要素

新たに追加されたこれらのタグは、文章構造を示すためのタグです。
section要素は、レイアウトを目的として使うタグではなく、文章の構成を形成するためにつかうものです。つまり、従来の形式に則った手法だと、

<h1>これはタイトルです</h1>
<h2>第1章 HTMLの基礎</h2>
ここでは、HTMLの…
<h3>第1章 第1節 HTMLとは</h3>
HTMLとは…
<h3>第1章 第2節 HTMLを使って…</h3>
HTMLを使うと…

上記のようになりますが、section要素を使うと、

<h1>これはタイトルです</h1>
<h2>第1章 HTMLの基礎</h2>
ここでは、HTMLの…
<h3>第1章 第1節 HTMLとは</h3>
HTMLとは…
<h3>第1章 第2節 HTMLを使って…</h3>
HTMLを使うと…

上記のようになります。わかりやすく言えば、文章の章・節を構成する要素がすなわちこのsection要素ということになります。
一方のarticle要素は、そのタグで囲まれた範囲が一つの完結された内容であるときに使います。前述の例にarticle要素を組み合わせると、

<h1>これはタイトルです</h1>
<h2>第1章 HTMLの基礎</h2>
ここでは、HTMLの…
<h3>第1章 第1節 HTMLとは</h3>
HTMLとは…
<h3>第1章 第2節 HTMLHTMLを使って…</h3>
HTMLを使うと…

上記のようになります。わかりやすい例で言えば、ブログのエントリが一つのarticleに相当すると考えるとよいでしょう。
このように、HTML5では統一された規則に従ってマークアップを行い、情報を適切に構造化することにより、例えば検索エンジンの検索精度を向上させるといったことが可能となると考えられています。制作者にしてみれば訪問者の質を高めることが可能となりますし、情報収集をしたい人にとっても、より精度の高い情報を収集することが可能となります。

nav要素

一般的なWEBサイトでは、ページ内のどこかには、サイト内の各ページへ飛ぶことができるメニュー、すなわちナビゲーション要素が存在します。従来のHTMLだと、ヘッダやフッタと同様、ナビゲーション要素を区別するタグなどはなく、div要素にIDやクラスを付けて区別するのが一般的でした。一例を示すと、

<ul class="sideMenu">
	<li>~</li>
	<li>~</li>
	<li>~</li>
</ul>

上記のようになります。
HTML5では、こういったナビゲーション要素には、nav要素という専用のタグが用意されています。nav要素内の記述は、すべてナビゲーション要素として認識されます。

<ul class="sideMenu">
	<li>~</li>
	<li>~</li>
	<li>~</li>
</ul>

このタグでナビゲーション要素を囲むことにより、その部分は構造的にナビゲーション部分である、と区別することが出来ます。

スマートフォンコーディングに適用すると…


スマートフォンのWEBサイトは、一般的にヘッダ、コンテンツ、ナビゲーション、フッタという順序でレイアウトが組まれます。それをHTML5で構成すると、以下のようになります。

<h1>タイトルです</h1>
<div class="”logo”"><img src="”~”" alt="" /></div>
<h2>説明が入ります</h2>
<h3>コンテンツタイトル</h3>
コンテンツ内容~
<h3>コンテンツタイトル</h3>
コンテンツ内容~
<ul class="sideMenu">
	<li>メニュー1</li>
	<li>メニュー2</li>
	<li>メニュー3</li>
</ul>
<address>~all right recieved.</address>

いかがでしたでしょうか。
HTML5では、文章構造を示すタグが増えたため、従来のマークアップとどこが異なるのか、違いを考えながらコーディングを行うことが必要となります。


  • カテゴリ/スマートフォンコーディング
  • ↑このページの上部へ