以前書いたこの記事↓
にて「グローバルメニューの下部分にスペースを作りたいけどうまくいかない」と書いた。
その問題がhタグ（見出しタグ）で解決したので、今一度hタグについて考え整理してみたいと思う。
そもそもhタグとは何なのか？
見出しタグというくらいなので見出しをつけるタグである。
上の「そもそもhタグとは何なのか？」部分のように、見出しとなる部分を目立たせ読みやすくする。
また人間にとって読みやすいだけでなく、Googleなどの検索エンジンにとっても読みやすくする効果がある。
このページの内容は何なのか？ということをコンピューター（検索エンジン）が拾いやすくなる、といったところだろうか。
hタグの基本的な使い方
<h1> ～ </h1>
大見出しとも言われる<h1>タグ。一番重要なところに使います。
このページならタイトルの「hタグの使い方について再考する」部分。
ページにつき一度しか使えないといった話もあるが条件を満たせば必ずしもそうではないらしい。
ただその条件を理解するのが難しく、実際一番重要なことというとタイトルくらいなので、私は一度しか使っていません。
<h2> から <h6>
<h2>タグは中見出しとも言われ、<h1>タグの次に重要なところへ使います。
<h2>タグもあまり多く使わない方がよく、ページにつき2～3度が理想らしい。私は7度ほど使っているページが1ページだけある（これもどうなんだろう）が、他は概ね2～3度となっている。
<h3> から <h6>は小見出しとも呼ばれる。
<h2>の文中に<h3>を使う、といったように階層を意識して順に使っていく。
ちなみに私は記事内で使ったことはまだない。サイドバーの見出し（検索、カテゴリ、最新の記事etc）部分は<h3>タグを使っているが、正しい使い方かどうかはしっかり理解していない。（頂いたカスタマイズテンプレートの設定でそうなっている）
hタグを使う際の注意事項
まず上記した「階層を意識する」ことは重要。
<h1>がなくて<h2>から始めるのはよくないし、<h1>の次に<h3>のように歯抜けするのもよくない。
次に見た目を変える目的で使わないこと。
hタグがテキストを太字にしたりサイズを大きくするなどの効果があるからといって安易に使うのはダメ。
hタグは本当に重要なところで使うようにして、その他サイズを変えるなど文字を装飾したいときはCSSなどで調節する。
hタグによる隙間（margin）調整
ここで最初に書いた
「グローバルメニューの下部分にスペースを作りたいけどうまくいかない」問題の解決編。
以前はグローバルメニュー側にmarginを設定（下が25px空くように）していた。
しかしそれだとHOMEの下に25px、このサイトについての下に25px……とそれぞれの下部分に25pxの隙間ができるため、パソコンからは普通に見えてもスマートフォンから見ると、HOME・白い帯（25px）・このサイトについて・白い帯（25px）……となって見栄えが悪い。
そこで改めてHTMLとスタイルシートを見直してみると、グローバルメニューの下は記事見出し（h1タグ）とサイドバー見出し（h3タグ）になっていることに気づいた。
ということはhタグ側でmarginを設定すれば解決する。
というわけでh1とh3のスタイルシートに margin: 1em 0 0; （上部に1文字分の隙間、左右と下は0）の記述を追加し、グローバルメニュー側のmargin設定を削除。
結果は思い描いていた通りの見た目になりました。めでたしめでたし。
おわりに
タグやスタイルシートについて理解することは難しいけれど、こうして少しずつでも解決していければいいなと思う。
今回参考にしたページ
<h1>とは？SEOを意識した正しい見出しタグの使い方
見出しタグ（h1・h2～h6）使ってる？初心者でも出来るSEO対策の第一歩
