見出しを付ける 【<h>タグ】：HTML入門
HTML入門（3）
記事「HTML入門 はじめました」にて、HTMLで最低限必要なタグをご紹介しました。
とりあえず、最低限の外側の部分はできたので、今回からは、中身のお話をしていこうと思います。何しろ、皮だけでは、つまらないですからね。
最初にやっておきたいのが、SEO対策でもおなじみの見出しタグ（<h>タグ）です。お話は、次の順番で進みます。
見出しタグ（<h>タグ）とは？
<h>タグは、見出しを指定するためのタグです。
しかし、<h>タグと書いていますが、<h>タグというタグが存在するわけではありません。これは便宜（べんぎ）的な、総称として表記しています。
実際には、<h1>というように、数字を付けます。
そしてタグは、<h1>〜<h6>まであり、6段階のタグが存在します。それぞれ、次のように記述します。
<h1>〜</h1>
<h2>〜</h2>
<h3>〜</h3>
<h4>〜</h4>
<h5>〜</h5>
<h6>〜</h6>
<h1>タグが大見出しで、<h6>タグは最小の見出しを表します。数字が小さいほど、大きい見出しということになります。
何だか、話が分からないですか？
大丈夫です。「見出し」、「<h>タグ」などのキーになる言葉を、少しずつ頭になじませて行ってください。読み進めれば、きっと見えてくるはずです。
本にたとえてイメージする
1：<h1>タグを使ってみる
それでは、本を手に取って、開いてみてください。
おそらく、1ページ目か、2ページ目あたりに、表紙のタイトルと同じ言葉が印刷されているはずです。
これは、まさに大見出し（<h1>タグ）と呼ばれる部分です。
一般的に、前回お話した<title>タグと、今回の<h1>タグを、同じ内容にすることが多いようです。
例えば、写真にある梅田さんの本『ウェブ時代 5つの定理』の場合であれば、次のようにHTMLコードを書きます。
「ウェブ時代 5つの定理」を、<h1>〜</h1>で囲むことで、大見出しと認識されます。
もちろん、すでに本の内容に入っているわけですから、<h1>タグは、<body>〜</body>内に記述します。
2：<h2>タグ、<h3>タグを使ってみる
さらに、本をめくって、目次を見てみましょう。目次を見れば、本の全体が分かります。
さて、<h2>タグ、<h3>タグは、どこに付きそうか分かるかしら？あなたが手にしている本を見て探してみてください。
この梅田さんの本で言えば、「第一定理 アントレプレナーシップ」が、<h2>タグ、「私を起業へと駆り立てた言葉」などが、<h3>タグで指定するべき箇所になります。
次のように、HTMLコードを書くことができます。
<h3>タグの見出しの下に、その見出しの内容にあった文章を、それぞれ書くわけです。
ちなみに、勘違いしないでいただきたいのですが、実際に<h2>〜</h2>で囲むべき箇所は、ページをめくって行って、実際に見出しがある場所です。
これは、<h3>〜</h3>で囲むべき箇所も同様です。
ちょっと写真の腕がないので見難くて申し訳ないんですが、いかがでしょうか？何となく、分かってきたのではないかしら？
まだ、どうもイメージし難い場合は、SEO対策のページでも見出しタグについて書いているので、ご覧ください。構造がよくご理解いただけると思います。
3：あれ？<h4>〜<h6>タグは？
本を眺めていて、「あれ？<h4>〜<h6>タグを、付けるところがないよ？」と感じた人も、いらっしゃるのではないかしら。
しかし、<h>タグと言うのは、見出しがあれば付ければ良いし、無ければ付けなくても問題ありません。自由です。
例えば、小説のような形式では、見出しで区切らない場合もあります。
それは、見出しによって、せっかくの話の流れを止めてしまうことがあるからだと思います。その文章の性質によって、見出しの有無は書き手が決めなければいけません。
ただ、一般的な文書は、見出しで区切っておけば、読み手が、読みやすいというメリットの方が多いように思います。
- 見出しだけを飛ばし読みして、興味のある箇所だけ読むことが出来る。
- 見出しによって、区切りができるので、どこまで読んだかが把握しやすい。
- 起承転結などで分ければ、リズムが発生するので読みやすい。
- 大中小の見出しがあれば、内容を構造的に理解しやすい。
などなど。
さらに人間だけでなく、検索エンジンからも、そのページの内容が把握しやすくなるため好まれます。いわゆるSEO対策でも効果があるいうことです。
<h>タグを付けるか、付けないかは自由ですが、付ける方が大きなメリットが得られるんだなぁ。
実習 <h>タグ
実際に、あなたが用意した本のタイトルや目次を見ながら、次のようなHTMLコードを作成して、ブラウザで表示させてみましょう。
いかがでしょう。表示できたかしら。
ちょっと、文字の大きさやデザインなどをいじりたくなるかもしれませんが、ここはグッと我慢（がまん）してください。
デザインやレイアウトは、CSSにて行います。ここで、触れないことが、より後々の理解を深めます。
ブラウザで表示させる方法は、記事「HTMLを表示させてみよう」が参考になります。
<h>タグの留意点
<h>タグを使う場合の留意点です。
- <h1>タグが使えるのは、1ページに1回だけです。
- 見出しタグは、飛ばして使ってはいけません。例えば、<h2>タグが無いのに、<h3>タグを書くのは誤りです。
次回予告
次回は、ソーシャルブックマークボタンを、ブログに設置する方法について書いています。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTML文を表示させてみよう
- 見出しを付ける 【<h>タグ】（この記事です）
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/16 更新日：2008/03/16
« 「HTML文を表示させてみよう」｜「文章を書く 【<p>タグ】」 »
コメントありがとうございます。
見出し
身だしなみ
そうでやんす。
見出しタグに囲まれている言葉だけでなく、
見出しタグの近辺の文章なども、
キーワードの含有量をチェックしているみたいです。
目印になりやすいのでしょうね。
私は昔は、まったく使っていませんでした。
でっかくなっちゃうのを直すのが面倒だったんだもの。
今は、CSSで簡単やね！(・∀・)
えええ！
見出しタグの中だけじゃなくって周辺の文章まで読んでいくんですか！
わーん知らなかったです。
なるほど、目印なんですね・・・
なんかすっごい事を覚えた気分・・・
どきどき・・・
積極的に検索ヒットさせたいと思うなら、やはり見出しタグは
使った方がかなり効果的なんですね。
自分は今まで使ってもh2か、h3だったけど、もうちっとやってみようかしらん。
ターゲットキーワード
はい。見出しの直近の一段落目に、
ターゲットキーワードを入れておく方が良いそうです。
SEO的な表示順位アップの効果だけでなく、
検索エンジンに表示されたときの文章についても、
よりまとまりやすくなるようです。
”かなり”効果的というほどではないですけれど、
それなり効果があります。
とても効果があるのは、
やはりtitleタグにキーワードを入れることです。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/241-0af89ea9
見出しタグのお話読みました。
なんとなく、検索によりヒットしやすくなる為のものだと思って使っていたのですが、
検索ロボットがページを読みやすくする為のものでもあったのですね。
結果的にSEO効果もある、って事なんですね。
これからもっとそれを意識して使ってみたいと思います！
さらに昔･･･h1とかh2で囲うと文字が太くなったりでかくなったりだったので
それで文字効果をつけていたorz
h6だと小さい文字になるので小さくするとこはh6で囲ったり。
めちゃくちゃやー。