VIDEO LESSON

HTMLのhgroupタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:03エイチティーエムエルタグ編の六十七本目は、エイチグループ、タグです。
0:07このタグは、大きな見出しと、それを補う短い副題を、ひとつのまとまりとして示すための要素です。
0:13たとえば、ページのタイトルがあって、そのすぐ下にキャッチコピーが添えられている場面を思い浮かべてください。
0:19見た目が近いだけではなく、この二つはセットですよ、とプログラムにも伝えられるのがポイントです。
0:25複数の章の見出しを束ねる道具ではない、という点も最初に押さえておきましょう。
0:30タイトルの周りは、読み手が最初に目にする場所です。
0:33だからこそ、意味のまとまりをはっきりさせる価値が大きいのです。
0:36基本の書き方を確認します。
0:39エイチグループは、開始タグと終了タグを両方書く、普通の入れ物型の要素です。
0:44その中には、見出しをひとつだけ入れます。
0:48例ではエイチワンです。
0:49そして見出しに寄り添う副題やキャッチコピーは、段落を表すピーで書きます。
0:55ここが一番大切な決まりです。
0:57副題だからといって、エイチツーのような次のレベルの見出しにはしません。
1:03見出しはひとつ、補足はピー、この組み合わせをまず体で覚えましょう。
1:08書き終えたら、入れ物の開始と終了がそろっているかも確認してください。
1:13この形は、記事のタイトルでも、ページの先頭でも、まったく同じように使えます。
1:19まずは型として覚えてしまいましょう。
1:22中に入れられるものを、もう少し詳しく整理します。
1:26見出しは、エイチワンからエイチシックスの中から、どれかひとつだけです。
1:31章の見出しならエイチツー、というように、文書全体の階層に合ったレベルを選んでください。
1:38副題のピーは、ひとつでも複数でも構いません。
1:41日付や対象者など、短い補足を並べることもできます。
1:45反対に、画像やリスト、ディブのような別の要素は中に入れません。
1:49エイチグループは見出し周り専用の小さな入れ物だと考えると、迷わずに書けるようになります。
1:56迷ったときは、中身が短い補足かどうかを声に出して読んでみると、判断しやすくなります。
2:02長い文章なら本文として外に出しましょう。
2:05インターネットで調べると、昔の書き方に出会うことがあります。
2:10かつては、エイチワンとエイチツーをエイチグループで束ねて、一組の見出しとして扱う考え方が紹介されていました。
2:18しかし現在の仕様では、その理解は改められています。
2:22副題をエイチツーにしてしまうと、文書の目次構造の中で本物の章見出しと混ざってしまい、
2:27読み上げでたどる利用者が混乱します。
2:32副題をピーにしておけば、見出しの階層はすっきり保たれます。
2:37古い記事の例を見かけたら、今のルールに置き換えて読むようにしてください。
2:43見出しの階層が正しく保たれると、検索や目次生成のときにも、文書の構造がそのまま正しく伝わるようになります。
2:51属性について確認します。
2:53エイチグループには、この要素だけの専用の属性はありません。
2:57覚えるべき必須の属性もないので、初心者にとっては気楽なタグです。
3:02必要に応じて、どの要素にも使える共通の属性を使います。
3:06たとえばクラスは、シーエスエスで見出し周りをまとめて整えるときの目印になります。
3:12アイディーはページ内リンクの飛び先に、ラングは言語の指定に使えます。
3:18ただし属性を付けても要素の意味自体は変わりません。
3:22副題らしく小さく見せたい、余白を広げたい、といった見た目の調整は、属性ではなくシーエスエスで指定しましょう。
3:30データ属性については、秘密情報を置く場所ではない点も、あわせて覚えておいてください。
3:36公開される前提で使う属性です。
3:38記事の活用事例を読み解きます。
3:41例では、エイチワンに学習会の名前である、まなびのアトリエ、と書き、その下のピーに、
3:47自分の手でウェブサイトを作る学習会、という説明を添えています。
3:52もしこの二行がバラバラに置かれていると、下の文が本文の最初の段落なのか、
3:57タイトルの補足なのかが曖昧になります。
4:01エイチグループで囲むことで、これはタイトルとその副題の一組だと、はっきり示せるのです。
4:08試すときは練習用ファイルのボディに貼り付け、保存して再読み込みし、開発者ツールのエレメンツで入れ子が正しいか確認してください。
4:18ブラウザーで見たときは、二行が近づいて一組らしく見えるか、本文との間隔も含めて眺めてみてください。
4:26使う場面を広げて考えてみましょう。
4:29代表例は、サイトのトップで大きなタイトルとキャッチコピーを組にする場面です。
4:35ほかにも、ブログ記事のタイトルに短い要約を添える場合や、イベントページで講座名と開催日の補足を組にする場合にも向いています。
4:46画面の例では、記事の中でエイチツーとピーを使っています。
4:51逆に、副題らしい補足が何もない見出しなら、エイチグループで囲む必要はありません。
4:58見出し単体のままで十分です。
5:01副題があるかどうかが、使うかどうかの判断基準になります。
5:06ヘッダーの中や、セクションの先頭など、見出しが置かれる場所なら、どこでも同じ考え方で使うことができます。
5:15見た目はシーエスエスで整えます。
5:17エイチグループにクラスを付けておくと、見出しと副題をまとめて指定できて便利です。
5:23画面の例では、全体を中央揃えにして上下に余白を取り、副題のピーは少し小さく、
5:27落ち着いたグレーにしています。
5:31こうした調整をエイチグループ単位で行えるのも、ひとかたまりとして囲んでおく実用的な利点です。
5:38ここでも役割分担は同じです。
5:40タイトルと副題の組であるという意味はエイチティーエムエルが持ち、色や大きさや配置はシーエスエスが持ちます。
5:48デザインを変えたくなっても、構造には手を入れずに済みます。
5:52色を変えるときも、副題だけを少し控えめにすると、主見出しとの主従関係が、
5:56目で見ても自然に伝わります。
6:00よくある間違いを三つ紹介します。
6:02一つ目は、エイチワンとエイチツーのように、見出しを複数入れてしまうことです。
6:08章の見出しはエイチグループの外に、独立して置いてください。
6:13二つ目は、副題だけでなく本文の段落まで一緒に囲ってしまうことです。
6:18中に入れるピーは、あくまで見出しへの短い補足だけに絞ります。
6:23三つ目は、見た目をそろえるためだけに何でも囲ってしまうことです。
6:28意味のない囲みは、かえって構造を分かりにくくします。
6:32公開前に、中身が見出しひとつと副題だけか、一度読み返す習慣を付けましょう。
6:38特に二つ目は起こりがちなので、囲む範囲を決めるときは、副題の行までで止めることを意識してください。
6:46ブラウザー互換性を確認します。
6:48記事が参照するエムディーエヌのデータでは、エイチグループ要素は、クロームが五以降、
6:55エッジが十二以降、ファイアフォックスが四以降、サファリが五以降と、主要ブラウザーで長く対応しています。
7:01そのため、表示できない環境を心配する必要はほとんどありません。
7:06仕上げのチェックもしておきましょう。
7:08目的が主見出しと副題をまとめることに合っているか、見出しがひとつだけか、
7:14三百二十ピクセル程度の狭い画面や文字拡大でも副題が欠けていないかを確認します。
7:19モバイルの実機でも一度見ておくと安心です。
7:22対応が広い分、このタグでは、使えるかどうかよりも、正しい意味で使えているかに集中できるのが利点です。
7:29最後にまとめです。
7:31エイチグループのポイントは三つでした。
7:34一つ目、エイチグループは一つの見出しと、その副題をひとかたまりとして示す要素であること。
7:40二つ目、中の見出しはひとつだけで、副題はエイチツーではなくピーで書き、昔の束ねる使い方とは違うこと。
7:48三つ目、専用の属性はなく、見た目の調整はクラスとシーエスエスで行うこと。
7:54練習として、自分のページでタイトルとキャッチコピーが並んでいる場所を探し、
7:58エイチグループで囲んでみてください。
8:02お疲れさまでした。
8:04その一組が正しく組めれば、このタグは卒業です。
8:07次に学ぶヘッダーなどの要素と組み合わせると、ページの先頭部分の構造が、さらに分かりやすく整っていきます。

この動画で学べること

hgroupタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。1つの見出しと、その副題などの p をまとめます。複数の章見出しを束ねるものではありません。

解説記事・サンプルコードを読む：HTMLのhgroupタグとは？属性・使い方・ブラウザー互換性と活用例 →