現在HTMLの勉強をしているbranch for proのKです。

今回はHTMLの中で使われるタグの一つ、「見出しタグ」を紹介していきます。

見出しとは新聞記事や広告、ブログなどで最初に見てほしい場所を表すものです。

見出しタグとは？

名前の通り見出しを作り見やすくするためのタグです。

見出しタグには、記事を見やすくする以外にGoogleの検索エンジンにもそのページの構造を正確に伝える役割があります。

うまく活用することにより検索時にページを上位表示させやすくなります。

見出しタグの種類は？

見出しタグには以下の６種類があります。

そしてそれぞれどのタグにも効果と意味があります。

～見出しタグ一覧～

<h1>〇〇</h1>1番大きな見出し（chapter…章）
<h2>〇〇</h2>2番目に大きな見出し（section…節）
<h3>〇〇</h3>3番目に大きな見出し（subsection…項）
<h4>〇〇</h4>4番目に大きな見出し（subsubsection…目）
<h5>〇〇</h5>5番目に大きな見出し（paragraph title…段落小見出し）
<h6>〇〇</h6>6番目に大きな見出し（subparagraph title…小段落小見出し）

〇〇の部分には見出しにしたい言葉を挿入します。

上のh1が一番大きく、下のh6が一番小さいです。

ブログ記事などで使用するのは、一般的にh4タグまでのことが多いです。

実際にHTMLへ記述した使用例

<!DOCTYPE html>
<html>
<head>
<title>Webページ練習</title>
</head>
<body>
 
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>
 
</body>
</html>

このようにbodyタグの間に挿入して使用します。

見出しタグ使用時の注意点

見出しタグを使用する上で注意しなければならない点があります。

  1. h1タグの使用は1記事につき原則1つだけ

    2. 1つの記事にh1を多く挿入してしまうとどのページが一番大事なのかわからなくなりますよね。

    また、検索エンジンにも影響が及び検索で見つかりづらくなります。

    h1タグはサイト名やタイトルに使うことを推奨します。

  2. 見出しタグの順番

    3. 突然ですが、クイズです。

    見出しタグの並びで正しいのはAとBどちらでしょう？
    （A）

    <h1>あ</h1>
<h2>い</h2>
<h3>う</h3>
<h4>え</h4>

    （B）

    <h1>あ</h1>
<h3>い</h3>
<h2>う</h2>
<h4>え</h4>

    正解はAです。

    なぜならBはh2の上にh3がきているからです。Aは規則正しく並んでいます。

    ということは…。

    見出しタグは規則正しく順番に並べなければなりません。そうしないと見出しの並び方のバランスが悪くなります。

まとめ

今回は「見出しタグ」について記事を書きましたが、調べて書いていく中で私自身も勉強になりました。

見出しタグについて深く関わったのは初めてです。

今回得た知識は今後の勉強や仕事で活かしていきたいと思います。

そしてこの記事を読んでくださった皆さんにも役立てていただけたら幸いです。

立派なwebデザイナーを目指しているKがお送りいたしました。