見出しタグh1からh6の使い方

hタグ

h1~h6要素

カテゴリ タグ 機能 使用属性 要素分類
文字装飾 <h1> 見出しに使います。 ブロックレベル
使用例
<h1> ~ </h1>

☆説明

HTML文章の内容はbodyの中に書きます。

h1見出し

h2見出し

h3見出し

h4見出し

h5見出し
h3見出し

こちらの例はこのサイトで使用している設定になります。使う場所が限定されているので、マージンがめちゃくちゃになってますが、ご了承ください。

見出しタグの例

使用時の重要なポイント順番に気をつけよう

hタグの利用方法、このように利用します。見出しの順番が逆にならないように注意してください。上から流れるようにスムーズに設定していくイメージで大丈夫です。

見出し1
テキストテキストテキストテキストテキストテキスト

見出し2
テキストテキストテキストテキストテキストテキスト

見出し3
テキストテキストテキストテキストテキストテキスト

見出し3
テキストテキストテキストテキストテキストテキスト

見出し2
テキストテキストテキストテキストテキストテキスト

見出し3
テキストテキストテキストテキストテキストテキスト

見出し3
テキストテキストテキストテキストテキストテキスト

HTMLではこのように表示されています。

見出し1

テキストテキストテキストテキストテキストテキスト

見出し2

テキストテキストテキストテキストテキストテキスト

見出し3

テキストテキストテキストテキストテキストテキスト

〜省略〜

サイト全体の利用箇所

SEO的にこんな感じで設定するといいと思います。絶対にこれが正しいわけではありません。あくまで基本の一例としてご理解ください。

  1. 検索エンジンは「h1」を重要なものと認識します。HTML5なら、「サイトのタイトル部分(ロゴなど)」と「記事の見出し」に使用します。
  2. 記事内で次に重要な見出しを「h2」に設定します。文章は「p」などで説明します。
  3. 「h2~h6」はいくらでも設定できますが、順序が逆になる書き方は誤りなので注意してください。
  4. WordPressなどの関連記事はh3かh4がいいかもしれません。
  5. サイドバーの見出しはh4で。
  6. フッターの見出しはh5がいいかもです。