VIDEO LESSON

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

再生時間 7:31動画を別のタブで開く ↗

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の七十本目は、エイチシックス、タグです。
0:08エイチシックスは、エイチワンからエイチシックスまで六段階ある見出しの中で、
0:12最も深い第六階層を担当します。
0:16大きな章の中の節、さらにその中の小さいまとまり、というように、文章を細かく整理するときの末端の見出しです。
0:23出番は多くありませんが、長い仕様書やマニュアルなど、階層の深い文書では欠かせません。
0:30今回は、その役割と正しい使い方を、順番に確認していきましょう。
0:34見出しの階層全体の中で、自分の位置を意識することが大切です。
0:38まず、見出し全体の階層を押さえます。
0:41エイチワンが文書全体を代表する最も大きな見出しで、エイチツー、エイチスリーと、
0:46数字が増えるほど下の階層になります。
0:51そしてエイチシックスが、その一番下に位置します。
0:55本でいえば、章、節、項をさらに細かく分けた小見出しにあたります。
1:00大切なのは、見出しだけを順番に拾って読んでも、文章全体の流れがつかめることです。
1:07そのため、題名は内容が具体的に伝わる言葉にし、階層を飛ばさず、上から順に深くしていくのが基本の考え方になります。
1:16この階層の考え方は、目次を作るときにもそのまま役立ちます。
1:21基本の書き方を確認します。
1:23エイチシックスは、開始タグと終了タグを両方書いて、その間に見出しの文章をはさみます。
1:29画面の例では、見出しの直後に段落を置いて、その節の説明を続けています。
1:34この教材では、開始タグと終了タグを省略せず、明示する書き方で統一します。
1:39置き場所はボディの中です。
1:41見出しの中には、基本的に短いテキストを入れ、長い文章や別の見出しを入れ子にしないようにします。
1:48まずはこの形を正確に書けることが、すべての土台になります。
1:52短い見出しほど、読み手に内容が素早く伝わる傾向があります。
1:56では、どんな場面で使うのでしょうか。
1:59代表的なのは、エイチファイブで作った節を、さらに二つ、三つに分けたいときです。
2:05たとえば持ち物という節の中で、筆記用具と教材をそれぞれ分けて説明する、といった使い方です。
2:12逆にいえば、エイチファイブ自体を使っていない文書で、いきなりエイチシックスだけが出てくる場面は、
2:17まずありません。
2:21階層がそこまで深くならない短いページでは、無理に作る必要はないタグです。
2:27文書の深さに合わせて、必要なときだけ使う、と覚えてください。
2:31実際に使うかどうかは、文書の長さと深さで判断してください。
2:36記事の活用事例を読み解きます。
2:38例の中心は、エイチシックスの見出しと、その説明を書いた段落の組み合わせです。
2:45ここではセクションの中で、エイチファイブの下にエイチシックスを置き、受付という細かい話題を切り分けています。
2:54試すときは、練習用のエイチティーエムエルファイルをコピーし、ボディの適切な位置にこの形を写して、
2:59保存後に再読み込みします。
3:04そして開発者ツールのエレメンツで、見出しと段落が意図した入れ子になっているかを確認してください。
3:11見た目ではなく、構造が目的に合っているかを見るのがポイントです。
3:17写して終わりにせず、自分の文章に置き換えて試すと理解が深まります。
3:22属性について確認します。
3:24エイチシックスには、この要素だけのための専用属性は、必須のものはありません。
3:29代わりに、どの要素にも使えるグローバル属性を必要に応じて使います。
3:34代表は三つです。
3:35文書の中で重ならない識別子のアイディー、シーエスエスやジャバスクリプトでまとめて選ぶためのクラス、
3:40そして内容の言語を示すラングです。
3:44画面のようにアイディーを付ければ、目次からその見出しへ直接リンクできます。
3:49注意として、独自データを入れるデータ属性には、秘密情報を置かないようにしてください。
3:55属性を付ける前に、その見出しへリンクや装飾が本当に必要かを考えましょう。
4:00見た目との関係を整理します。
4:02ブラウザーの初期設定では、エイチシックスはほかの見出しより小さく、本文とあまり変わらない大きさで表示されることが多いです。
4:10ここで大切なのは、文字を小さくしたいからエイチシックスを選ぶ、という発想にしないことです。
4:17見出しのレベルは文書の意味と階層で決め、文字の大きさや色、余白はシーエスエスで調整します。
4:23画面のように、エイチシックス専用のルールを書けば、階層を保ったまま読みやすい見た目に整えられます。
4:29意味と見た目を分けることが、長く使えるコードのコツです。
4:33色だけで階層を伝えるのではなく、余白や太さも組み合わせると読みやすくなります。
4:39次に、階層を飛ばさないコツです。
4:41よくある失敗は、エイチツーの直後にいきなりエイチシックスを置いてしまうことです。
4:46見た目が小さくて都合がよかったとしても、文書のアウトラインは途中で途切れ、
4:51読み手も検索エンジンも構造を追いにくくなります。
4:55音声読み上げなどの支援技術では、利用者が見出しを頼りにページ内を移動します。
5:00階層が正しければ、その移動もスムーズです。
5:03エイチワンは原則としてページの主題に使い、そこから順番に一段ずつ深くしていく。
5:08この順序を守るだけで、エイチシックスの意味も自然とはっきりします。
5:13迷ったときは、見出しだけを抜き出して一覧で眺めてみるのがおすすめです。
5:18ブラウザー互換性を確認します。
5:20記事が参照するエムディーエヌのデータでは、エイチシックス要素は、クロームが一以降、
5:27エッジが十二以降、ファイアフォックスが一以降、サファリが一以降と、主要ブラウザーで非常に古くから対応しています。
5:34そのため、エイチシックス自体が表示できない環境を心配する必要は、まずありません。
5:40ただし、これは要素本体の話です。
5:42新しい属性や機能を組み合わせる場合は、別途対応状況を確認してください。
5:47あわせて、アイオーエスやアンドロイドなど、利用対象の実機でも表示を試しておくと安心です。
5:54表示できることと、意図どおり読めることは別なので、本文の確認も欠かさないでください。
6:00よくある間違いを三つ紹介します。
6:03一つ目は、脚注や注意書きのような、見出しではない文章までエイチシックスで囲んでしまうことです。
6:12それは段落やスモールなど、内容に合った要素で書きましょう。
6:17二つ目は、見た目を小さくしたいだけの理由でレベルを選ぶことです。
6:23これは前のセクションで触れたとおり、シーエスエスの担当です。
6:29三つ目は、中身のない空の見出しを残してしまうことです。
6:34空の見出しはアウトラインを乱します。
6:38書く前に、その文章が本当に節の題名かどうかを、一度立ち止まって確認してください。
6:45間違いに気づいたら、タグを置き換えるだけでなく階層全体を見直しましょう。
6:52最後にまとめとチェックです。
6:54エイチシックスは、六段階の見出しで最も深いレベルで、エイチファイブの節をさらに分けるときに使う見出しです。
7:01専用の必須属性はなく、必要ならアイディーやクラスなどの共通属性を使います。
7:07公開前には、目的が第六階層を示すことに合っているか、階層を飛ばしていないか、
7:12三百二十ピクセル程度の狭い画面や文字拡大でも内容が欠けていないかを確認しましょう。
7:18自分の長い文書で、細かく分けたい節があれば、ぜひエイチシックスを正しく使ってみてください。
7:24お疲れさまでした。
7:25まずは手元のページの見出し一覧を書き出し、階層の飛びがないか点検してみてください。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

h6タグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。6段階の見出しで最も深いレベルです。

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