迅速ブログ

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はどう使い分ける？