目次に戻る

hgroup要素:HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
属性
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのroleが指定可能。
視覚系ブラウザデフォルトとして期待されるCSS

  hgroup {
    display: block;
    unicode-bidi: isolate;
  }

  :is(section,article,aside,nav) hgroup > h1 ~ h2 {
    margin-block-start: 1.00em;
    margin-block-end: 1.00em;
    font-size: 1.17em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h2 {
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    font-size: 1.00em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h2 {
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    font-size: 0.83em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h2 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }

  :is(section,article,aside,nav) hgroup > h1 ~ h3 {
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    font-size: 1.00em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h3 {
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    font-size: 0.83em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h3 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }

  :is(section,article,aside,nav) hgroup > h1 ~ h4 {
    margin-block-start: 1.67em;
    margin-block-end: 1.67em;
    font-size: 0.83em;
  }

  :is(section,article,aside,nav) :is(section,article,aside,nav) hgroup > h1 ~ h4 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }

  :is(section,article,aside,nav) hgroup > h1 ~ h5 {
    margin-block-start: 2.33em;
    margin-block-end: 2.33em;
    font-size: 0.67em;
  }
  
意味・用法

複数のh1-h6要素をグループ化して、一つの見出しとする。

これらのh1-h6要素の中には、副題、代替タイトル又はキャッチコピーといったものが含まれる。

W3C : HTML5.3hgroup要素は、存在してなかった。

私見・補足

主題と副題をまとめて、一つの見出しとするための要素

hgroup要素の用例

    <hgroup>
      <h1>新時代におけるウェブサイト作成方法</h1>
      <h2>誰でも利用できるウェブサイトを作ろう</h2>
    </hgroup>
    

個人的には、複数のh1-h6要素が一つの見出しを構成するというのは気味が悪いので、あまり使いたくはない。

また、この要素に対応してない旧式のユーザーエージェントは、この要素があるとアウトラインを間違ってとらえてしまう可能性も高い。

そこで、hgroup要素を使用しない(つまり、副題にh1-h6要素を使用しない)マークアップ方法として、下記の方法が考えられる。