ホームページのタグ講座

ページ全般

今回からはタグの基本について話しながらも、実際にホームページを作れるようにも説明していきたいと思います。
そのためのHTMLの書き方ですが、これまでに述べたタグの入れ子や使い方さえ間違っていなければ、何でも好きなように配置して良いというものではありません。
必須であり、基本でもあるホームページタグはもちろんあります。

まずは細かい説明は省きまして、以下が必須＆基本のホームページタグとその順番です。
（「～～～」と記述したところは任意の箇所です）

<!DOCTYPE HTML PUBLIC "～～～">
<html>
<head>
<title>～～～</title>
</head>
<body>
～～～
</body>
</html>

・・・以上。
ホームページ内どのページにおいてもこれらはセットとして書かなければいけないタグです。
それぞれのタグの説明は以下の通りです。

◆<!DOCTYPE HTML PUBLIC "～～～">
HTMLを書き始めるよりもいちばん最初にこれでDOCTYPE宣言をしなくてはいけません。
DOCTYPE宣言とは、ホームページが作られているHTMLのバージョンや仕様を定めることです。

◆<html>～～～</html>
どこからどこまでがHTML文書であるかを指定するタグ。

◆<head>～～～</head>
この中にはブラウザには表示されないページ情報などを記述します。
ページ情報とは、主にmeta・title・link、他JavaScriptやCSSなども。

◆<title>～～～</title>
そのページのタイトルやホームページ名などを記述するタグ。
ここに書かれた文はブラウザのタイトルバーや検索エンジンの検索結果に表示されます。

◆<body>～～～</body>
ページのブラウザに表示される部分を記述する箇所です。
ここに数々のタグを配置してホームページを作っていくことになります。

タグの種類

ホームページタグは大別すると以下の2種類となります。
例は実際にそれぞれのタグを使用した場合の見た目です。
枠はどの部分にタグを使用しているか分かるように付けただけですので、実際は任意に指定できます。

◆ブロックレベル要素
文書構造を指定する要素です。
開始タグと終了タグの箇所では自動的に改行が入ります。

例
ホームページ内で

ブロックレベル要素

を使用した場合

◆インライン要素
文章内で指定する要素です。

例
ホームページ内でインライン要素を使用した場合

ブロックレベル要素には使用範囲の幅や高さなどが指定できますが、インライン要素では指定できません。
ただし、インライン要素の一種に置換要素というものがあり、それに関しては幅・高さともに指定可能です。

以下はそれぞれのホームページタグ（一部）の一覧です。

◆ブロックレベル要素
div、h1～h6、p、table、ul、ol、dl、blockquote、form、hr・・・など。

◆インライン要素
span、a、em、strong、sup、sub、br・・・など。
（置換要素）
img、input、textarea・・・など。

ホームページタグの中には、特定のタグ同士を組み合わせて使用するものがあり、テーブルやリスト、またフォームタグがその代表です。
例えば、テーブルには少なくとも<table><tr><td>の三種類を組み合わせて使うのですが、それぞれを単独で使用することはできません。

タグの組み立て

ホームページタグにはいろいろな種類があり、HTMLはそれら複数を組み立てて制作します。
ひとつのテキストや内容に対して、タグは複数を併用することができます。
その場合の書き方は・・・

正：<span><a>テキスト</a></span>
誤：<span><a>テキスト</span></a>

正のようにタグで囲んでいるものを更に囲む形となります。
誤のように囲みの構造を交差させてはいけません。
囲んでいるものを更に囲むようにと繰り返していくと、次のようになります。

例

タグの中にタグが入っている状態を「入れ子」といいます。
上の例では分かりやすいように所々改行していますが、ソース内において改行位置は任意となっています。
また、タブでインデントさせてもページの見た目に影響はありませんので、ご自分の編集しやすいよう、入れ子の状態など分かりやすく記述するといいでしょう。

ちなみに、終了タグを書き忘れてもブラウザによっては自動判別して表示してくれるものがあります。
そのようなブラウザで見た目を確認しながらホームページを制作している場合、間違いに気づかないまま作業を進めてしまい、別のブラウザ使用者は閲覧できないという状態になってしまいかねないので、ホームページタグ記述の際には充分注意してください。

見出し

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

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

◆見出しタグ（<h1>～<h6>）

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

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

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

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

タグの構造

