Home » ★HTML Living Standard リファレンス

★HTML Living Standard リファレンス

<hgroup> …… 見出しとその関連コンテンツを表す
Internet Explorer
Microsoft Edge
Google Chrome
Safari
Firefox
Opera
広告



<hgroup>タグは、見出しとその関連コンテンツを表す際に使用します。

hgroup要素は、見出し、代替タイトル、キャッチフレーズなどを、見出し関連コンテンツとしてまとめるために使用できます。

HTML標準の仕様書通りに記述するなら、
hgroup要素は、小見出し、代替タイトル、キャッチフレーズなどを内容とするp要素を1つ以上持つh1-h6要素をグループ化します。
ということになります。

■使用例

以下のサンプルでは、h2要素でキャッチフレーズをマークアップしています。
ただ、このキャッチフレーズは上のh1要素を修飾するためのリード文を意図しているため、
本来は見出しとしてマークアップするべきではありません。

HTMLソース(不適切な例)

<body>
 <h1>ACMEコーポレーション</h1>
 <h2>1920年創業、あらゆる高速配送のリーダーカンパニー</h2>
 ...

このような場合、以下のようにhgroup要素を使用することで適切なマークアップにできます。

HTMLソース(適切に訂正した例)

<body>
 <hgroup>
  <h1>ACMEコーポレーション</h1>
  <p>1920年創業、あらゆる高速配送のリーダーカンパニー</p>
 </hgroup>
 ...

■使用例

以下のサンプルでは、header要素の一部としてhgroup要素が配置されています。
文書のヘッダーの一部に見出しコンテンツが含まれていることを表しています。

HTMLソース

<header>
 <hgroup>
  <h1>フルスクリーン API</h1>
  <p>Living Standard — 最終更新日:2015 年 10 月 19 日</p>
 </hgroup>
 <dl>
  <dt>参加:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen">GitHub whatwg/fullscreen</a></dd>
  <dt>コミット:</dt>
  <dd><a href="https://github.com/whatwg/fullscreen/commits">GitHub whatwg/fullscreen/commits</a></dd>
 </dl>
</header>

↓↓↓

ブラウザ上の表示

フルスクリーン API

Living Standard — 最終更新日:2015 年 10 月 19 日

参加:
GitHub whatwg/fullscreen
コミット:
GitHub whatwg/fullscreen/commits

■使用例

以下のサンプルでは、body要素の直下にhgroup要素が配置されています。
<hgroup>~</hgroup>で囲まれた部分が、見出しコンテンツ部分であることを表しています。

HTMLソース

<body>
 <footer><a href="../">トップに戻る</a></footer>
 <hgroup>
  <h1>クジラとイルカの違い</h1>
  <p>クジラとイルカの違いを説明できますか?</p>
 </hgroup>
 <p>
 クジラとイルカは、同じ生き物です。
 どちらもクジラ目に属する哺乳類ですから全部クジラです。
 その中で「イルカ」というのは小さめのクジラの呼び名です。
 大きい小さいの境目にはっきりとした基準はなく、
 だいたい全長4~5mくらいを境に大きい種類はクジラ、
 小さい種類はイルカと呼ばれています。
 </p>
 <footer><a href="../">トップに戻る</a></footer>
</body>

↓↓↓

ブラウザ上の表示

クジラとイルカの違い

クジラとイルカの違いを説明できますか?

クジラとイルカは、同じ生き物です。
どちらもクジラ目に属する哺乳類ですから全部クジラです。
その中で「イルカ」というのは小さめのクジラの呼び名です。
大きい小さいの境目にはっきりとした基準はなく、
だいたい全長4~5mくらいを境に大きい種類はクジラ、
小さい種類はイルカと呼ばれています。

■使用例

以下のサンプルは、section要素のネストレベルごとに、
hgroup要素で見出し関連コンテンツのグループを定義しています。
1つの文書内に複数のh1要素を使用すると文書構造が把握しにくくなるかもしれませんが、HTMLの記述ルールとしては誤りではありません。

HTMLソース

<hgroup>
 <h1>夏フェスっす!</h1>
 <p>ニッポンの夏フェスガイド</p>
</hgroup>

<section>
 <hgroup>
  <h1>2023年の夏フェス</h1>
  <p>今年日本で開催される音楽イベント一覧</p>
 </hgroup>
 <p>今年の夏フェスや音楽イベントを一覧にまとめました。</p>
</section>

<section>
 <hgroup>
  <h1>おしえて夏フェス</h1>
  <p>音楽イベントに関するみんなの疑問・質問</p>
 </hgroup>
 <p>みんなの素朴な疑問・質問と回答を一覧にまとめました。</p>
</section>

↓↓↓

ブラウザ上の表示

夏フェスっす!

ニッポンの夏フェスガイド

2023年の夏フェス

今年日本で開催される音楽イベント一覧

今年の夏フェスや音楽イベントを一覧にまとめました。

おしえて夏フェス

音楽イベントに関するみんなの疑問・質問

みんなの素朴な疑問・質問と回答を一覧にまとめました。

■関連項目

  • <body> …… 文書の本体(コンテンツ)を表す
  • <article> …… 自己完結する内容であることを表す
  • <section> …… 一般的なセクションを表す
  • <nav> …… ナビゲーションリンクのセクションを表す
  • <aside> …… メインコンテンツとは別のコンテンツであることを表す
  • <h1>, <h2>, <h3>, <h4>, <h5>, <h6> …… セクションの見出しを表す
  • <hgroup> …… 見出しとその関連コンテンツを表す
  • <header> …… 導入部分やナビゲーション補助のグループを表す
  • <footer> …… フッターを表す
  • <address> …… 連絡先情報を表す
広告



Lorem Ipsum is simply dummy text

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.