【HTML入門③】見出しタグ（hタグ）とは？どんなときに使うのか？簡単に解説します！

こんにちは！ともひろです。
今回はHTML入門シリーズの第3回として、「見出しタグ（hタグ）」について分かりやすく解説します。

hタグってなに？何の略？

HTMLでは各項目に「見出し」をつけるのが基本です。

HTMLのhタグはh1～h6の6種類があります。
ただ筆者は実際にはh1～h3までしかほぼほぼ使ってません笑
h4がかろうじて使ったことあったかなーって程度です。

実際にこのブログでもhタグは使われている

WordPressのサイトを例に出すとイメージが付きやすいかも知れません。
このサイトの記事タイトル｢【HTML入門③】見出しタグ（hタグ）とは？どんなときに使うのか？簡単に解説します！｣
これはh1が使われています(他の記事タイトルもh1です)。

その下の見出しである
「hタグってなに？何の略？」　「実際にこのブログでもhタグは使われている」なんかがh2に当たります。

見出しは階層になっていて

• <h1>が一番大きくて重要な見出し
• <h2>はその中の小見出し
• <h3>はさらにその中の見出し…という風な構造で使います

WordPressにももちろんHTMLが使われているので
考え方の参考になると思います。

hタグの使い方のポイント

1. <h1>は基本的に1ページに1つ

通常、<h1>はページのタイトル（記事タイトルやサイトの名前）として使います。複数あると検索エンジンが混乱する可能性があります。
一番目立たせたいものが二つあるのは変だなという感覚で大丈夫でしょう。

2. 順番を飛ばさない

見出しの階層は飛ばさずに順番に使いましょう。

悪い例：

<h1>会社情報</h1>
<h3>代表メッセージ</h3> 

h1の次のh2を飛ばしてh3を使用している点がBadです。

良い例：


<h1>会社情報</h1>
<h2>代表メッセージ</h2>

h1→h2の流れで使われていますね！

3. 見た目の大きさ調整はCSSで行おう

「文字が大きいからh1にする」など、見た目だけで選ばないようにしましょう。

スタイル(見た目のこと)はCSSで調整するのが基本です。
CSSの解説はまた別に行います。今は見た目を変更するにはCSSを使うらしいと思っていてください。

See the Pen Untitled by tomo (@tomo77) on CodePen.

まとめ

• hタグは文章に見出しをつけるタグ
• h1〜h6の6段階があり、論理的な階層構造を作るのが大切
• 見た目のサイズではなく、意味や構造で選ぶ

【HTML入門④】では「divタグ」について解説します!
divタグはWebサイト制作でこれまた頻出です。
使い勝手がとてもいい反面、意味も無くとりあえず使ってしまいがちなところが注意点です。
お楽しみに！