<h1>~<h6>見出しを付ける

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>タグでは、セクションの見出しを付ける事ができます。 各hタグの「h」に続く数字は、見出しのレベル(階層)を示しており、<h1>がもっとも上位の見出し(大見出し)で<h6>がもっとも下位の見出し(小見出し)となります。

<h1>~<h6>の「h」はheadingの略で、ヘディングコンテンツとも呼ばれます。
また各hタグにはグローバル属性を指定する事もでき、一般的なブラウザではレベルの高い見出しほど大きなサイズで表示され、見出しのレベルが下がるほど文字サイズも小さくなります。

ですが大きさ調整などのスタイリング目的のために<h1>~<h6>タグを使い分けないようにして下さい。 これらはあくまでも便宜上の表示サイズとなっています。(見出しのサイズを変更したい場合はCSSで行います)

また<h1>~<h6>タグを使用すると、暗黙的なセクションを開始した事と見なされます。 例えば<h1>~<h6>のいずれかの後に、同じレベル、または高いレベルの見出し要素が続く場合は、新しい暗黙的なセクションが開始されます。 逆に低いレベルの見出しが続く場合は、暗黙的にその1つ前のセクションの一部をなすサブセクションが開始されます。

例えばbody要素内にh1要素、続けてh2要素がある場合なら、h2要素から下は暗黙的なサブセクションという事になります。

また従来のseo対策では、一つのHTML文書内にh1要素を1つのみ配置します。 そしてそれに続くh要素も<h2>、<h3>と見出しレベルが下がるように配置し、さらに見出しレベルの順番を守り配置する事が推奨されています。

HTML5での変更点

以前は「一つのHTML文書内にh1要素は一つしか入れてはならない」というように言われていましたが、HTML5ではarticle要素section要素が追加された事で、各セクションごとにh1要素を利用できます。

ですがHTML5の仕様には「セクションには任意のレベルの見出し要素を入れられるが、h1要素だけを使用するか、またはセクションの入れ子のレベルに応じた適切なレベルの見出しを使用する事が強く推奨される」という記述があります。

ですのでHTML5とはいえ特別な理由がない限りは従来通りに「h1要素」を最初に配置し、その後h2、h3と順番通りに見出し要素を配置した方がいいでしょう。 これは見出し要素によって暗黙的なセクションが開始されるため、そのバランスが崩れたページはSEO上不利になるからです。

なおHTML4.01で存在していたalign属性は、HTML5では廃止されています。 見出しの位置揃えを行いたい場合はCSSを利用しましょう。

書式

  • <h1 属性="値">~</h1> ……… 見出しを付ける

※上記はh1タグの場合です。数字部分は見出しレベルによって変えます。

使用した時の例

<h1>車について</h1>
<p>車についての説明です</p>
  <section>
  <h2>メーカー</h2>
  <p>日本には日産などがあります</p>
      <section>
      <h3>車種</h3>
      <p>GT-Rやエルグランドが有名です</p>
      </section>
  </section>
<h1>車について</h1>
<p>車についての説明です</p>
  <section>
  <h1>メーカー</h1>
  <p>日本には日産などがあります</p>
      <section>
      <h1>車種</h1>
      <p>GT-Rやエルグランドが有名です</p>
      </section>
  </section>
<h1>h1要素の見出し(サイズ 200%)</h1>
<h2>h2要素の見出し(サイズ 150%)</h2>
<h3>h3要素の見出し(サイズ 120%)</h3>
<h4>h4要素の見出し(サイズ 100%)</h4>
<h5>h5要素の見出し(サイズ 80%)</h5>
<h6>h6要素の見出し(サイズ 70%)</h6>

ブラウザ上の表示例

※上記の1つ目の表示例は、1つ目のサンプルの表示例となります

対応ブラウザなどのデータ

形式 <h1>~</h1> カテゴリ フローコンテンツ, ヘッディングコンテンツ
親要素 hgroupの子要素としてフローコンテンツが期待される場所 子要素 フレージングコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox7~ , Opera11.5~ , Safari5.1~