ホームページ制作の経験がある人向けに、タグの使い方からいずれは専用サーバについても説明していこうかと思っていましたが、せっかくなので、おさらいがてら基本も述べていこうかと思います。

HTMLソースはタグの組み合わせによって書きます。
ではタグとは何かというと・・・

この場合「テキスト」という文字を囲んでいる英字がそうです。
文字より先の<a>を開始タグ、後の</a>を終了タグといい、このタグに何か指定を加えることで中の文字を装飾したりできます。
たとえば・・・

開始タグの中にこのような指定を加えました。
この場合、

a　←タグ名（要素）
href=”"　←属性
#　←値（属性値）

・・・という構造になります。
属性はひとつのタグの中に複数指定することができます。
例えば・・・

タグと属性には全角文字は使えません。
必ず半角英字での記述となります。
半角英字であれば大文字小文字どちらでも記述できますが、XHTMLでは大文字は使用できないのでご注意ください。

また、値を囲むダブルクォーテーションは、値が数字のみの場合などは省略可能です。
しかし、こちらもXHTMLでは必須となりますので、全ての場合においてダブルクォーテーションで囲んでおくようお勧めします。

ほとんどのタグでは開始タグに対し終了タグを必要とします。
一部、終了タグを必要としないタグもありますが、それについてはまた後ほど。

テーブル

テーブル（表）構成する基本のタグは<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を使用しましょう。

強調と非推奨タグ

文章中の特定のテキストを強調させるためのタグは<em>と<strong>の二種類あります。
それぞれ、指定したテキストは斜体・太字で表示されますが、これらはあくまでも「強調」の意味を持つタグで、見た目を斜体や太字にするためのタグではありません。

ちなみに強調の度合いは、<em>が低く、<strong>が高くなっています。
とはいえ、こちらは見出しタグのように使用順序が定められているわけではありませんので、自由に使用できます。

見た目を斜体や太字にするためのタグといえば、以前は<i>や<b>、またテキスト装飾のためのタグとして<u>などがありました。
・・・いえ、今もあるにはあります。使うことは可能です。
しかし現在の傾向として、こうした装飾のためだけのタグは使用しないよう意識が高まっています。

というのも、装飾はタグではなくCSSにおいてするものだからです。
現在、HTMLを記述するときは、タグは文書構造を整えるためだけに使い、テキストの装飾や配置などレイアウトや見た目（デザイン）に関することはすべてCSSで行うことが適切とされています。
これは、データをダビングしたり後々の編集を容易にするためでもありますが、何よりseo対策のホームページ制作に重要であるため。

そのため、上に挙げた装飾タグなどは現在では非推奨要素とされており、同じ理由で属性にも非推奨とされているものがあります。
以下は、一部ですがその一覧。

◆非推奨要素
center、font、i、b、u・・・など。

◆非推奨属性
bgcolor、background、align、border、width、height、link、vlink、alink・・・など。

序文

個人でホームページを制作する人が多くなりましたね。
ホームページはテキストエディタ（メモ帳など）でも簡単に作れますから、初心者用ホームページの作り方として非常に魅力的です。
僕も、最初はその簡単さに惹かれて個人サイトを作り始めました。
最初、HTMLやタグに関してはまったくの独学だったのです。

専門的な教えを受けたわけではありませんが、それでも形にはなるホームページ。
しかし仕事でホームページ制作を手掛けるようになって、僕のHTMLタグの知識は間違いだらけだということに気づいたのです。

タグはただページの見栄えを形作るためのものではありません。
文書構造に沿って適切なタグを使用しなければいけないのです。

現在個人でホームページを制作している皆さん、あなたのタグの使い方は正しいですか？
タグ本来の役割とは違う使い方をしていませんか？

このブログでは基本的なタグの正しい書き方について説明していきます。
ホームページは簡単に作成できるものだからこそ、知らないうちに間違いも起こしやすいものです。

例えば、先ほど「タグはページの見栄えを形作るためのものではない」と述べました。
確かに、配置を整えたり色を指定したりとタグで見栄えを作ることはできるのですが、それは今や間違ったタグの使い方となっています。

HTMLにおいて、タグは文書構造を整えるためのものです。
見栄えを整えるのはすべてCSS（スタイルシート）で行わなければなりません。

未だにフォントタグ（<font>～</font>）や太字タグ（<b>～</b>）等を使っているあなた、今こそ、正しいタグの使い方を学んでホームページを作りなおすときですよ！

CATEGORIES

LINK

META