見出し要素(h1~h6)の使い方

HTML

見出し要素はh1要素から順番に振る

見出し要素は<hx>~</hx>タグで囲います。
大見出しには<h1>、以下小見出しになるごとに<h2>、<h3>と順番に使い、同レベルの見出しは同じ見出しを使います。 大抵は<h3>要素ぐらいまでで事足りると思いますが、h1~h6の6レベル設定することができます。

lt;section>
<h1>1 h1見出し</h1>
<h2 id="chapter-2">1.1 h2見出し</h2>
<h3>1.1.1 h3見出し</h3>
<h4>1.1.1.1 h4見出し</h4>
<h5>1.1.1.1.1 h5見出し</h5>
<h6>1.1.1.1.1.1 h6見出し</h6>
</section>

実際の記事であれば見出しの振り方はこんな感じでしょうか。

lt;article>
<h1>いますぐ痩せるの3つの方法</h1>
  <h2 id="chapter-3">1.食べ過ぎない</h2>
    <h3>適正なカロリーの摂取を心がけよう</h3>
    <h3>過度の減食はむしろ太りやすい体質を作ります</h3>
  <h2 id="chapter-4">2.運動する</h2>
    <h3>通勤通学には意識的に徒歩を取り入れよう</h3>
    <h3>週に2、3度のジョギングを心がけよう</h3>
  <h2 id="chapter-5">3.筋肉を付ける</h2>
    <h3>テレビを見ながら筋トレしよう</h3>
</article>

なお、h1要素の次にh3要素を使うなど、見出しレベルを飛ばして使うのは好ましくありません。 これはHTMLが文書構造を記述する言語だという事を考えれば分かると思います。

lt;h1>1 h1見出し</h1>
<h3>1.1.1 h3見出し</h3>

見出しがこんな並び方をしていたら、「1.1.1はあるのに1.1はないのか?」となりますよね。 見出しレベルは順番に振りましょう。

セクションごとに見出しレベルを振る

見出しレベルはセクション要素ごとに独立し、別セクションとなった場合はレベルを1から振りなおします。 例えば下のソースのarticleとsidebarの3つのセクションは、他のセクションの見出しレベルが何であっても自セクション内の見出しレベルに影響しません。

大見出しのh1要素は各セクションに1つとルール付けされているので、同じセクション内に複数のh1要素を書かないよう気を付けましょう。h2以降の見出しは何個使っても問題ありません。

lt;article class="post1">
  <h1>○○の3つの方法</h1>
  ~
  <h2 id="chapter-7">1.○○する</h2>
  ~
  <h2 id="chapter-8">2.××する</h2>
  ~
  <h2 id="chapter-9">3.△△する</h2>
  ~
</article>

<article class="post2">
  <h1>○○の2つの方法</h1>
  ~
  <h2 id="chapter-7">1.○○する</h2>
  ~
  <h2 id="chapter-8">2.××する</h2>
  ~
</article>


  <h1>新着記事</h1>
  ~
  <h2 id="chapter-12">○○の3つの方法</h2>
  ~
  <h2 id="chapter-13">○○の2つの方法</h2>
  ~

こんな感じでセクションが変わると再びh1要素から開始します。

ちなみにHTML4やXHTMLにおいては「見出しレベルはページごとに管理しh1要素はページに一つ」がルールでした。 HTML5で変わったので気をつけましょう。

eyecatch

属性セレクタで条件下の属性のスタイルを変える

eyecatch

テーブル要素のマークアップ

HTMLの記事

eyecatch

HTML文書の基本構成

eyecatch

セクションとアウトライン

eyecatch

テーブル要素のマークアップ

eyecatch

要素と属性

eyecatch

要素の階層構造

eyecatch

HTMLの歴史

HTMLの記事一覧HOME