＜hgroup要素＞ - 見出しのグループ化

公開日: 2017/02/09

hgroup要素は複数のh1〜h6要素をグループ化するための要素です。hgroup要素は子要素にある最も高いランクの見出しと同じ扱いとなります。例えば、h1に主題、h2に副題、それにコンテンツを続ける場合、hgroup要素を使えばコンテンツをh2ではなくh1に紐付けることができます。

概要

名前

hgroup

カテゴリー

Flow content

Heading content

Palpable content

配置できる場所

Flow contentが期待される場所。

コンテンツモデル

1つ以上のh1〜h6要素、または、template要素。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

hgroup {
	display: block;
}

仕様書

https://html.spec.whatwg.org/multipage/semantics.html#the-hgroup-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

hgroup要素は、複数のh1〜h6要素を子要素に持てます。そして、hgroup要素自身は、子要素にある最も高いランクの見出しと同じ扱いになります。下記の例では、hgroup要素はh1要素だとユーザーエージェントに認識されるということです。

HTML

<!-- hgroup要素=h1要素という扱いになる -->
<hgroup>
	<h1>SYNCER</h1>
	<h2>知識と感動を同期するブログ</h2>
</hgroup>

例えば、hgroup要素でマークアップしなかった場合、h2要素に続くコンテンツは当然、h2要素に紐づくものだと解釈されます。

HTML

<h1>SYNCER</h1>
	<h2>知識と感動を同期するブログ</h2>

<!-- h2要素の後なのでh2要素のコンテンツと解釈される -->
<p>SYNCERは個人が運用するブログです。主にウェブとラーメンの話題を取り扱います。</p>

一方、hgroup要素でマークアップした場合、コンテンツはh1要素(hgroup要素)に紐づくものだと解釈されます。あるコンテンツの見出しを主題、副題というように複数のh1〜h6要素でマークアップしたい場合に発生する構造上の問題を、hgroup要素は解決してくれるというわけです。

HTML

<!-- hgroup要素=h1要素という扱いになる -->
<hgroup>
	<h1>SYNCER</h1>
	<h2>知識と感動を同期するブログ</h2>
</hgroup>

<!-- hgroup要素の後なのでhgroup要素=h1要素のコンテンツとなる -->
<p>SYNCERは個人が運用するブログです。主にウェブとラーメンの話題を取り扱います。</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜hgroup要素＞ - 見出しのグループ化</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/hgroup/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>hgroup要素でh1要素とh2要素をグループ化したため、hgroup要素はh1要素と同じ扱いになりました。だから、文章はh2要素ではなくh1要素に紐づいたものだとユーザーエージェントは判断します。</p>

<hgroup>
	<h1>h1: SYNCER</h1>
	<h2>h2: 知識と感動を同期するブログ</h2>
</hgroup>
<p>SYNCERは個人が運用するブログです。主にウェブとラーメンの話題を取り扱っています。ぜひ、明日もアクセスして下さい。</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/581/"> <meta charset="utf-8"> <title>【デモ】＜hgroup要素＞ - 見出しのグループ化</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/hgroup/"> </head> <body>

<p>hgroup要素でh1要素とh2要素をグループ化したため、hgroup要素はh1要素と同じ扱いになりました。だから、文章はh2要素ではなくh1要素に紐づいたものだとユーザーエージェントは判断します。</p> <hgroup> <h1>h1: SYNCER</h1> <h2>h2: 知識と感動を同期するブログ</h2> </hgroup> <p>SYNCERは個人が運用するブログです。主にウェブとラーメンの話題を取り扱っています。ぜひ、明日もアクセスして下さい。</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>