section要素を使ってみよう。

section要素は、章・節・項などの一般的なセクションを表す。
基本的な話題の階層は、このsection要素を使う。

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. 内容をよく読み、セクションの範囲を明示的に示す

<section>
  <h2>私たちにできること</h2>
  <p>私たちは、下記の技術でお客様のWebサイトを形に出来ます。</p>
</section>
<section>
  <h2>新着ブログ</h2>

  <h3>もうすぐHTMLの勉強が終わります。</h3>
  <p>皆さんこんにちは、もうすぐHTMLの勉強が終わるので、・・・<a href="#">もっと見る</a></p>

  <h3>テーブルとフォーム関連の要素を習得！</h3>
  <p>HTMLの中でも習得が困難なテーブルとフォーム関連の要素を・・・<a href="#">もっと見る</a></p>
</section>

article要素を使ってみよう。

article要素は、ブログやニュース記事などの独立したセクションを表す。
article要素は、その部分が独立したコンテンツとして成り立つ必要がある。

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. 内容をよく読み、独立したコンテンツの範囲を明示的に示す

<section>
  <h2>新着ブログ</h2>
  <article>
    <h3>もうすぐHTMLの勉強が終わります。</h3>
    <p>皆さんこんにちは、もうすぐHTMLの勉強が終わるので、・・・<a href="#">もっと見る</a></p>
  </article>
  <article>
    <h3>テーブルとフォーム関連の要素を習得！</h3>
    <p>HTMLの中でも習得が困難なテーブルとフォーム関連の要素を・・・<a href="#">もっと見る</a></p>
  </article>
</section>

aside要素を使ってみよう。

aside要素は、メインコンテンツからは切り離すことが可能な補足的なセクションを表す。
具体的には、 補足情報や余談、広告やサイドバーの補足コンテンツなどに利用する。

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. 内容をよく読み、補足コンテンツの範囲を明示的に示す

<aside>
  <h2>関連リンク</h2>
  <ul>
    <li><a href="#">Dummy Cafe</a></li>
    <li><a href="#">架空温泉 だみい屋</a></li>
  </ul>
</aside>

nav要素を使ってみよう。

nav要素は、主要なナビゲーションを表す。
具体的にはサイトの全ページに一貫して表示されるグローバルナビゲーションなどに利用する

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. 内容をよく読み、主要なナビゲーションの範囲を明示的に示す

<nav>
  <h2>サイト内メニュー</h2>
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">私たちについて</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

3. 上書き保存
4. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内の「index.html」をダブルクリック。
5. きちんと表示されているかを確認

セクショニング・コンテンツの要素がない場合

セクショニング・コンテンツの要素を使わない場合は、見出しの要素が現れた時にセクションが始まる。
ただし、見出し要素の階層（見出し要素の数字）によって、新たなセクションとして始めるか、
サブセクションとして始めるかが異なる。
具体的には、見出し要素の階層が、前の見出し要素と同じ階層か、
それより上の階層であれば（数字が小さければ）現在のセクションを終了し、
新たなセクションとしてセクションを始める。
反対に、見出し要素の階層が、前の見出しより下の階層であれば（数字が大きければ）、
現在のセクションのサブセクションとして、セクションを始める。
従って、作りたいアウトラインに合わせて適切にh1要素 〜 h6要素を使う必要がる。

セクショニング・コンテンツの要素がある場合

セクショニング・コンテンツの要素がある場合、セクショニング・コンテンツの要素が現れた時に、
現在のセクションのサブセクションが始まる。
なお、そのセクションの先頭にある見出しが、そのセクションの見出しとなる。
従って、セクショニング・コンテンツの要素を適切に使用していれば、
見出しの階層（見出し要素の数字）に関係なくアウトラインを生成出来る。
ただし、セクションの範囲はセクショニング・コンテンツの要素で明示的に示し、
その階層に合わせた見出しの要素を使うことが推奨されている。

アウトラインを確認できるサイト

下記のサイトは、HTMLのアウトラインを確認できるWebサイト。
作成したHTMLファイルをアップロードするか、URLを入力するか、直接コードを記述するかで確認が出来る。

HTML 5 Outliner

header要素を使ってみよう。

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

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. ヘッダーを明示的に表す

<header>
  <h1>Dummy 株式会社</h1>

  <nav>
    <h2>サイト内メニュー</h2>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">私たちについて</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</header>

main要素を使ってみよう。

main要素は、ページの主要コンテンツを表す。
この要素は、そのページ固有のメインコンテンツのみに使う。
また、article要素、 aside要素、 nav要素、 header要素、footer要素の中で使うことも出来ない。

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. メインコンテンツを明示的に表す

<main>
  <section>
    <h2>私たちにできること</h2>
    <p>私たちは、下記の技術でお客様のWebサイトを形に出来ます。</p>
  </section>
  <section>
    <h2>新着ブログ</h2>
    <article>
      <h3>もうすぐHTMLの勉強が終わります。</h3>
      <p>皆さんこんにちは、もうすぐHTMLの勉強が終わるので、・・・<a href="#">もっと見る</a></p>
    </article>
    <article>
      <h3>テーブルとフォーム関連の要素を習得！</h3>
      <p>HTMLの中でも習得が困難なテーブルとフォーム関連の要素を・・・<a href="#">もっと見る</a></p>
    </article>
  </section>
</main>

footer要素を使ってみよう。

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

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. フッターを明示的に表す

<footer>
  <p>当サイトへのお問い合わせは、<a href="#">お問い合わせフォーム</a>からお願いします。</p>
  <p><small>&copy; 2018 Dummy All Rights Reserved.</small></p>
</footer>

address要素を使ってみよう。

address要素は、連絡先を表す。
address要素は、基本的にはサイトの連絡先を表すが、article要素内で使う場合は、 その記事の連絡先を表す。
なお、「address」という要素名だが、全ての住所に使う要素ではないので注意する。

1. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内にある「index.html」をテキストエディタで開く
2. サイトの連絡先情報をaddress要素に変更

<footer>
  <address>当サイトへのお問い合わせは、<a href="#">お問い合わせフォーム</a>からお願いします。</address>
  <p><small>&copy; 2018 Dummy All Rights Reserved.</small></p>
</footer>

3. 上書き保存
4. 「html-lessons」 › 「chapter05」 › 「sectioning」フォルダ内の「index.html」をダブルクリック。
5. きちんと表示されているかを確認