[17-2] セクションを表す要素(article, aside, section, nav)

今回は<article><aside><section><nav>のセクション要素を。

使用する要素 <article> 〜 </article>
<aside> 〜 </aside>
<section> 〜 </section>
<nav> 〜 </nav>

本日のサンプルは前回と同じです

★サンプルは前回 [ 17-1 ] と同じです。
★このサンプル画像をクリックすると、HTMLファイルが開きます。
★開いたHTMLのソースを見てもらえばOKですが、下記から一式をzipでダウンロードできます。
→本日のサンプル(sample17set.zip (3k))をダウンロード

★ブラウザでHTMLやCSSのソースを見るには…「ほんっとにはじめてのHTML-[14-1] ブラウザでソースを見る」をご覧ください

<article>要素は、内容が完結しているセクションに

まず<article>からいきましょう。
サンプルでは、メインコンテンツの部分に<article>要素を使っています。

<article>要素は、それだけで内容が完結しているセクションに使います。
例えば、ページのメインコンテンツの部分に。
ブログだったら1つの記事や、コメント1つ1つも、それで完結した内容なので<article>を使えます。1ページに何度使ってもいいのです。

今回のサンプルの<article>部分のHTMLは下記のとおりです。
<article>は1つだけで、その中を<section>で分けています。

<article>
<section>
   <h1>セクションと見出し</h1>
      <p>〜本文省略〜</p>
   <h2>見出しのレベルで暗示的にセクションができる</h2>
      <p>〜本文省略〜</p>
   <h2>セクション要素で明示的にしよう</h2>
      <p>〜本文省略〜</p>
</section>
<section>
   <h1>セクションに分ける要素</h1>
      <p>〜本文省略〜</p>
</section>
</article>

<article>と<section>の関係なんですが、
今回のサンプルでは、外側のくくりを<article>、その中のセクション分けを<section>でやってますけど、どうも逆でも良いみたいなんですよね。
どっちかがどっちかの中に入ってなければならないってわけでも無いようです。
たとえば、メインコンテンツ部分を<section>で囲み、その中に<article>を複数入れてもいいってわけです。
ただ、役目が違うので、そこから推し量って今回のサンプルのような使い方がイイと思います。
<article>はあくまでもそのページの主要な内容をまとめる役目。
<section>はセクション分けの役目です。(<section>は見出し要素(h1〜h6)と一緒に使って章・節・項などの階層(レベル)を表す事ができます。)

いろいろ文献やサンプルを読み、ここが着地点かな?と思われるところを書いてます。修正点が見つかったら、すぐにアッします。
★<article>や<section>の役割は、W3CのHTML5の新要素のページを参考に。
★この↑サイトを、羽田野 太巳氏が日本語訳にしてくれています。HTML5.jpという有名サイトです。

それから、デザイン上の理由で、ブロックとしてまとめたい時には、無理して<article>や<section>
で囲まず、素直に<div>を使っていいんです。
HTML文書としての構造を<article>や<section>といったセクション要素で表現するってことです。

<article>要素は「入れ子」にしてもOK

ちなみに、ブログの場合のHTMLソースの例を書いときますね。
下記のように<article>を入れ子にできるそうです。
(ブログシステムを構築するなんて事は私には無いと思うんですが、<article>の構造上の知識として書き留めておきます。)

<article>
  <header><h1>ブログ記事のタイトル</h1><p><time pubdate datetime="○"></time></p></header>
  <p>ブログ記事の本文</p>
  <section>
   <h1>コメント</h1>
    <article>
    <footer><p>名前</p><p><time pubdate datetime="○"></time></p></footer>
    <p>コメントの本文</p>
    </article>
    <article>
    <footer><p>名前</p><p><time pubdate datetime="○"></time></p></footer>
    <p>コメントの本文</p>
    </article>
  </section>
</article>

<aside>要素は、メインコンテンツでないセクションに

次は<aside>要素。
サンプルでは、左のようにサイドバーの部分に<aside>を使っています。

<aside>要素は、メインコンテンツでないセクションに使います。
このサンプルのように、サイドバー、広告などに。

今回のサンプルの<aside>部分のHTMLは下記のとおりです。
<aside>の中に、2種類のサブメニューがあるので<section>で分けてます。

<aside>
  <section>
<h1>カテゴリー</h1>
   <ul>
    <li><a href="#">カテゴリー1</a></li>
    <li><a href="#">カテゴリー2</a></li>
    <li><a href="#">カテゴリー3</a></li>
    <li><a href="#">カテゴリー4</a></li>
    <li><a href="#">カテゴリー5</a></li>
   </ul>
  </section>
  <section>
   <h1>アーカイブ</h1>
   <ul>
    <li><a href="#">アーカイブ1</a></li>
    <li><a href="#">アーカイブ2</a></li>
    <li><a href="#">アーカイブ3</a></li>
    <li><a href="#">アーカイブ4</a></li>
    <li><a href="#">アーカイブ5</a></li>
   </ul>
  </section>
</aside>

<section>要素は、セクションを分割(またはグループ化)

<section>要素は、見出し要素(h1〜h6)を含みます。
h1〜h6の大小によって「章・節・項」などのレベル(階層)の大小を表現します。これ重要。詳細は次回説明します。

サンプルでは、左のように<article>の中の内容を<section>を使ってグループ化しています。
また<aside>の中も同じように内容に合わせて<section>で分けています。

<nav>要素は、グローバルナビゲーションに

最後は<nav>要素。これはリスト要素でナビを作るときに触れましたね。
サンプルでは、左のように<header>の下に<nav>を入れて。グローバルナビゲーションを作っています。

<nav>要素は、ナビならなんでも入れて良いわけじゃなく、主要なナビゲーションだけに使います。
サブメニュー等は、<nav>を使わないってことです。
ちょっとしたリンクだったら、ヘッダやフッタに入れておくだけでOK(<nav>でマークアップしない)。

今回のサンプルの<nav>部分のHTMLは下記のとおりです。

<nav>
 <h1>グローバルナビゲーション</h1>
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">MENU1</a></li>
    <li><a href="#">MENU2</a></li>
    <li><a href="#">MENU3</a></li>
    <li><a href="#">SITE MAP</a></li>
    <li><a href="#">ABOUT</a></li>
   </ul>
</nav>

新要素には「display:block」を!

HTML5の新要素 <article> <aside> <section> <nav> は、未対応のブラウザではインライン要素として扱われてしまいますので、
CSSで下記のように「display:block」を指定して、ブロック要素にしておく必要があります。

header, nav, article, aside, section, footer {
	display:block;
}

次回予告

次回は「セクション要素と見出し」のルールについてまとめてみます。
これ、HTML5で書くにあたって、まずは知っとかなきゃなルールで、けっこう重要かと。

HTML4、XHTML1まででは、章・節・項などのレベル(階層)は、見出し要素(h1〜h6)の数字の大きさ によって、推測していました。
HTML5では、セクション要素が新しくできたので、それとh1〜h6と組み合わせる事によって、
より明示的にセクション(章・節・項などのレベル(階層))を示す事ができるようになりました。
新しいルールを、ぜひ覚えておきましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

No title

いやーほんとうにわかりやすいです。

Re: No title

ありがとうございます!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.