見出しタグ

更新日:2018.06.30
  1. HOME
  2. ホームページ作成講座
  3. 見出しタグ

ここでは、ウェブページの見出しを指定するHTMLタグについて見ていきます。 全部で6種類ありますが、実際に使うのは上位の3つ程です。

見出しタグ

見出しタグは、「h」と数字1~6で表します。上位の見出し3つを見てみましょう。

<h1>~</h1>
ページの主題とも言える見出しの最上位です。titleタグと大体同じになります。通常はページに1つでしょう。
<h2>~</h2>
副見出しとして使うタグです。ページに幾つか存在しても問題ありません。
<h3>~</h3>
3番目の順位の見出しタグです。

この下に<h4><h5><h6>と続きます。 しかしここまで使うとページが複雑になり過ぎているかもしれません。 なるべく上位3つまでに収めるよう心がけましょう。

また、この見出しタグは、上から順に使います。 <h1>の次が<h4>になるようでは、ページの構成がおかしいのかも知れません。

見出しタグに書かれる文字も、検索エンジンのキーワードの判断に使われます。 必要なキーワードを含めるように致しましょう。

見出しタグのサンプル

では、実際に見出しタグを使ったHTMLファイルを作り、ブラウザで見てみましょう。

temp.htmlを開いて、textフォルダにlesson2.htmlというファイル名で保存してください。

lesson2.htmlの作成

そしてそのbodyタグ内に、以下のように書き込んでみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>2.見出し</title>
</head>
<body>
<h1>ページの主題</h1>
最上位の見出しタグです。
<h2>副見出し</h2>
2番目の見出しタグです。
<h3>下位の見出し</h3>
3番目の見出しタグです。
</body>
</html>

上書きしてブラウザで表示させると、下のように表示されると思います。

見出しは太字で大きく目立つように表示されていると思います。

各ページの構成は、この見出しタグによって大体決まります。 しっかり頭の中でページ構成を考え、相応しい見出しを付けてください。

NINJABUTTON