概要
hgroupタグについて説明します。
内容
hgroupは見出し(h1〜h6)をグループかします。
これにより、1つのページに複数の見出し階層を設定できます。
サンプル
各言語の特徴をまとめた記事を想定します。
JavaとRubyの特徴を列挙します。
(asideで利用したサンプルをそのまま使用)
<html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>Ruby,Javaの特徴</title> <style type="text/css"> h1,h2 { border-style:solid; border-width:1px; background-color:yellow; } h1 { font-size:16px; } h2 { font-size:14px; margin-left:20px; } p { font-size:12px; border-style:solid; border-width:1px; background-color:gray; margin-left:30px; } article { border-style:solid; border-width:1px; border-color:green; padding:5px; } section { border-style:solid; border-width:1px; border-color:red; padding:5px; } hgroup { border-style:solid; border-width:1px; border-color:blue; padding:5px; margin:5px; } </style> </head> <body> <article> <h1>Ruby,Javaの特徴</h2> <p><time datetime="2012/03/12">2012/03/12</time></p> <section id="ruby"> <hgroup> <h1>Rubyの特徴</h1> <h2>Rubyの特徴1</h2> <p>特徴1の説明</p> <h2>Rubyの特徴2</h2> <p>特徴2の説明</p> <h2>Rubyの特徴3</h2> <p>特徴3の説明</p> <h2>Rubyの特徴4</h2> <p>特徴4の説明</p> </hgroup> </section> <aside id="ruby_hgroup">Rubyの作者は日本人のまつもとゆきひろさんです</hgroup> <hr /> <section id="java"> <hgroup> <h1>Javaの特徴</h1> <h2>Javaの特徴1</h2> <p>特徴1の説明</p> <h2>Javaの特徴2</h2> <p>特徴2の説明</p> <h2>Javaの特徴3</h2> <p>特徴3の説明</p> <h2>Javaの特徴4</h2> <p>特徴4の説明</p> </hgroup> </section> </article> </body> </html>