見出しタグ-ホームページ作成講座

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

見出しタグ

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

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

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

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

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

見出しタグのサンプル

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

temp.htmlを開いて、textフォルダに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>

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

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

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

前へ次へ