## タグに関する基礎知識

トップ > ホームページ入門 > タグに関する基礎知識

#### ■ 目次

- ホームページのひな型
- HTML文書
- ヘッダ部
- タイトル
- 本文
- タグ
- タグの包含関係
- 属性

#### ■ ホームページのひな型

大半のホームページは、次のような構造をしています。

HTML文書 ヘッダ部 本文 | ┬─ │┌ ─┤ │└ │┌ ─┤ │└ └─ | <html> <head> <title>タイトル</title> </head> <body> 本文 </body> </html>

#### ■ HTML文書

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

#### ■ ヘッダ部

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

#### ■ タイトル

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

#### ■ 本文

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

#### ■ タグ

<html> や <head> などを タグ、html や head などを タグ名 と呼びます。タグ名にはヘッダ（header）→ <head>、改行（break）→ <br> など、英語のスペルを元にした名前が付けられています。

多くのタグは <b>〜</b> のように 開始タグ と 終了タグ で囲みます。開始タグのタグ名にスラッシュ（/）をつけたものが終了タグです。たまに、<br> のような 単独タグ もあります。

タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。以前は大文字で記述することが多かったですが、最近では小文字で記述することが多くなっています。< の後に空白があってはなりません。

    ○ <html>
    ○ <HTML>
    × ＜ｈｔｍｌ＞　　← 全角文字は駄目
    × < html>　　← <の後に空白を入れては駄目

#### ■ タグの包含関係

開始タグ〜終了タグは、他の開始タグ〜終了タグの完全に外側か、完全に内側でなくてはなりません。例えば、<s>〜</s> を記述する場合、次のようになります。

    ○ <s>〜<b>〜</b>〜</s> ← 完全に外側
    ○ <b>〜<s>〜</s>〜</b> ← 完全に内側
    × <b>〜<s>〜</b>〜</s> ← 包含関係が崩れている

#### ■ 属性

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

    ○ <font color=red size=5>〜</font>
    ○ <input type=checkbox checked>

属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行が必要です。属性を複数指定することも可能です。

    ○ <font color=red>〜</font>
    ○ <font COLOR=red>〜</font>
    ○ <font color=red size=7>〜</font>

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

    ○ <font color=red>〜</font>
    ○ <font color=RED>〜</font>
    × <a href="xx.html" target="_TOP">〜</a>

属性の値に半角の英数字以外の文字を使用する場合は、"..." か '...' で囲んでください。正確に言うと、半角英数字以外にも、ハイフン（`-`）、ピリオド（`.`）など一部の記号は囲まなくても良いのですが、最初の内は「記号はクォーテーションで囲む」もしくは「属性値は常にクォーテーションで囲む」と覚えておいた方が無難でしょう。

    ○ <font size="+2">〜</font>
    ○ <font size='+2'>〜</font>
    × <font size=+2>〜</font>
    △ <font size=-2>〜</font> ← ハイフンは囲まなくてもいいけど・・・

ダブルクォーテーション（`"`）の中ではシングルクォーテーション（`'`）を、シングルクォーテーション（`'`）の中ではダブルクォーテーション（`"`）を用いることができます。

    ○ <input type=button onclick="alert('XXX')">
    ○ <input type=button onclick='alert("XXX")'>
    × <input type=button onclick="alert("XXX")">

ダブルクォーテーション（`"`）を &quot; と表記することもできます。

    ○ <input type=button onclick="alert(&quot;XXX&quot;)">

Copyright (C) 1997-2002 杜甫々
初版：1997年3月30日、最終更新：2002年3月3日
http://www.tohoho-web.com/wwwbeg2.htm