ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

【HTML】見出しタグの使い方(h1~h6) + HTML5 Outliner

【HTML】見出しタグの使い方(h1~h6) + HTML5 Outliner

「見出しタグの使い方がわからない」
「見出しタグの正しい使い方を知りたい」

悩み

こういった悩みにお答えします。

目次
  1. 見出しタグ とは
  2. 見出しタグの使い方
    1. h1からh6の順番を守る
    2. 階層構造にして使う
    3. 見出しタグは適切に使い分ける
      1. h1タグは1ページに1つ
      2. h2~h6タグは1ページに複数使える
    4. section(article)で囲む
  3. アウトライン確認ツール「HTML5 Outliner」
  4. まとめ

見出しタグ とは

見出しタグとは、見出しを記述するためのHTMLタグです。
見出しタグにはh1からh6までがあり、正しい順番、構造で使う必要があります。
Webページの内容、キーワードを適切に見出しに含めることで、SEO的にも、ユーザビリティ的にも良い効果が得られます。

見出しタグに魅力的な言葉を入れることで、読者に読んでもらえる文章にすることができます。

見出しタグの使い方

h1からh6の順番を守る

見出しタグはh1からh6の順番は必ず守るようにしてください。
順番というのは上から使う順版ではないので注意してください。

良い例
<h1>Webで使う技術</h1>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JavaScript</h2>
    <h3>jQuery</h3>
  <h2>PHP</h2>
悪い例
<h1>Webで使う技術</h1>
  <h2>HTML</h2>
  <h3>CSS</h3>
  <h4>JavaScript</h4>
  <h5>jQuery</h5>
  <h6>PHP</h6>

階層構造にして使う

見出しタグは階層(入れ子)構造を意識した順番で使います。
親階層から見て並列な内容であれば、同じ見出しタグを使うことができます。

良い例
<h1>Webで使う技術</h1>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JavaScript</h2>
    <h3>jQuery</h3>
  <h2>PHP</h2>
悪い例
<h1>Webで使う技術</h1>
  <h3>HTML</h3>
  <h4>CSS</h4>
  <h3>JavaScript</h3>
    <h2>jQuery</h2>
  <h3>PHP</h3>
POINT
見出しだけを抽出したときに目次になるように意識して見出しタグを使う

見出しタグは適切に使い分ける

h1タグは1ページに1つ

h1タグは1ページに1つにします。

  • トップページ … サイト名、ロゴ
  • 下層(記事)ページ … ページ(記事)タイトル

WordPressでブログを書いている場合は、テーマで設定してあるので特に気にする必要はありません。

h2~h6タグは1ページに複数使える

h2~h6タグは順番、階層を守ってさえいれば何度使ってもかまいません。

デザインの支給をうけてコーディングのみをする案件の場合、適切な見出しがなかったり、見出しがどこから

section(article)で囲む

見出しタグと見出しタグに対応する内容をsectionタグで囲みます。
こうすることによって、見出しタグについて書かれた文章、リストなどがどこまでなのかを明確にすることができます。
見出しから次の見出しまでの間が必ずsectionで囲まれるわけではないので注意が必要です。

記事本文全体にはarticleで囲みます。

<article>
  <h1>Webで使う技術</h1>

  <section>
    <h2>HTML</h2>
    <p>HTMLについての記事</p>
  </section>

  <section>
    <h2>CSS</h2>
    <p>CSSについての記事</p>
  </section>

  <section>
    <h2>JavaScript</h2>
    <p>JavaScriptについての記事</p>

    <section>
      <h3>jQuery</h3>
      <p>jQueryについての記事</p>
    </section>
  </section>

  <section>
    <h2>PHP</h2>
    <p>PHPについての記事</p>
  </section>
</article>

特にHTMLコーディングをする場合は、デザインをつくるとき、見たときに、ここまで意識してコーディングできると理想的です。
どうしてもsectionに入らない内容がある場合はdivにします。

ブログの場合、ここまで設定できるテーマはなさそうなので、難しい場合は絶対ではないです。

アウトライン確認ツール「HTML5 Outliner」

「HTML5 Outliner」を使うと、見出しを含めたHTMLのアウトライン構造を確認することができます。

Webツールの「HTML5 Outliner」

Input HTML(ファイル)、URL、HTMLソースから、アウトライン構造を表示してくれます。

Chrome拡張機能の「HTML5 Outliner」

HTML5 Outliner

Generates a navigable page outline with heading and sectioning elements

拡張機能のアイコンをワンクリックでアウトライン構造を表示してくれます。

まとめ

見出しタグの使い方について解説しました。

見出しタグが間違っているからといって検索順位が上がらないというわけではありませんが、正しく見出しをつけることでユーザーが見やすくなります。
ユーザーが読みやすい記事を意識すればルールを知らなくても自然と正しい構造になってくると思います。