タグに関する基礎知識

1998年7月19日版

ホームページのひな型

ほとんどのホームページは、次のような構造をしています。

HTML文書

ヘッダ部

本文

┬─
│┌
─┤
│└
│┌
─┤
│└
└─

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
本文
</BODY>
</HTML>

HTML文書

<HTML>で始まって</HTML>で終わるこの書き方をHTML(HyperText Markup Language)と呼びます。HTMLの規則に従って書かれた文書をHTML文書（あるいはHTMLファイル、HTMLソース）と呼びます。すべてテキストエディタで記述できる点が通常のワープロ文書と異なります。

ヘッダ部

<HEAD>～</HEAD>の部分をヘッダ部と呼びます。ヘッダ部にはタイトルなどを記述します。

タイトル

<TITLE>～</TITLE>でタイトルを書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、必ず記述するようにしましょう。

本文

<BODY>～</BODY>の部分が本文です。この部分がブラウザのウィンドウ枠に表示されます。この部分に、や、 、などを使用して飾り付けをおこなっていきます。

<HTML>や<HEAD>などをタグ、HTMLやHEADなどをタグ名と呼びます。タグ名には header → <HEAD>、break → など、英語のスペルを元にした名前が付けられています。
タグはほとんどの場合～のように開始タグと終了タグで囲みます。開始タグのタグ名にスラッシュ（/）をつけたものが終了タグです。たまに、 のような単独タグもあります。
タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。また、<の後に空白があってはなりません。

　　○ <HTML>
　　○ <html>
　　× ＜ＨＴＭＬ＞　　← 全角文字は駄目
　　× < HTML>　　← <の後に空白を入れては駄目
開始と終了は、他の開始～終了タグの完全に外側か、完全に内側に無くてはなりません。例えば、<S>～<S>タグを記述する場合、次のようになります。

　　○ <S>～～～</S> ← 完全に外側
　　× ～<S>～～</S> ← 終了タグのみを挟んでいる

属性

の COLOR=red のように属性を伴うものがあります。属性は多くの場合 属性名＝属性値 という形式で記述します。たまに 属性名 だけ指定すればよい場合もあります。(正確には、CHECKED=CHECKED の属性名が省略されているそうなのですが・・・)

　　○ ～
　　○ <INPUT TYPE=checkbox CHECKED>
属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行をいれてください。

　　○ ～
　　○ ～
属性値も多くの場合大文字・小文字どちらでも構いませんが、ごくたまに大文字・小文字を区別する場合（TARGET="_top"など）があります。

　　○ ～
　　○ ～
　　× <A HREF="xx.html" TARGET=_TOP>～</A>
属性の値に半角の英数字以外の文字を使用する場合は、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにしましょう。（正確に言うと、半角英数字以外にも、ハイフン(-)、ピリオド(.)など一部の記号はクォーテーションで囲まなくても良いのですが、最初の内は「記号はクォーテーションで囲む」とおぼえておいた方が無難でしょう。）

　　○ ～
　　○ ～
　　× ～
ダブルクォーテーション( " )の中ではシングルクォーテーション( ' )を、シングルクォーテーション( ' )の中ではダブルクォーテーション( " )を用いることができます。

　　○ <INPUT TYPE=button onClick="alert('XXX')">
　　× <INPUT TYPE=button onClick="alert("XXX")">
どうしても両方を使用したい場合は、ダブルクォーテーションの代わりに " を指定します。

　　○ <INPUT TYPE=button onClick="alert("X'X")">
複数の属性を指定したい時は、ひとつ以上のスペースまたはタブまたは改行のあとにもうひとつの属性を記述します。順番は関係ありません。

　　○ ～