VIDEO LESSON

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

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

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

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

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

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

この動画で学べること

h5タグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。h4 の下の節を表します。深くなりすぎたら文書の分割も検討します。

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