1.

h1～h6要素

▶
編集

h1～h6要素の記事です。HTML文書の見出しを表す要素で、ページの構造を読み手・検索エンジン・スクリーンリーダー全てに伝える最重要要素のひとつです。

h1〜h6要素の基本

要素意味典型用途
<h1>最上位の見出しページタイトル（記事タイトル）
<h2>大見出し章・主要セクションのタイトル
<h3>中見出し章内の節
<h4>小見出し項目内の小分け
<h5>さらに小さい見出しあまり使わない
<h6>最も小さい見出しほぼ使わない

使用例

<h1>HTML入門</h1>
  <h2>見出しとは</h2>
    <h3>h1〜h6の使い分け</h3>
    <h3>よくある失敗</h3>
  <h2>練習問題</h2>

正しい使い方のルール

  • 順序を飛ばさない: h1 → h2 → h3...と段階的に。h1からいきなりh4はNG
  • 装飾目的で使わない: 大きく見せたいだけなら CSS で font-size を使う
  • 1ページに h1 は1つが原則（HTML5では複数でも仕様上は可だが、SEO観点では1つが推奨）
  • 意味のある見出しテキストを入れる（「ページタイトル」だけでなく具体的なテーマを記載）
  • セクション内の見出しは <section> や <article> 内で再スタート可

SEO・アクセシビリティでの重要性

  • 検索エンジンは h1〜h6 でページの主題と構造を理解する
  • スクリーンリーダーは見出し単位でジャンプできる（H/Shift+Hキー等）
  • 抜粋・概要を生成する際にも見出し階層が活用される
  • 目次の自動生成: 多くのCMSが見出しから目次を作る

既定のスタイル（ブラウザ既定）

各見出しはブラウザのデフォルトCSSで大きさ・上下マージンが決まっています。例（標準的なブラウザ）:

要素既定font-size
h12em（32px相当）
h21.5em（24px相当）
h31.17em
h41em
h50.83em
h60.67em

サイト全体で統一感を出すなら、CSS reset 後に自前で見出しスタイルを定義します。

よくある失敗

  • 装飾だけのためにh1 — "太く大きく見せたい"だけなら <p class="big"> 等
  • 同一ページにh1が複数 — SEO評価が分散する場合あり
  • 飛ばし（h1 → h3） — アクセシビリティが落ちる
  • 空の見出し — <h2></h2> はバリデーション警告

関連

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. h1～h6要素
  2. p要素
  3. blockquote要素
  4. q要素
  5. cite要素
  6. ins要素
  7. del要素
  8. em要素
  9. br要素
  10. abbr要素
  11. dfn要素
  12. pre要素
  13. code要素
  14. samp要素
  15. kbd要素
  16. var要素
  17. bdo要素
  18. sup要素
  19. sub要素
  20. mark要素
  21. data要素
  22. time要素
  23. wbr要素
  24. bdi要素
2026-05-13 07:27:41 atom 254

人気ページ

最近更新/作成されたページ