2006.08.09

HTMLのいろは。

一番初歩的なことをあげておきます（笑）
HTMLファイルとはそもそもなんぞや？

HTMLってそもそもなーに？

一口で言ってしまうと、「構造指示書」でしょうか。
例えば、このページを右クリックして、「ソースの表示」とすると、なんだかアルファベットの羅列が表示されると思います。これがHTMLファイル。シンプルなテキストファイルなので、例えばWindowsに付属のメモ帳などでも書けちゃいます。
ちなみに私は秀丸派。DreamWeaverなどのツールもたま～に使いますが、最近はとんとご無沙汰です。

実際にHTMLだけではテキストしか表示されません（イメージは読み込めます）。下の記事をそのまま表示させると、こんな感じ↓ になります。

味も素っ気もない。（＾＾；
ということで、イメージを読み込み、スタイルシートを読み込み、場合によってはJavaScriptを読み込んだりするのです。その指示書というか、司令塔がHTMLファイルになります。

2つで1つ

<html>
　<head>
　　～
　</head>
　<body>
　　～
　</body>
</html>

これがベースになるソース。本当は一番上の <html> のさらに上に、文書型宣言が入ります。
<head> ～ <head> の中には、文書自体の定義情報が含まれます。定義情報というとちょっと難しいですが、要は裏方さん。ページタイトルや検索に引っ掛けるためのキーワードなどなど、あるいはスタイルシート・JavaScriptなどもここで定義します。
<body> ～ <body> の中には、実際に表示させるテキスト、イメージその他もろもろが入ります。

<html>, <head> を「タグ」、と呼びます。<html> と </html> はセットになり、タグはタグでも <html> を「開始タグ」、 </html> を「終了タグ」と呼びます。常に2つで1つで行動します（そうじゃないはぐれタグも中にはいます・笑）。

タグのお作法

上の例でいうと、< の直後にある img を「要素名（エレメント）」、 src, width, height, alt を「属性名（アトリビュート）」、/g/gogowebcreator/file/060109_1426~01.jpg, 240, 320, 銀ちゃんを「属性値」と呼びます。

記述は半角で

要素名と属性名の間、属性値と属性名の間は「（半角スペース）」で区切らなければなりません。
属性名と属性値は「=（半角イコール）」で結びます。
要素名・属性名とも半角小文字で。大文字で記述しても理解はしてくれますが、XHTML上では大文字と小文字は別物として扱われ、小文字で書くように定義されているので、大文字で書くと怒られてしまいます（笑）
ただし、文書型宣言はタグに似て非なるものなので、大文字が含まれます。
属性値は「""（半角ダブルクォーテーション）」でくくりましょう。こちらもくくらないでいると怒られます。

終了タグは省略しない。

過去のHTMLでは終了タグを省略してもOKとされてきましたが、XHTMLでは省略はできません。HTMLで書く場合もクリーンなコードを書くために、省略しないようにしましょう。

必須属性は必ず入れる

属性には、入れても入れなくても良いもの、必ず入れなければならないもの（必須属性）、逆に入れてはならないもの（非推奨属性）、に分類されます。
要素によって必須属性は異なります。例えば、リンクする時はリンク先、テーブル（表）の場合は表の中身（セル）、イメージの場合はイメージの参照先、などなど・・・。
要素によって変わってくるので、慣れないとどれが必須属性なのか判別は難しいかもしれませんが、考えてみればアタリマエ、というものばかりです。

順番に注意

タグの中にタグというネスト（入れ子）はできますが、開始タグと終了タグをまたいだ記述はできません。

<p>
　<span>
　テキスト
　</p>
</span>

p が開始されてから、span が開始され、span が終了しないままに pが終了して、その後 span が終了しています。これは×。

<p>
　<span>
　テキスト
　</span>
</p>

というのが正しい記述です。

空要素に注意

空要素、というと「？？」となりますが、普通タグは ほにゃほにゃ～ という風に、開始タグと終了タグの間に何かを含みます。が、この「ほにゃほにゃ～」の存在しないタグ、つまり「内容のない空の要素」という意味で、「空要素」と呼びます。
空要素の例としては、改行タグ 、水平線タグ <hr> などがあります。

HTMLとXHTMLの大きな違いが、この空要素に表れてきます。
　HTMLでは 、<hr> ですが、
　XHTMLでは 、<hr /> となります。

XHTMLでは終了タグが必要、というのは前述したとおりです。それを踏まえると、 と記述することになります。が、これだとブラウザによってはきちんと解釈してくれません。
XHTMLのベースとなっているXMLでは、 と記述するようになっていますが、これもやはりきちんと解釈してくれないブラウザがあるので、「/」の前に半角を入れ、 となります。

という訳で、前述した、
<img src="/g/gogowebcreator/file/060109_1426~01.jpg" width="240" height="320" alt="銀ちゃん">
はHTMLでの記述、XHTMLでこれを書くと、
<img src="/g/gogowebcreator/file/060109_1426~01.jpg" width="240" height="320" alt="銀ちゃん" />
となります。

これを実際に表示させると、
銀ちゃん
あはは～（笑）