2010年11月9日火曜日

ホームページを作ろう - 1.12 ブロックとインライン

1.12 ブロックとインライン

これまでいくつかの要素を見て来ましたが、Webページとしてブラウザ上に表示される部分は、body要素の内容として記述しました。ここに色々な要素を指定しますが、これまでのものは大きく分けて2種類に分類されます。
ブロックレベル要素
ブロックレベル要素は、矩形(四角)として表現される文章を意味する要素群です。これまでに出て来た要素の中では、見出し要素、段落要素が、このブロックレベル要素に分類されます。通常、ブロックレベル要素の前後は自動的に改行されます。
インライン要素
インライン要素は、文章内の一部分の構造を表現する要素です。これまでの学習で出て来た要素では、改行要素、字句要素が、このインライン要素に分類されます。
この要素群の分類は、とても重要です。インライン要素をブロックレベル要素の中に記述することは可能ですが、その逆はできないからです。
<p><b>正しい記述</b></p>

<b><p>誤った記述</p></b>
このサンプルの場合、1行目は正しいが、2行目は誤った記述となっています。しかし、ブラウザで表示すると、どちらも問題なく表示してしまいます。多くのブラウザは、このような誤りをチェックすることができないのです。

ブラウザは、ページを閲覧のために表示することが最大の目的のソフトウェアであり、文法チェックをすることが目的ではないからです。この点は、十分に注意してください。詳しくは、「XHTMLの文法チェックをしよう」を参照してください。

さて、前にも簡単な部分は説明しましたが、XHTML(HTML)の文法は、DTDによって規定されています。言い換えれば、DTDを読むことがXHTML(HTML)の文法を理解することになる訳です。

ところで、DTDを読む前に、もう少し、例を見てみましょう。まずは、ブロックレベル要素同士の場合です。ブロックレベルの要素の多くは、その内容にブロックレベルを持つことはできません。つまり、段落要素の中に見出し要素を記述したり、あるいはその逆の記述はできないのです。
<p>段落1−1<h1>見出し</h1>段落1−2</p>  誤った記述
一部の例外はありますが、インライン要素の中にインライン要素を記述することは可能です。
<code><b>字句</b></code>  正しい記述

<b><code>字句</code></b> 正しい記述
さて、次回からは、いよいよDTDの読み方について解説します。

0 件のコメント:

コメントを投稿