Last Update : 03/13/2003
HTML基礎講座 :: HTMLの骨組みと注意
HTMLの骨組み
基本的な形
<html>
<head>
<title> ページのタイトル </title>
</head>
<body>
ここに書いたものが、ブラウザに表示されるぜ
</body>
</html>
HTMLページには、上のように決まった形がある。
この、「<html></html>」「<head></head>」「<title></title>」「<body></body>」ってセットは、ひとつのHTMLページにそれぞれ一つしかかけないし、基本的に省略も出来ない。順番も変えらんない。
で、『なんでそんなに厳しいの』って？ それは、上のヤツを、人の体だと思ってみよう。
基本の形＝人体？
ちょうど、人体とHTMLの基本形はこんな対応が出来る。
- <html>
- ヒトのはじまり
- <head>
- ここから頭
- <title>
- 顔を描くぞ
- タイトル
- 顔の中身
- </title>
- 顔終わり
- </head>
- 頭終わり
- <body>
- ここから胴体
- 中身
- 内臓
- </body>
- 胴体終わり
- </html>
- ヒトの終わり
これなら、勝手に増やしたり位置を変えたり出来ない理由がわかるだろ？ 頭が胴体にめり込んでたり、内蔵が頭の中にあったりしたら不気味だって！
あと、「<title> ページのタイトル </title>」は、ヒトの顔にあたる部分で、ここに書いたページのタイトルはブラウザのタイトルバーに表示されたり、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりする大事なものだから、絶対に書いておこうぜ。
このうまーい例を考えてくれたのは、みけねこさんです。サンクス！
HTML要素とルール
タグと呼ばれるもの
今までに「<html>」「<head>」「<title>」「<body>」なんて記号が出てきたけど、これが、“タグ”って呼ばれてるヤツ。
正式な名前は“要素(element)”っていって、< > の中の html や body を“要素名”、それ以外に < > の中につくものを“属性(attribute)”って表現する。
この要素ってのは、上の例を見れば分かるだろうけど、「<html>」と書いたら、それに対応する「</html>」ってのが出てくる。これと同じく、ほとんどの要素には“開始タグ”と“終了タグ”ってのがあって、<要素名> ってのが開始タグ、</要素名> と、要素名にスラッシュ(/) をつけたものが終了タグになる。
なんで開始タグと終了タグなんてのがあるかというと、要素の適用範囲を示すためなのさ。例えば文字を太字にする <b> を使ったとする。このとき、</b> と終了タグを書いて、『ここからここまでが太字』って示しておかないと、ページの文章全部が太字になるだろ？ そのせい。
でも、要素の中には、終了タグが省略可能な <p> <tr> <td> なんてものもある。でも、最近のXHTMLって仕様書には『省略すんじゃねぇ』と書かれてるし、省略するとトラブルの原因になることもある。だから、出来るだけ省略しないようにしとこう。
あと、要素の中には、空要素って呼ばれる終了タグが無いものもある。<img> とか <br> とか。こういった要素を使うときに </img> とか </br> なんて終了タグを書くと、『HTML覚えなおしてね』とツッコまれるから気をつけてな。
要素の書き方の注意点
- <HEAD> や <head> のように、大文字でも小文字でもどっちでもいい（XHTMLでは小文字）けど、必ず半角英数字で書くように。＜ＨＥＡＤ＞みたいに、全角文字で書いたらダメ。
- < head> なんて、< と要素名の間に空白を入れたらダメ。
- <b> … <s> … </b> … </s> なんて、終了タグの位置を間違えちゃダメ。
<b> … <s> … </s> … </b> みたいに、一つの開始タグと終了タグは、他の開始〜終了タグの完全に外側か、完全に内側にいれること。
<font size="4"> なんて、要素に属性を入れる場合
- 要素名とそれぞれの属性の間には、必ず半角スペースを入れる。 <fontsize=4> とか <fontsize=4color="#000000"> なんて書きかたはダメ。
- 色の指定など、属性の値に数字、アルファベット、ハイフン(-)、ピリオド(.)以外の文字を使用するときは、ダブルクォーテーション(")か、シングルクォーテーション(')で囲むのが正しい書き方。だから、<font color=#000000> じゃなくて、<font color="#000000"> ってするぜ。
で、<font size=3> とか <a href=xxxx.html> なんかは、引用符で囲む必要は無いんだけど、XHTMLでは『属性の値はすべて引用符で囲め』とされてるし、引用符で囲んでおいた方が後で修正するときにも分かりやすい。だから、できるだけ <font size="3"> とか <a href="xxxx.html"> と引用符を使おう。