ページ内の基本構造を表す要素

多くのWEBサイトは、全てのページの上部にロゴなどを配置するヘッダーや、著作権表記などを配置するフッターがあります。HTML5からは、これらのようにページやセクションの基本構造を表す要素が新たに追加されました。なお、これらの要素は、セクショニング・コンテンツではないので、アウトラインは生成しません。

header要素 HTML5で追加

<header（ヘッダー）>要素は、 ページやセクションのヘッダーを表す要素です。具体的には、WEBサイト内の全てのページの先頭に一貫して表示されるロゴやナビゲーションのグループや、セクションの導入部分などに利用します。

カテゴリ

• フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ
ただし、 子孫に別の <header>要素、 <main>要素、<footer>要素は配置できない。

サンプル

<header>
  <h1>メアリーブログ</h1>
  <p>私の日記を公開しているサイトです。</p>
  <nav>
    <h2>メインメニュ</h2>
    <ul>
      <li><a href="#">記事一覧</a></li>
      <li><a href="#">私について</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

<header>は、このようにページのヘッダーに使ったり、前回紹介した<article>内で、記事のヘッダーとしても使います。

main要素 HTML5で追加

<main（メイン）>要素は、 ページの主要コンテンツを表す要素です。この要素は、そのページ固有のメインコンテンツのみに使います。つまり、どのページにも配置されるような、ロゴやナビゲーションやサイドバー、著作権表記などに使ってはいけません。また、<article>要素、 <aside>要素、 <nav>要素、 <header>要素、 <footer>要素の中で使うことも出来ません。

カテゴリ

• フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ

サンプル

<main>
  <h2>新着記事一覧</h2>
  <article>
    <h3>お友達がオープンするカフェのホームページを作ることになりました！</h3>
    <p>今度、私の友達がカフェをオープンします。そしてそのカフェの・・・<a href="#">もっと読む</a></p>
  </article>
  <article>
    <h3>WEBデザイナーの勉強をはじめました。</h3>
    <p>私は、WEBデザイナーになるために勉強を始めます。・・・<a href="#">もっと読む</a></p>
  </article>
</main>

<main>要素は、このようにページ内の主要なコンテンツを明示します。

footer要素 HTML5で追加

<footer（フッター）>要素は、 ページやセクションのフッターを表す要素です。具体的には、全てのページの一番最後に一貫して表示されるサイトの連絡先情報や、著作権情報、関連リンクや、ブログ記事などのセクション内では著者情報などに利用します。

カテゴリ

• フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ
ただし、 子孫に別の<footer>要素、 <header>要素、 <main>要素は配置できない。

サンプル

<footer>
  <p>&copy; 2016 Mary Blog.</p>
</footer>

<footer>要素は、このようにページの著作権情報などに利用します。またページのフッターには、サイトの連絡先情報などを配置することがありますが、この場合は<footer>要素内に、<address>要素を用いて配置します。

address要素

<address（フッター）>要素は、 連絡先を表す要素です。この<addrss>要素は、基本的にはサイトの連絡先を表しますが、<article>要素内で使う場合はその記事の連絡先を表します。また、address という要素名ですが全ての住所に使う要素ではありませんので注意して下さい。サイトまたは、記事の連絡先情報として住所が含まれる場合に利用することは問題ないですが、 住所 = <addrss>要素ではありません。

カテゴリ

• フロー・コンテンツ

コンテンツ・モデル

フロー・コンテンツ
ただし、 子孫にヘディング・コンテンツ、 セクショニング・コンテンツ、 <header>要素、 <footer>要素、 <address>要素は配置できない。

サンプル

<footer>
  <address>
    メアリーへのご連絡は、<a href="#">お問い合わせフォーム</a>からお願いします。
  </address>
  <p>&copy; 2016 Mary Blog.</p>
</footer>

<address>要素は、このようにサイトの連絡先情報に利用します。なお、<article>要素内に配置しする場合は、その記事への連絡先情報になるので注意して下さい。

ページ内の基本構造を表す要素を使ってみよう

それでは、ページ内の基本構造を表す要素を使ってみましょう。

1. 「Chapter20」フォルダ内の「index.html」をテキストエディタで開く
2. 下記を参考に、<header>、<main>、<footer>、 <address>をマークアップ

<header>
  <h1>伝説のWEBクリエーター日記</h1>
  <nav>
    <h2>メインメニュー</h2>
    <ul>
      <li><a href="#">すべての日記</a></li>
      <li><a href="#">僕の仲間</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>伝説のWEBクリエーター日記とは</h2>
    <p>この日記は、僕が伝説のWEBクリエーターになるための冒険を記した冒険の書だ。</p>
  </section>
  <section>
    <h2>新着の日記</h2>
    <article>
      <h3>「【練習問題2】ムカミのお願い」をクリアした。</h3>
      <p>先日習得したフォーム関連の要素などを使って、ムカミからお願いされた「お問い合わせフォーム」を作成した。...<a href="#">もっと見る</a></p>
    </article>
    <article>
      <h3>「label要素」を習得した。</h3>
      <p>フォームのコントロール部品とそのラベルを関連付ける為の要素であるlabel要素を習得した。...<a href="#">もっと見る</a></p>
    </article>
  </section>
</main>
<aside>
  <h2>近況</h2>
  <p>HTMLを<em>必死で</em>勉強中！</p>
</aside>
<footer>
  <address>
    当サイトへのお問い合わせは、<a href="#">お問い合わせフォーム</a>からお願いします。
  </address>
  <p>&copy; 伝説のWEBクリエーター日記 All Rights Reserved.</p>
</footer>

3. 上書き保存し、ブラウザで確認

練習問題

「Chapter20」 -> 「quest」フォルダ内の「index.html」を開いて下記の問題を解いてみましょう。なお、解けた問題は問題文の横のチェックボックスをオンにしましょう。