投稿者: Zinsoku

HTMLで「見出し要素」を使い、文章中に見出しを設定する方法を紹介します。

見出し要素とは？

見出し要素とは、名前の通り「見出しを作るため要素」のことです。

「見出しタグ」と呼ぶ場合もあります。

見出し要素にはh1~h6の6種類があります。

<h1>ここに見出し名が入ります</h1>
<h2>ここに見出し名が入ります</h2>
<h3>ここに見出し名が入ります</h3>
<h4>ここに見出し名が入ります</h4>
<h5>ここに見出し名が入ります</h5>
<h6>ここに見出し名が入ります</h6>

h1が一番大きな見出しで、h6が一番小さな見出しになります。

見出し要素を利用し、ウェブページの文章に階層構造を作る事で、論理的な記事を構成する事ができます。

実際にウェブページの文章を作成する際は、以下の様に利用します。

<h1>食べ物の種類</h1>

<h2>和食</h2>
<h3>和菓子</h3>

<h2>洋食</h2>
<h3>ピザ</h3>

<h2>中華</h2>
<h3>ラーメン</h3>
<h4>醤油ラーメン</h4>
<h4>塩ラーメン</h4>

一番大きな見出しであるh1はサイトや記事のタイトルに使用されます。

h2は大見出し、h3は中見出し、h4は小見出しになります。

各見出しの下に、通常の文章（上記の例では食べ物の解説など）を記します。

見出し要素は6種類全てを利用する必要はありません。

見出し要素の注意点

見出し要素を使う上での注意点をいくつか紹介します。

見出し要素は6種類

見出し要素はh1からh6の6種類です。

h0やh7はありません。

見出し要素は順番に使う

見出し要素の数字を飛ばさない様にしましょう。

例えば、h2の下に使う見出しはh3になります。h3の次はh4です。

数字を飛ばしても、特に問題なくページは表示されますが、適切ではありません。

デザインとは無関係

見出し要素に限らず、HTMLの役割はあくまで文章の構造を作る為のものであって、デザイン（色や文字サイズ）の変更を行うものではありません。

デザインは、基本的にCSSを使って調整します。

なので、「h1だと文字のサイズが大きすぎるから、h2を使う」というような使い方は適切ではありません。

そのような場合は、CSSを使い、h1の文字サイズを調整しましょう。

マークダウンの書き方

マークダウンで見出しタグ（hタグ）を書くためには、パウンド記号（ハッシュタグのハッシュ）を使います。

パウンド記号をhタグの番号と同じ数、文章の先頭に書けばOKです。

見出しはh1からh6まであるので、マークダウンでもh1からh6まで対応しています。

#h1 見出し
##h2 見出し
###h3 見出し
####h4 見出し
#####h5 見出し
######h6 見出し

上記のように書いた文章をHTMLに変換すると以下のようになります。

<h1>h1 見出し</h1>
<h2>h2 見出し</h2>
<h3>h3 見出し</h3>
<h4>h4 見出し</h4>
<h5>h5 見出し</h5>
<h6>h6 見出し</h6>

なお、h1、h2の場合は他にも記法があります。

h1の場合は直後の行にイコール「=」、h2の場合は直後の行にハイフン「-」を入力することで同様の結果が得られます。

h1 見出し
=

h2 見出し
-

参考

• HTML の見出し要素
• 【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

自身のサイトに掲載しているGoogle AdSenseの広告を自分でクリックするのはポリシー違反です。

広告が正しく貼れているか確認するためのテスト目的であってもNGです。

自動、手動の手段を問わず、サイト運営者様が広告の表示回数やクリック数を作為的に増加させたりすることは禁止されています。これには、実際に掲載されている広告での動作テストも含まれます。

出典：アカウントの閉鎖につながった無効なトラフィックとポリシー違反 – Google AdSense ヘルプ

自分のウェブサイトを閲覧する際は、広告を間違ってクリックしないように気をつけましょう。

また、友人や知人、読者などにクリックを依頼するのもポリシー違反なので注意しましょう。表示されている広告に実際に興味があったとしてもダメです。