2020.07.08 2021.01.03

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

HTML

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

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

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

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

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

この記事では､見出しの使い方､HTML5 Outlinerで確認する方法について解説しています｡

目次

見出しタグとは
見出しタグの使い方
「HTML5 Outliner」を使ってアウトライン構造を確認する
まとめ

見出しタグとは

見出しタグとは､見出しを記述するための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にします｡

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