ホームページのタグ講座 » ホームページ講座・タグの基礎

タグの種類

ホームページタグは大別すると以下の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>

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

例

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

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

タグの構造

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

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

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

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

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

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

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

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

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

強調と非推奨タグ

文章中の特定のテキストを強調させるためのタグは<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・・・など。

CATEGORIES

LINK

META