39

Chapter1 HTM

L5の

基礎

知識

Chapter2 テキ

スト

のマ

ーク

アッ

プChapter3 H

TML

５コ

ーデ

ィン

グChapter4 テ

ーブ

ルと

フォ

ーム

修了

課題

/ 模範

解答

集Chapter5 HTM

L5のコ

ンテ

ンツ

モデ

ル

HTML5 コーディング 39HTML5 コーディング

Lesson3 > HTML5 から新たに追加されたセクション関連のタグ

HTML5 では、文書構造を表す新しい要素が加わったことで、ブラウザや検索エンジンに対してより明確に文書構造を伝えられるようになりました。

「セクション」とは、セクショニングコンテンツといわれる「section

article nav aside 」タグを利用して文書構造が構成された単位です。

【HTML（従来）】 　　【HTML5】

<div id=”content”>

<div id=”header”>

<div class=”entry”>

<div class=”entry”>

<div class=”entry”>

<div id=”menu”>

<div id=”footer”>

<section>

<header>

<article>

<article>

<article>

<nav>

<footer>

■■ <section>タグHTML5 では Web ページ内で同じ意味や機能を持つ固まりの部分をマー

クアップします。

これを文書構造を意味的にマークアップするといい、マークアップの際

にもっとも一般的に利用するのが <section> タグです。

<section> タグでマークアップされた要素は、章や節の意味を持つよう

になります。これを「アウトライン」といいます。

各章には見出しがあることが一般的ですので、この要素の中には必ず

<hn> 要素を入れます。

■■ <article>タグページ内で独立したコンテンツとして見なす部分に使います。

article 要素はブログやニュースの記事のように、時間とともに内容が更

新されたり、時系列で情報を整理するものに使います。静的で変化のな

いコンテンツでは section 要素を使います。

<article> を入れ子にして使用する場合、内側の <article> の内容は、原

則として外側の <article> の内容に関連していることになります。

例 え ば、<article> タ グ で く く ら れ た ブ ロ グ の エ ン ト リ の 内 側 に、

<article> タグでくくられたユーザーコメントを入れ子に配置すること

で、そのコメントがそのブログエントリに対して投稿されたものである

ことを示します。

memo

memo

Chap

ter2

テキ

スト

のマ

ーク

アッ

プ修

了課

題 /

模範

解答

集Ch

apter

5 H

TML5

のコ

ンテ

ンツ

モデ

ル

40 HTML5 コーディング

Chap

ter4

テー

ブル

とフ

ォー

ム

40 HTML5 コーディング

Chap

ter3

HTM

L5コ

ーデ

ィン

グCh

apte

r1 H

TML5

の基

礎知

識

40 HTML5 コーディング

䀜䀜 課䀜 䀜

新規ファイルを作成して、下記のように表示されるブログに入れ子のarticle 属

性を設定します。䀜 䀜 䀜 　　　（ファイル名：article.html）

<h1> fairyの家づくりブログ </h1>

<article>

<h2><a href= "#">住宅メーカー選び </a></h2>

<p>今日は住宅メーカーを選びに展示場へ。…</p>

<article>

<h2>コメント </h2>

<p>いいですね…</p>

</article>

</article>

<article>

<h2><a href= "#">キッチン </a></h2>

<p>アイランドキッチンにしたい…</p>

<article>

<h2>コメント </h2>

<p>はじめまして fairyさん。私もキッチンに…</p>

</article>

</article>

■■ <nav>タグサイトやグローバルナビゲーションなど、ページの主要なナビゲーショ

ンに使用します。主要でないナビゲーションにはこの要素は使いません。

memo

memo