@ HTML

ドキュメントアウトライン

HTML5 では構造化のために以下の新要素が導入されました。

  • header 要素:主にイントロダクションやナビゲーションの助けとなるグループが配置されます。
  • footer 要素:文書の作者、著作権データやコピーライト、関連ドキュメントへのリンクなどが配置されます。
  • section 要素:一般的なドキュメントやアプリケーションのセクションを表します
  • article 要素:ドキュメント、ページ、アプリケーション、などサイトの中で自己完結した文書を表します。
  • nav 要素:他のページやそのページ内の部分へのリンクなど、ナビゲーション・リンクを伴うセクションを表します。

HTML 5.1 勧告

4.3.10.1. Creating an outline – HTML 5.1 – W3C

HTML5 のマークアップでは、ドキュメントアウトライン(階層構造)を意識する事が大切になります。

document_outline

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <!-- ヘッダ -->
    <header>
      <h1>これはHTML5文書です。</h1>
      <nav>
        <ul>
          <li><a>トップページ</a></li>
          <li><a href="htmlreference.html">HTMLリファレンス</a></li>
          <li><a href="cssreference.html">CSSリファレンス</a></li>
          <li><a href="saitmap.html">サイトマップ</a></li>
        </ul>
      </nav>
    </header>
    <!-- メインコンテンツ -->
    <main>
      <article>
        <h2>HTML5とは?</h2>
        <p>HTML5とは、HTMLのバージョン5、改訂第5版です…。</p>
        <section>
          <h3>sectionとarticleは必ず内部の最初にh要素を持ちます。</h3>
          <p>section要素は一つのセクション(節や項)であることを示します。</p>
        </section>
        <aside>
          <h3>HTML5のスケジュール</h3>
          <p>HTML5.1が2016年後半に勧告予定です。</p>
        </aside>
      </article>
    </main>
    <!-- フッタ -->
    <footer><small>Copyright noID</small></footer>
  <!-- /.conteiner --></div>
</body>

</html>

style.css

@charset 'UTF-8';
body {
  font-family: '游ゴシック', YuGothic,
  'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',
  'メイリオ', Meiryo,
  'MS Pゴシック', Verdana, sans-serif;
  font-size: 1.08em;
  font-weight: normal;
  font-style: normal;
  line-height: 1.6em;
  cursor: default;
  color: #222;
}

.container {
  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  border: solid 1px #ccc;
}

header {
  padding: 20px;
  background: #fafafa;
}

article {
  padding: 20px;
}

aside {
  margin: 20px 0 0;
  padding: 20px;
  background: #ccc;
}

footer {
  height: 50px;
  padding: 20px;
  background: #fafafa;
}

demo

アウトラインを形成する要素をすこし詳しくみていきましょう。

header要素、footer要素

header 要素は直近の親要素の上部に位置し、主にイントロダクションやナビゲーションの助けとなるグループが配置されます。

footer 要素は直近の親要素の下部に位置し、文章の作者、著作権データやコピーライト、関連ドキュメントへのリンクなどが配置されます。

elements_footer

<body>
  <header>
    <!-- TODO HTML Markup -->
  </header>
  <main>
    <!-- TODO HTML Markup -->
  </main>
  <footer>
    <!-- TODO HTML Markup -->
  </footer>
</body>

section要素、article要素

section 要素は、一般的なドキュメントやアプリケーションのセクションを表します。セクションとは、この文脈においては、コンテンツのテーマをグループ化するものです。通常は、section 要素の子となる見出し (h1-h6 要素) を入れることで、section 要素それぞれのテーマが識別されます。

article 要素は、ドキュメント、ページ、アプリケーション、などサイトの中で自己完結した文書を表します。
たとえば、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェットなどが article と考えられます。

elements_section

<body>
  <article>
    <h1>HTML5で新新しく定義された要素</h1>
    <section>
      <h2>HTML5ではarticle要素が追加されました。</h2>
      <p>ここが本文です。</p>
    </section>
    <section>
      <h2>HTML5ではsection要素が追加されました。</h2>
      <p>ここが本文です。</p>
    </section>
  </article>
</body>

nav要素

nav 要素は、他のページやそのページ内の部分へリンクするページのセクション、つまりナビゲーション・リンクを伴うセクションを表します。

elements_nav

<body>
  <nav>
    <ul class="side-menu">
      <li>LINK-1</li>
      <li>LINK-2</li>
      <li>LINK-3</li>
    </ul>
  </nav>
</body>

aside要素

aside 要素は、文書構造において主要コンテンツと関連性はあるが、主要コンテンツから切り離すことが可能なセクションを表します。具体的にはサイドバーや広告、引用情報等で使われます。このようなセクションは、印刷では、よく補足記事として表されるものです。

elements_aside

<body>
  <article>
    <h1>HTML5で新新しく定義された要素</h1>
    <section>
      <h2>HTML5ではarticle要素が追加されました。</h2>
      <p>ここが本文です。</p>
    </section>
    <section>
      <h2>HTML5ではsection要素が追加されました。</h2>
      <p>ここが本文です。</p>
    </section>
    <aside>
      <h2>HTML5のスケジュール</h2>
      <p>HTML5.1が2016年後半に勧告予定です。</p>
    </aside>
  </article>
</body>