HTMLは、表現したい(公開したい)文章を、意味あるブロック(塊)に分割し、
それぞれのブロックの位置づけを明らかにします。
そのブロックの範囲を明確にする識別子(記号)を「タグ(tag)」と呼びます。
タグは、
括弧(「<」と「>」)および括弧で囲まれた文字の並びです。
例えば、以下がタグの例です。「熊本大学」という文が、
<strong> 及び </strong>というタグで囲まれています。
<strong>熊本大学</strong>
タグに関する共通の約束を以下に示しますので忘れないようにして下さい。
- タグの名前は要素名
タグの名前(識別子)は「要素名」と呼びます。
上の例のタグでは、strong が要素名になります。
- <要素名>表現したい内容</要素名> という形で記述
<要素名>を「開始タグ」、
</要素名>を
「終了タグ」と呼び、
表現したい内容を開始タグと終了タグで、きちんと囲む必要があります。
終了タグには、
「/」スラッシュが要素名の前に入っていることに注意して下さい。
(註) 要素の多くは開始タグと終了タグの一対が必要ですが、例外的に、終了タグの無い要素ものもあります。
そのようなタグは、説明時に注意します。
- タグを構成している基本的な文字は、すべて半角文字で記述
タグを作っている「<」、「>」、要素名、終了タグの「/」は、
すべて半角文字で記述する必要があります。(後述する「属性名」も半角文字です。)
(註) 秀丸エディタでHTMLファイルを作るときは、
タグの部分は、本文と色が異るため見ただけで区別できます。もし、
色が本文と同じ(黒)であれば、
間違って全角文字でタグを書いていると思われます。
- 要素に「属性」を付加することが可能
タグに、特定の機能を追加するために、属性を付加することができます。
属性を付加するには、
開始タグを <要素名 属性名="属性値"> という形式で記述します。
その例を次に示します。
<a href="http://www.el.kumamoto-u.ac.jp/">熊大情報教育ページ</a>
上の例で、開始タグは以下のように構成されていることになります。
- 要素名：a
- 属性名：href
- 属性値：http://www.el.kumamoto-u.ac.jp/
属性を追加するときは、以下のことに注意して下さい。
- 要素名と属性名は、半角スペースで区切る
- 属性名と属性値は、半角文字のイコール「=」でつなぐ
- 属性値は、半角文字の引用符「"」で囲む
- 属性名は必ず半角文字で記述するが、
属性値は状況に応じて大文字と小文字を使ったり、
日本語を含めることもできる
属性は複数指定することも可能です。例えば、
<a href="http://www.el.kumamoto-u.ac.jp/" target="_blank">
熊大情報教育ページ(新規ウィンドウで表示)
</a>
と hrefに加えて、target (表示場所の指定) を属性として加えることができます。
target属性は、独自につけた名称をもったフレームやウィンドウに表示することや、次のような登録済の名前を利用することもできます。
- _top：フレーム表示を解除し、ウィンドウ全体に表示
- _black：新しいウィンドウを開き、表示
登録済の名前には、_self, _parentもあります。その動作を調べてみてください。
HTMLファイルの基本的な構造は、下図のようになっています。
まず、html要素 (<html> ? </html>) により全体が囲まれていることで、
文書全体が HTML(のブロック)であることを示しています。
次に全体が、head要素 (<head> ? </head>) と
body要素 (<body> ? </body>) で、
2つのブロック(塊)に分けられているのが分ります。
head要素は、その文書の基本情報を指定する部分で、
基本的にここに書いた内容はWebブラウザ画面に表示されません。
ただし、図中のhead要素中にある title要素 (<title> ? </title>) は、
例外で、Webブラウザの最上部やタブ部に表示されるWebページ名を記述します。
body要素は、HTMLファイルをWebブラウザで開いたとき、
実際にWebブラウザに表示される内容を記述する部分です。
ここで示した4つのタグは、HTMLの最も基本的なタグですので、
HTMLファイルを作るときには、必ず書くようにして下さい。
ところで、上の図では、4つのタグが、お互いの包含関係が分かるように、
インデント(行の先頭の字下げ)が行っています。
html要素は、全体を取り囲む最大のものですので、行の先頭から書かれており、
それに含まれる head要素と body要素は、
行頭から少しインデントして書かれています。ただし、
head要素とbody要素は包含関係としては同列(同等)ですので、
同じレベル(行頭からの長さが同じ)のインデントになっています。
最後に、title要素は、head要素に含まれるため、
head要素より更にインデントして書かれています。
また、対応する開始タグと終了タグは、それぞれ同じレベルから書かれているので、
どこから始まって、どこで終っているのかが分りやすいですね。
これらのインデントにより、論理的な包含関係(階層構造)が、
見ただけですぐ分りますから、タグを間違って書くことが少くなります。
実は、HTMLでは、「半角空白」と「改行」は、
区別無く「空白」として取扱われますし、
「複数の空白」は、「1個の空白」として取扱われます。
例えば、下の２つのHTMLファイルは見た目は、随分違いますが、
実際にWebブラウザで読みこむと全く同じ表示をします。
つまり、HTMLの文法上は、どちらも全く同じものと扱われます。
論理的な包含関係の把握や開始タグと終了タグの対応の把握等が容易ですので、
皆さんは、上の図の書式を基本にして書くことを強く勧めます。
をクリックし、修正したHTMLファイルを再度読み込み、再描画させましょう。
