Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

HTML5新要素 hgroupタグ

概要

hgroupタグについて説明します。

内容

hgroupは見出し(h1〜h6)をグループかします。
これにより、1つのページに複数の見出し階層を設定できます。

サンプル

各言語の特徴をまとめた記事を想定します。
JavaRubyの特徴を列挙します。
(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>

完成画面のキャプチャ

青枠がhgroup、緑枠がarticle、赤枠がsectionです。
Rubyの特徴・Javaの特徴は別々のhgroupに属するh1。
Rubyの特徴1〜4・Javaの特徴1〜4は別々のhgroupに属するh2。