ハシウェブ

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

見出しタグの使い方とHTML5 Outlinerで確認する方法

この記事は、最初の投稿から2年以上が経過しています。

最終更新から807日が経過しています。

見出しタグの使い方とHTML5 Outlinerで確認する方法

「見出しタグの使い方はどうすればいいの?」

「見出しタグが正しく書けているかどうやったらわかるの?」

悩み

こんな疑問にお答えします。

この記事では、見出しの使い方、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」を使ってアウトライン構造を確認する

HTMLのアウトライン構造を正しくすることはソースの可読性だけでなく、Googleに正しくサイトの内容を伝えるという意味でも重要です。

「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

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

「HTML5 Outliner」以外にも、コーディングに役立つChrome拡張機能を紹介しています。

Web制作を効率化!HTMLコーディングに役立つ おすすめChrome拡張機能11選

Web制作を効率化したいですか?この記事では、HTMLコーディングに役立つGoogle Chromeの拡張機能を紹介します。拡張機能を使うことでコーディングの作業性が向上します。ぜひご覧ください。

まとめ

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

  • h1からh6の順番を守る
  • 階層構造にして使う
  • 見出しタグは適切に使い分ける
  • section(article)で囲む
  • HTML5 Outlinerで構造を確認する

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