HTML5：section要素とarticle要素

【HTML5課題18】

文章を内容でわけて表示させなさい。

<header> 
<h1>クリスマスオーナメント</h1> 
<p>クリスマスツリーに飾られるオーナメントをご紹介します。</p> 
</header> 
<section> 
<h2>ツリートップ</h2> 
<p>クリスマスツリーの先端に飾られるオーナメントで、星型をしていることが多い。地域によっては天使が使用されることもある。</p> 
</section> 
<section> 
<h2>クリスマスボール</h2> 
<p>光沢のあるボール型のオーナメントで、カラーが豊富。好みにあわせて選ぶことができる。</p>
</section>

header要素
フロー・コンテンツ
セクションのヘッダーを表す
h1~h6の見出し要素や概要を入れて使うことが多い
section要素
セクショニング・コンテンツ
章や節のかたまりを表す
h1~h6の見出し要素を、必ず1つ以上使う必要がある

【HTML5課題19】

ブログのエントリー記事を表示させなさい。

<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチで人気の特製ロコモコ丼です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="images/moco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p> 		
</article> 
</body>

div要素
アウトラインには影響を与えない範囲
視覚的な意味を作るときに指定する