タイトルと見出し(title、h1〜h6)の仕様と使い方

カテゴリ:HTML編

タイトルにはページのタイトル(title)と訪問ユーザー様の見出しタイトル(h1~h6)があります。

title要素

title要素はheadタグ内に記述します。
Webブラウザのタイトルバーやタブバーに表示されますがユーザーには見えません。
検索エンジンが検索結果に表示する要素となるためSEO上は極めて重要な要素になります。
主に検索エンジン用のタイトルと考えていいでしょう。
<head>
<title>ページタイトル</title>
</head>
一般的にタイトルの末尾にはサイト名を指定します。
<title>ページタイトル | サイト名</title>
※サイト名の区切り記号は|(パーティカルバー)や:(コロン)、-(ハイフン)などが一般的です。

W3Cによるtitle要素の説明

title要素は、ドキュメントのタイトルまたは名前を表します。著者は、例えば、ユーザーの履歴やブックマーク、検索結果など、コンテキスト外で使用された場合でも、ドキュメントを識別するタイトルを使用する必要があります。文書のタイトルは最初の見出しと異なる場合があります。なぜなら最初の見出しは文脈から取り除かれたときに単独で出現する必要はないからです。
ドキュメントごとに複数のタイトル要素が存在してはいけません。

h1~h6要素

h1~h6は見出しですが、bodyタグ内で使用し、実質的には訪問ユーザーにとってのタイトルとなります。

但し、titleとは異なり末尾にサイト名は記述しません。

h1~h6は階層的に数字の若いものから順番に使用します。
<body>
<h1>トップの見出し</h1>
<h2>第2階層の見出し</h2>
<h3>第3階層の見出し</h3>
<h4>第4階層の見出し</h4>
<h5>第5階層の見出し</h5>
</body>
以下のようにh1の次にh2を飛ばしてh3が来てはいけません。
<h1>トップの見出し</h1>
<h3>第3階層の見出し</h3>
<h4>第4階層の見出し</h4>
以下のように順番を守れば複数の階層のhタグを指定する事はも可能です。
以下の場合、複数の下位の見出しを持つh2タググループを2つ持つ、1つのh1タググループとなります。
<h1>トップの見出し</h1>

<h2>1つ目の第2階層の見出し</h2>
<h3>第3階層の見出し</h3>

<h2>2つ目の第2階層の見出し</h2>

<h3>1つ目の第3階層の見出し</h3>

<h3>2つ目の第3階層の見出し</h3>
<h4>第4階層の見出し</h4>
<h5>第5階層の見出し</h5>
同じh番号のタグは同列です。

実際にはhの右の数字(1~6)は重要度(ランク)を示し、DTD上、見出しのランクの順序は制約されません。

下位のhタグは上位のhタグの分類を引き継ぐ

hタグは階層構造としての意味合いとを持つため、下位のhタグは上位のhタグの分類も含みます。
このため、以下の見出しは、
<h1>果物</h1>

<h2>りんご</h2>
<h3>りんごの主な品種</h3>
<h3>りんごの主な産地</h3>

<h2>みかん</h2>
<h3>みかんの主な品種</h3>
<h3>みかんの主な産地</h3>

<h2>いちご</h2>
<h3>いちごの主な品種</h3>
<h3>いちごの主な産地</h3>
以下のように省略して記述しても問題ありません。
<h1>果物</h1>

<h2>りんご</h2>
<h3>主な品種</h3>
<h3>主な産地</h3>

<h2>みかん</h2>
<h3>主な品種</h3>
<h3>主な産地</h3>

<h2>いちご</h2>
<h3>主な品種</h3>
<h3>主な産地</h3>

逆に同じキーワードを繰り返し使うとくどくなり、検索エンジンにキーワードの詰め込みすぎと見なされる可能性もあります。

このため、親のhタグとは異なる分類のhタグを子にはしないようにしましょう。
hタグを付けるときは、上位のhタグから同列のhタグを先に決めると階層構造が分かりやすくなります。(つまり外側のhタグから先に決めていくということ)

なお、HTML5では、h1タグを複数使用することも可能ですが、一般的には1ページに1つです。

W3Cによるh1~h6要素の説明

これらの要素は、セクションの見出しを表します。
これらの要素には、名前の番号で指定されたランクがあります。 h1要素は最高ランクを持ち、h6要素は最低ランクを持ち、同じ名前を持つ2つの要素は同じランクを持ちます。

公開日時: 2017年12月29日  22:06:00

本格的なスキルを身につける

オンラインによるWebプログラミングスクールの無料レッスンを受けてみたい方はTechAcademyの無料体験がおすすめですよ。

HTML編に戻る

「HTML編」に関する他の手順
「HTML編」に関するTips

「HTML編」に関するTipsはありません。

このページのトップに戻る