見出しを付ける 【<h>タグ】:HTML入門

ブログが作りたい!HTML入門 > 見出しを付ける 【<h>タグ】:HTML入門

見出しを付ける 【<h>タグ】:HTML入門

見出しを付ける 【<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>タグ)と呼ばれる部分です。

大見出し(<h1>タグ)

一般的に、前回お話した<title>タグと、今回の<h1>タグを、同じ内容にすることが多いようです。

例えば、写真にある梅田さんの本『ウェブ時代 5つの定理』の場合であれば、次のようにHTMLコードを書きます。

「ウェブ時代 5つの定理」を、<h1>~</h1>で囲むことで、大見出しと認識されます。

もちろん、すでに本の内容に入っているわけですから、<h1>タグは、<body>~</body>内に記述します。

▲ページの先頭に戻る

2:<h2>タグ、<h3>タグを使ってみる

さらに、本をめくって、目次を見てみましょう。目次を見れば、本の全体が分かります。

さて、<h2>タグ、<h3>タグは、どこに付きそうか分かるかしら?あなたが手にしている本を見て探してみてください。

本の目次

この梅田さんの本で言えば、「第一定理 アントレプレナーシップ」が、<h2>タグ、「私を起業へと駆り立てた言葉」などが、<h3>タグで指定するべき箇所になります。

次のように、HTMLコードを書くことができます。

<h3>タグの見出しの下に、その見出しの内容にあった文章を、それぞれ書くわけです。

ちなみに、勘違いしないでいただきたいのですが、実際に<h2>~</h2>で囲むべき箇所は、ページをめくって行って、実際に見出しがある場所です。

<h2>~</h2>で囲むべき箇所

これは、<h3>~</h3>で囲むべき箇所も同様です。

<h3>~</h3>で囲むべき箇所

ちょっと写真の腕がないので見難くて申し訳ないんですが、いかがでしょうか?何となく、分かってきたのではないかしら?

まだ、どうもイメージし難い場合は、SEO対策のページでも見出しタグについて書いているので、ご覧ください。構造がよくご理解いただけると思います。

▲ページの先頭に戻る

3:あれ?<h4>~<h6>タグは?

本を眺めていて、「あれ?<h4>~<h6>タグを、付けるところがないよ?」と感じた人も、いらっしゃるのではないかしら。

しかし、<h>タグと言うのは、見出しがあれば付ければ良いし、無ければ付けなくても問題ありません。自由です。

例えば、小説のような形式では、見出しで区切らない場合もあります。

それは、見出しによって、せっかくの話の流れを止めてしまうことがあるからだと思います。その文章の性質によって、見出しの有無は書き手が決めなければいけません。

ただ、一般的な文書は、見出しで区切っておけば、読み手が、読みやすいというメリットの方が多いように思います。

  • 見出しだけを飛ばし読みして、興味のある箇所だけ読むことが出来る。
  • 見出しによって、区切りができるので、どこまで読んだかが把握しやすい。
  • 起承転結などで分ければ、リズムが発生するので読みやすい。
  • 大中小の見出しがあれば、内容を構造的に理解しやすい。

などなど。

さらに人間だけでなく、検索エンジンからも、そのページの内容が把握しやすくなるため好まれます。いわゆるSEO対策でも効果があるいうことです。

<h>タグを付けるか、付けないかは自由ですが、付ける方が大きなメリットが得られるんだなぁ。

▲ページの先頭に戻る

実習 <h>タグ

実際に、あなたが用意した本のタイトルや目次を見ながら、次のようなHTMLコードを作成して、ブラウザで表示させてみましょう。

いかがでしょう。表示できたかしら。

<h3>~</h3>で囲むべき箇所

ちょっと、文字の大きさやデザインなどをいじりたくなるかもしれませんが、ここはグッと我慢(がまん)してください。

デザインやレイアウトは、CSSにて行います。ここで、触れないことが、より後々の理解を深めます。

ブラウザで表示させる方法は、記事「HTMLを表示させてみよう」が参考になります。

▲ページの先頭に戻る

<h>タグの留意点

