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 見出し -