ちゃんと使おう見出しタグ

こんにちは、ゆんつです。

HTMLのタグにhタグというものがあります。

いわゆる「見出しタグ」といわれるものです。

僕は長らくこのhタグを文字の大きさを調節し、さらに文字を装飾するものだと思っていました。

ですのでブログ開設からしばらくは「ここは字を小さく地味にしたいからh4くらいにしよう」とか「ここは字を大きくして目立たせたいからh2だな」みたいな感じの使い方をしていました。

ゆんつ

知らないというのは恐ろしいものです

しばらくしてフォントサイズというもので文字の大きさを設定することができることを知り「どうやらhタグは字の大きさを調節するために使うものではなさそうだ」と感じて、そういう使い方はやめましたが今でもはっきりとした使い方があまりわからずに結構あやふやな状態で使っています。

ですので今日は見出しタグについて勉強したいと思います。

見出しタグとは

その名の通り文章の見出しになるものです。

h1～h6まで存在し、h1が最も大きな見出しとなりh6が最も小さい見出しになります。

数字が小さいほど見出しとしての重要度が高くなります。

また使用しているブログのテーマやプラグインよっては、見出しタグを元にして目次を自動的に作成してくれることもあります。

僕の使っているテーマ「Cocoon」は見出しを利用して自動で目次を作成してくれます。

実際に使ってみる

<h1>h1です</h1>
<h2>h2です</h2>
<h3>h3です</h3>
<h4>h4です</h4>
<h5>h5です</h5>
<h6>h6です</h6>

CSSでフォントのサイズを指定しなくても、重要なものほど大きく、そうでないものほど小さく表示されます。

見出しタグの使い方のポイント

スッキリ書く

hタグはあくまでも見出しなので、後に続く文章に何が書かれているのかを端的に記す必要があります。

だらだらと長文になるようなものは良くありません。

見出しタグの中身はスッキリ書いて、その後にpタグなどを使って詳細な内容を書くようにします。

使う順番を守る

見出しタグはh1から順次使っていきます。

<h1>見出しタグの使い方について</h1>
  <p>見出しタグについて勉強してみましょう</p>
  <h2>見出しタグとは？</h2>
    <p>見出しタグとは文章の見出しに....</p>
  <h2>実際に使ってみよう</h2>
    <p>それでは実際に使ってみましょう</p>
      <h3>h1タグを使ってみる</h3>
     ...
  <h2>見出しタグを使うときに注意するポイント</h2>
    ...

もちろんh2、h3、h4ときて再びh3やh2に戻ったりするのは構いませんが、タイトルにh1を使って、その次の見出しタグがいきなりh4というような順番を守らない使い方は良くない使い方です。

デザインのために使わない

字の大きさの調整などのデザイン目的で見出しタグを使ってはいけません。

ゆんつ

僕がやってたことです

あくまでも後に続く文章の「見出し」として使い、デザインはCSSで整えます。

h1は1ページに一個が良い

h2～h6までの要素は何度でも使って良いのですが、h1だけは1ページに1個にした方が良いようです。

最も伝えたい大事な部分をh1にするので、1ページに何個もh1があっては混乱してしまいますからね。

例えば僕のブログの場合はタイトルは自動的にh1になります。

ですので本文ではh1は使わずにh2から使っていきます。

h1を1ページに複数使ったからと言ってペナルティはないみたいですが、原則的には1ページに1個がいいみたいです。

まとめ

以上見出しタグについて現在の僕が覚えたことを一通りまとめました。

今後は

とうこと念頭に置いて見出しタグを使っていきたいと思います。

それでは、またですー。