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

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

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

lt;section>
<h1>１　h1見出し</h1>
<h2 id="chapter-2">１．１　h2見出し</h2>
<h3>１．１．１　h3見出し</h3>
<h4>１．１．１．１　h4見出し</h4>
<h5>１．１．１．１．１　h5見出し</h5>
<h6>１．１．１．１．１．１　h6見出し</h6>
</section>

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

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

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

lt;h1>１　h1見出し</h1>
<h3>１．１．１　h3見出し</h3>

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

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

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

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

lt;article class="post1">
  <h1>○○の３つの方法</h1>
  ～
  <h2 id="chapter-7">１．○○する</h2>
  ～
  <h2 id="chapter-8">２．××する</h2>
  ～
  <h2 id="chapter-9">３．△△する</h2>
  ～
</article>

<article class="post2">
  <h1>○○の２つの方法</h1>
  ～
  <h2 id="chapter-7">１．○○する</h2>
  ～
  <h2 id="chapter-8">２．××する</h2>
  ～
</article>


  <h1>新着記事</h1>
  ～
  <h2 id="chapter-12">○○の３つの方法</h2>
  ～
  <h2 id="chapter-13">○○の２つの方法</h2>
  ～

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

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