HTMLの基本中の基本「見出し」タグについて解説します。
この記事で学べる内容
- 見出しタグ（h1~h6）とは？
- 見出しタグの使い方
- 見出しタグの使い方の注意点
実際にブラウザ上で動作確認ができるようサンプルコード付きで解説します。Webデザイナーの人や、企業のWeb担当者なら絶対に知っておきたい内容をまとめています。
見出しタグ（h1~h6）とは？
見出しタグは、その名の通り文章内の「見出し」を意味するタグです。
「見出し」を別の言葉で説明すれば、文章における重要な単語（キーワード）を示すものであり、文章全体の構成を「ユーザ」と「検索エンジン」にわかりやすく説明するものであると言えます。
もし文章全体が、段落タグ（<p>）だけで構成されていると、どのような文章構成なのか、ユーザ・コンピュータが理解することができません。
この段落のまとまりは、〇〇について書かれている―。こっちは、△△について説明している―。
「見出しタグ」を適切に使用することで、ユーザと検索エンジンそれぞれにとってわかりやすい文章を書くことができます。
見出しタグの使い方・書き方
＜h1＞〇〇</h1>
基本的な構文ルールは他のタグと変わりません。重要なのは、hの後に続く数字です。
数字が大きくなればなるほど重要度が増していき、表示される文字も大きくなります。
<h1>最重要キーワード</h1> <h2>２番目に大事なキーワード</h2> <h3>３番目に大事なキーワード</h3> <h4>４番目に大事なキーワード</h4> <h5>５番目に大事なキーワード</h5> <h6>６番目に大事なキーワード</h6>
上記HTMLをブラウザで表示した結果がこちらです。文字の大きさの違いに注目してみてみましょう。
ユーザは文字の大きさで重要度を理解できます。また、コンピュータも見出しタグを通してそのタグで囲まれたテキストの重要度を理解することができます。
※タグの概念・タグの基本的な使い方については以下の記事からご確認ください。
見出しタグの注意点
見出しタグは書き方も、概念も容易に理解することができたかと思います。
ただし、見出しタグについては一定のルールに従って適切に利用しないと、ユーザにとってもコンピュータにとっても文章構成がわかりづらくなってしまいます。
見出しタグを利用する際には、主に以下の４点に注意する必要があります。
- h1~h6 までの間で利用する（h7以降は認識されない）
- h1はページ内で２回以上使わない
- h1~h6を利用する順番を守る
- ページの内容と関係ないキーワードを入れない
① h1~h6 までの間で利用する
見出しタグの番号は、最小１：最大６です。つまり、見出しタグはその重要度に応じて「h1~h6の間で利用する」必要があります。
もし、h7をつけてしまったらどうなるでしょうか？試してみると・・・
<h1>最重要キーワード</h1> <h2>２番目に大事なキーワード</h2> <h3>３番目に大事なキーワード</h3> <h4>４番目に大事なキーワード</h4> <h5>５番目に大事なキーワード</h5> <h6>６番目に大事なキーワード</h6> <h7>７番目に大事なキーワード</h7>
見出しタグとして認識されません。もっとシステム的な仕組みを言えば、タグが認識されないので「タグなし」の状態となります。
※タグがない場合でもテキストとしてはブラウザ上で表示することができます。
② h1はページ内で２回以上使わない
h1タグは同一ページ内で２回以上の利用はしないようにしましょう。本サイトではページの一番上「記事のタイトル」として１回だけ利用することにしています。（赤枠内）
h1タグの複数回利用は一体何がいけないか？これは、HTML5の文法的に禁じれらているわけではありません。いけない理由は、h1タグを複数回利用すると「結局そのページに何が書いてあるか？」が分からなくなってしまうという点にあります。
記事を見るのがユーザだけであれば、変わるのは文字の大きさだけですが、コンピュータが文章を認識する際には混乱してしまいます。（結局何が重要な内容なの？）
何か特殊な事情がない限りh1タグを複数回利用することはありません。
③ h1~h6を利用する順番を守る
h1-h6を利用する順番が重要です。
h3を利用する前に必ず「h2」を、h4を利用する前に必ず「h3」を―。というように、見出しタグを「h1~h6」の順番に利用する必要があります。これも、コンピュータに文章の構成を認識させるためのルールです。
もし、順番を意識せずに見出しタグを利用すると、文章全体の構成が分からなくなるばかりか、何が重要なキーワードなのか？結局何が書かれている文章なのか？を理解できなくなります。
※h5を書いた後にh2に戻るという利用方法はOKです。
④ ページの内容と関係ないキーワードを入れない
ページの内容と関係のないキーワードを入れるのはできるだけ避けましょう。
見出しタグで囲まれたテキストは、文章の骨組みとなる部分です。したがって、文章全体のキーワードとなる文字を設定することが重要です。
もし、文章とあまり関係のない「超・重要！」とか「これだけは覚えて」とかを設定していると、コンピュータ的には「結局何が重要なの？」「これって何？」ということになってしまいます。
見出しタグを適切に利用して、「わかりやすい文章」を作成できるようにしていきましょう。
HTMLを１から学びたい方は・・・
HTML/CSSを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。
そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。
各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。