<h>タグを使う場合の留意点です。

  • <h1>タグが使えるのは、1ページに1回だけです。
  • 見出しタグは、飛ばして使ってはいけません。例えば、<h2>タグが無いのに、<h3>タグを書くのは誤りです。

▲ページの先頭に戻る

次回予告

次回は、ソーシャルブックマークボタンを、ブログに設置する方法について書いています。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/16 更新日:2008/03/16

« 「HTML文を表示させてみよう」|「文章を書く 【<p>タグ】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

見出し

こんにちは!
見出しタグのお話読みました。

なんとなく、検索によりヒットしやすくなる為のものだと思って使っていたのですが、
検索ロボットがページを読みやすくする為のものでもあったのですね。
結果的にSEO効果もある、って事なんですね。
これからもっとそれを意識して使ってみたいと思います!

さらに昔・・・h1とかh2で囲うと文字が太くなったりでかくなったりだったので
それで文字効果をつけていたorz
h6だと小さい文字になるので小さくするとこはh6で囲ったり。
めちゃくちゃやー。

身だしなみ

ひろこさん、こんばんは。

そうでやんす。
見出しタグに囲まれている言葉だけでなく、
見出しタグの近辺の文章なども、
キーワードの含有量をチェックしているみたいです。

目印になりやすいのでしょうね。

私は昔は、まったく使っていませんでした。
でっかくなっちゃうのを直すのが面倒だったんだもの。

今は、CSSで簡単やね!(・∀・)

えええ!

こんばんは!
見出しタグの中だけじゃなくって周辺の文章まで読んでいくんですか!
わーん知らなかったです。
なるほど、目印なんですね・・・

なんかすっごい事を覚えた気分・・・
どきどき・・・

積極的に検索ヒットさせたいと思うなら、やはり見出しタグは
使った方がかなり効果的なんですね。
自分は今まで使ってもh2か、h3だったけど、もうちっとやってみようかしらん。

ターゲットキーワード

ひろこさん、こんばんは。

はい。見出しの直近の一段落目に、
ターゲットキーワードを入れておく方が良いそうです。

SEO的な表示順位アップの効果だけでなく、
検索エンジンに表示されたときの文章についても、
よりまとまりやすくなるようです。

”かなり”効果的というほどではないですけれど、
それなり効果があります。

とても効果があるのは、
やはりtitleタグにキーワードを入れることです。

小見出しについて

はじめまして。いつも参考にさせていただいております。

h1~h4で文字のサイズなどを設定するのは分かりました。
しかし小見出しの左側につくちょっとした強調枠のようなものはどのようなタグで入れればよいのでしょうか?
CSSでの設定の方法など教えていただけるとありがたいです。

↓ここの水色部分のようなやつです。
http://www.dotup.org/uploda/www.dotup.org631520.jpg

こちらのブログですとこの赤くふちどった部分。
http://www.dotup.org/uploda/www.dotup.org631534.jpg

線を引く方法

小金さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

水色や赤色の線は、
CSSというものを使って装飾しています。

CSSをご存知でいらっしゃらない場合は、

当ブログでも連載して書いていますので、
道なりにご覧いただくと、よろしいかもしれませぬ。

CSS入門
 →http://kumacrow.blog111.fc2.com/blog-entry-337.html

ちなみに、線に関する装飾は、
borderというものを使用します。

罫線を描く【border】:CSS入門
 →http://kumacrow.blog111.fc2.com/blog-entry-266.html


少し簡単にお話しすると、
CSSファイルを作成して、次のように書けばできます。

h3 {
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}

これは、h3タグの左と下に、
1px、実線、黒色の罫線をひく指定になります。

ご参考までに。(*'‐'*)

お礼

わかりやすく教えていただき助かりました。
教えていただいたことを参考にやってみたいと思います。

ありがとうございました。

お気軽に

小金さん、こんにちは!( ・∀・)ノぐもに
コメントありがとうございます。

進めていく過程で、何かご不明なことがあれば、
お気軽にコメントしてくださいませ。

では、ではー。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/241-0af89ea9
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて