見出し

ホームページタグの基礎についても説明するとはいっても、やはりこのブログの狙いは、間違ったタグの使用を正すことです。
とはいえ、今では1Uサーバーサーバー販売にに興味がある僕自身も、当初は間違えて覚えてホームページを作っていました。
そんな僕に皆さんを叱咤する権利はありません。
ぜひ一緒に知識を改めていきましょう。

今回は見出しタグについてです。

◆見出しタグ(<h1>~<h6>)

見出しを指定するタグは<h1><h2><h3><h4><h5><h6>の六種類あります。七つ目以降はありません。
これを指定したテキストは、属性での指定がない限り太字になり、<h1>がいちばん大きなフォントで、<h2><h3>・・・と数字が大きくなるにつれて小さなフォントで表示されます。
間違えてはならないのは、決してテキストの大きさを指定するタグではないということ。
これらはあくまでも見出しを指定するタグなのです。

使い分け方は、見出しの重要度です。
例えば見出しがそれぞれ章(大見出し)・節(中見出し)・項(小見出し)に分けられる場合、順番は以下のようになります。

<h1>章(大見出し)</h1>
<h2>節(中見出し)</h2>
<h3>項(小見出し)</h3>

ここで注意。
章・節・項の関係さえ間違っていなければ<h2>以下はひとつのページにおいて複数指定できます。
しかし、<h1>はページにおける最も大きな見出しとならなければいけないため、原則1ページにひとつか指定してはいけません。

また、<h1>のすぐ後に<h3>を使用するなど、途中にあるべき見出しをとばしての指定は適切ではありません。
1~6の順序をきちんと守って、正しい文書構造のホームページを作らなくてはならないのです。

テーブル

テーブル(表)構成する基本のタグは<table><tr><td>の三種類です。
<table>が外枠、<tr>が列、<td>がセルを意味し、例えば以下のように記述すると2行×3列の表ができます。

例(2行×3列)
<table>
<tr><td>セル1-a</td><td>セル1-b</td><td>セル1-c</td></tr>
<tr><td>セル2-a</td><td>セル2-b</td><td>セル2-c</td></tr>
</table>

ただ、これだけでも表は作れるのですが、これではそれぞれのセルが何を意味しているのか不明の表となってしまいます。
基本的に、表がデータテーブルの場合は見出し用のセルがなくてはいけません。
そのため、見出しセルのタグとして<th>の使用が望まれます。
<th>は<td>と同じように使えます。使用位置に制限はありませんが、それぞれのセルの見出しとなる位置でなくてはなりません。

例(3行×3列)
<table>
<tr><th>見出し</th><th>見出しa</th><th>見出しb</th></tr>
<tr><th>見出し1</th><td>データ1-a</td><td>データ1-b</td></tr>
<tr><th>見出し2</th><td>データ2-a</td><td>データ2-b</td></tr>
</table>

この場合、上1行と左1列が見出しセルとなり、中のテキストは太字で表示されます。
もちろん、こちらも太字にさせるためのタグではなく、見出しを指定するためのタグです。お間違えのないよう。

データテーブルではない場合は特に<th>にする必要はありません。
最初に挙げた三つのタグだけでも、ホームページを簡単に作成することができます。

しかし、データテーブルではないテーブルの使い方は、seo対策のホームページ制作のためにも適切ではないとされています。
なるべく、内容をリスト表示させるならリストタグを、ホームページのレイアウトを作るならCSSを使用しましょう。