見出しタグを知る

書籍には見出しが付いています。
ウェブページにも見出しを付けてあげたら、何のことに付いて書かれたページなのか、よくわかるようになりますよね。

本を立ち読みするとき、ざっと内容を知ろうとするとき、ペラペラとページをめくって、見出しや小見出しを目で追う思います。
ウェブページでも同じことができるように作っていくことが、ユーザにとって使いやすいページになると思いませんか？

こんな風に現実とインターネットの世界をリンクさせて、ウェブページを作っていくと、使いやすいページ、Web標準に準拠したページに、１歩も２歩も近付くことができると思うんです。

ウェブページには、見出し用のタグがあります。
h1属性、h2属性などです。h6属性まで定義されていますよ。
そんなに使わないと思いますけどね（笑）

下のソースのように使えばよいのですが、ひとつだけ、注意があります！
それはh1属性は、同一ページで１回しか使ってはならない！ということです。

大抵の場合は、h1属性、h2属性で十分間に合うと思います。
よく使っても、h3属性まででしょうね。

h1属性を「大見出し」h2属性を「小見出し」と思えば、同一ページ内でh1属性を複数回使おうとは思いませんよね。

さぁ、基本ソースコードに下のソースコードを追加して、表示確認をしてみてくださいね。

　：
　略
　：
<body>
<h1>SEO（サーチエンジン最適化）</h1>
<h2>対策１：ソースコードの簡素化</h2>
<div>従来式のレイアウトテクニックにテーブルレイアウトがある。今日では、従来式のレイアウトから脱出しようとする脱テーブルレイアウトの風潮が追い風を受けている。ソースコードの簡素化がSEO対策の一つとして有効だからだ。</div>
<h2>対策２：タグの最適化</h2>
<div>ソースコードを簡素化するだけでなく、適切なタグを使ったコーディングは、SEO対策として威力を発揮する。見出しには見出し用のタグを使い、リストにはリスト用のタグを使う。タグの役割は、見栄えだけの問題では無いのだ。</div>
</body>
　：
　略
　：

下図のような表示になりましたか？

表示例

まぁ！なんて味気ないページでしょう。
読む気も失せますね（笑）
XHTMLのタグで、Web標準に準拠した構造で書くと、こんな味気な～いページになってしまうんですよ。

ん？がっかりですか？
そこで登場するのが、CSS（スタイルシート）なんですよ！

ん？font要素（fontタグ）とかで色々できるじゃん？ですって？
うーん。使っちゃ駄目なんですよ！
ここでは、XHTML1.1の規則に沿って、ウェブページを作っています。
XHTML1.1ではfont要素は廃止になっているんですよ。
それに、XHTML1.0やHTML 4.01Strictでも非推奨になっています。
CSSでできること、見栄えに関することは、CSSに担わせる！というのがWeb標準の指針なんですね。

このことは、頭の片隅にでも置いておいてくださいな。
この味気ないページも、CSSを使えば、素敵に変身するってことです。
変身する方法は･･･
⇒ [参照] 見出しをデザインする

<< 外部CSSと外部Javascriptの設定 | | リストタグを知る >>