各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

: All About ホームページ作成ガイド
西村文宏（ニシムラフミヒロ）; 2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。; http://allabout.co.jp/gm/gt/1053/

RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です！『にししふぁくとりー』
http://www.nishishi.com/

HTML5の書き方（第2回）～新要素について～

2013/03/19

こんにちは。All About ホームページ作成ガイドの西村文宏です。

前回は、HTML5の具体的な書き方のうち、head要素に含める各種情報の書き方を簡単にご紹介いたしました。

今回は、HTML5で新しく追加された要素のうち、階層構造や区画を示すことのできる要素の中から、いくつかを抜粋してご紹介いたします。

以下に記した38行のHTML5ソースには、body要素内に、header、footer、nav、section、asideの各要素が書かれています。

これらは、HTML5で新しく追加された要素の一部です。

それぞれ、HTMLに構造上の意味を付加したり、区画を明示したりする役割を果たします。

<!DOCTYPE html>
<html lang=”ja”>
<head>
   — (省略) —
</head>
<body>
   <header>
      <p>HTML5のサンプルをご紹介！</p>
      <h1>HTML5サンプル</h1>
   </header>
   <nav>
      <ul>
         <li><a href=”/”>HOME</a></li>
         <li><a href=”/sample/”>SAMPLE</a></li>
         <li><a href=”/about/”>ABOUT</a></li>
      </ul>
   </nav>
   <section>
      <h2>HTML5のサンプルいろいろ</h2>
      <p>サンプルをご紹介。</p>
　　　　　：　：　：
   </section>
   <section>
      <h2>HTML5＋CSS3のサンプルいろいろ</h2>
      <p>CSSを加えたサンプルをご紹介。</p>
　　　　　：　：　：
   </section>
   <aside>
      <h2>ブログロール</h2>
      <p>最新のエントリはこちら</p>
　　　　　：　：　：
   </aside>
   <footer>
      <p>Copyright (C) 2013, HTML5 SAMPLE.</p>
   </footer>
</body>
</html>

上記ソースに含まれる各要素について、簡単にご紹介いたします。

◆header要素（ヘッダ）

ヘッダを示す要素です。上記のサンプルソースでは「ページのヘッダ」として利用していますが、「セクションのヘッダ」としても使えます。また、後述のnav要素を使ったナビゲーションをここに含んでも構いません。従来のHTMLで、例えばdiv要素を使って <div> ～ </div> のように記述していたのとは違い、明確にヘッダであることが示せます。

◆nav要素（ナビゲーション）

ナビゲーションであることを示す要素です。

上記ではメインメニューを構成するようなul要素を含んでいますが、他にも「パンくずリスト」や特定コーナー内のローカルなナビゲーションを含んでも良いでしょう。

◆section要素（区画）

「コンテンツの区切り」を示す要素です。ページ内に複数の話題が含まれている際に、同一の話題の範囲を示す際に活用します。この要素内には、必ずh1要素やh2要素などの
「見出し」を含むようにします。もし、適当な見出しが書けないようなら、それはsection要素を使うのには適していない区切りだということです。

その場合は、div要素やhr要素など、その他の要素を使いましょう。

なお、先のサンプルではh2要素で見出しを作っていますが、見出しの階層はsection要素内で振り直すことも可能ですから、h1要素を使っても構いません。

◆aside要素（脇）

ここに含まれている内容が「メインコンテンツではない」ことを示す要素です。

補足情報や広告など、本編から分離しても問題のない内容を記述する際に使います。

◆footer要素（フッタ）

フッタを示す要素です。上記のサンプルでは「ページのフッタ」として利用していますが、「セクションのフッタ」としても使えます。

従来のHTMLで、div要素を使って例えば<div> ～ </div> のように記述していたのとは違い、明確にフッタであることが示せます。

上記にご紹介した要素の中で、「必ず使わなければならない」要素は１つもありません。すべて必要に応じて使えば良いものです。

しかし、うまく活用すると、分かりやすいHTMLソースにできますから、ぜひ使ってみてください。

次回は、HTML5で作られた様々なデザインのテンプレートをご紹介いたします。

【ご注意ください】