3.Structure

3.1.「おまじない」について

ここで前回書いたXHTMLを見てみましょう。細かい理屈はどうでもいいやって人は、こういう風に書くもんだとだけ思って、次に行ってください。

<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>HTMLとは何か</title>
</head>
<body>
<h1>HTMLとは何か</h1>
<p>HTMLとは「HyperText Markup Language」の略です。直訳すると「ハイパーテキストをマークアップするための言語」ってところでしょうか。ようするに普通の文書をハイパーテキストにするための印の付け方(マークアップ法)を定めた約束事ってことです</p>
</body>
</html>

まず、最初の<?xml version="1.0" encoding="EUC-JP"?>から説明しますね。これはXML宣言といってサーバにその文書の文字エンコーディング情報を知らせる役割を果たします。ようするに文字化けを防ぐために書くわけです。ちなみに文字エンコーディングがUTF-8やUTF-16のときは省略出来ます。

次。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">の説明です。これは文書型宣言といって、その文書がどういう定義に従って書かれているかを示します。だからこれは書かないとダメです。書いてないと、どういう決まり事でその文書が書かれているか分からなくなってしまうからです。ちなみに例はXHTML 1.0 Strictに従っていますよって意味です。

次。<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">について。これはhtml要素を示すタグです。文書の内容は全てhtml要素の中身になります。この要素とその中身については、ちょっとややこしいのであとで説明しますね。「xmlns="~"」とか「xml:lang="~"」いうのはhtml要素の属性といって、その性質や補助的な情報を示すものです。xmlnsはXML名前空間を宣言する属性で、利用しているタグセットがXHTMLであることを示します。xml:langはその要素の言語コードを示します。例では日本語ですよってことを表しているわけです。langってのも同じです。

次。<head>から</head>までがhead要素です。その文書についての情報を書くところです。その文書のタイトルを書くtitle要素だけは必ず書かないとだめです。<title>から</title>までがそれですね。title要素は一般的なWebブラウザではウィンドウの一番上に表示されます。ちなみにhead要素には他にも要素を書いたりしますが、それらは全て省略可能です。よってここでは説明しません。

最後。<body>から</body>までがbody要素です。ここに本文を書きます。見出しとか段落とかリストとかを書くわけです。

3.2.「要素」と「属性」って何？

3.1.で要素と属性って言葉が出てきました。よく分からないと思うのでここで説明しておきます。例の如くスルーしても構いませんが、理解しておくといいことがあるかもしれません。

まず要素について。要素っていうのは、見出しとか段落などXHTML文書の各部分のことです。リストやテーブルなんかも要素です。その要素を示すために使うのがタグです。だから要素＝タグじゃないんです。よく混同している人がいるので注意してくださいね。で、タグには三種類あります。開始タグ、終了タグ、空要素タグの3つです。開始タグは要素の始まり、終了タグは要素の終わりをそれぞれ表します。つまり要素は「開始タグ、中身、終了タグ」の3つで構成されているわけです(図2.1)。空要素タグだけは少し毛色が違っていて、空要素がそこにあることを示すタグで、単体で要素になります。例を挙げると改行を示す<br />なんかは空要素タグです。

開始タグ+中身+終了タグ=要素
図3.1 要素とタグの関係図

次に属性について。前にも少し書きましたが、属性とは、要素の性質や補助的な情報を示すものです。属性は「属性="属性値"」の形式で書かれます。a要素のhref属性なんかが代表例ですね。どの要素にどんな属性があるのかは決められています。body要素にhref属性を指定したりとかはできないってことです。さらに、1つの要素に同じ属性を2回以上指定することはできません。<a href="~" href="~">とかはダメってことですね。

コラム -ブロック要素とインライン要素-

要素については前述した通りですが、要素はブロック要素とインライン要素の二つに分類出来ます。ブロック要素はブラウザで表示すると前後で自動的に改行されます。インライン要素はブラウザで表示したとき改行が入りません。これはあくまでブラウザでの表示上の違いです。

もっと重要な違いはブロック要素は文書の構造(見出し、段落など)を表すのに対して、インライン要素はブロック要素内の特定の部分に役割を持たせる(強調、ハイパーリンクなど)という点です。ブロック要素とインライン要素では役割が違うというわけです。

また、XHTML仕様書の上でも、例えばbody要素は直接インライン要素を中身にできないなどが決められています。よって、正しいHTML文書を書くためにも、その要素がブロック要素なのかインライン要素なのかしっかり理解しておくことはとても大切です。