HTML5:hgroup要素とaside要素

HTML

【HTML5課題20】

  • 見出しをまとめて表示させなさい。
<body> 
<header> 
<hgroup> 
<h1>七夕</h1> 
<h2>日本五節句の一つ</h2> 
</hgroup> 
</header> 
<section> 
<h3>七夕の語源</h3> 
<p>「古事記」または、日本書紀に登場する。</p> 
</section> 
</body>

hgroup要素

  • フロー・コンテンツ、ヘディング・コンテンツ
  • 見出しをグループ化する

【HTML5課題21】

  • 補足情報も含めて表示させなさい。
<body> 
<header> 
<h1>カフェランチブログ</h1> 
</header> 
<article> 
<h2>7月1週目ランチ</h2> 
<p>ランチ特製ロコモコ丼が人気です。ボリューム満点のハンバーグに特製ソースで味付け！ぜひ食べに来てくださいね。</p> 
<p><img src="images/moco.jpg" width="450" height="338" alt="ハンバーグ、目玉焼き、トマト、サニーレタスがのったロコモコ丼。"></p>
<aside>
<h3>ロコモコ丼の豆知識</h3> 
<p>ハワイ島で学生向けのファーストフードとしてはじまったと言われています。</p>
</aside>
</article>
</body>

aside要素

  • フロー・コンテンツ、セクショニング・コンテンツ
  • メインコンテンツに関係しないコンテンツ（広告など）
  • 関係するが削除しても、メインコンテンツの意味が変わらないコンテンツ（イメージ写真、補足記事など）