HTML講習4 - tsuge development page

一つ前

[id:tsugehara:20060620:1150772500]

概要

結局書くだけ書いて、後日2時間用に編集しなおした方がいいという結論になった。
図説も特に用意していないので、最終的には愛すべきMicrosoft Wordのお世話になる予定なのだが、この時にA4 20ページ以内に抑えられるよう努力すればいいかなと。
まあブロックとインラインさえわかればいいので、属性なんかの説明ははしょってもいいのかもしれない。
本書の記述に辺り、例によって水無月ばけら氏のサイトを非常に参考にさせていただいた。一部どうしても改変が難しく、パクリっぽくなってしまった箇所も残っている。この場を借りてお礼とお詫びを申し上げる。

本文(HTMLの言語（文書）構造) 後編

それ以外の要素

インライン要素とブロック要素以外に定義付けた基本要素と子要素について見て行きます。
基本要素は、HTMLの基本的な構成を定義します。
これは以下の要素です。

HTML 要素
HEAD 要素
BODY 要素

HTML文書はHTML要素で始まり、HTML要素内のHEAD要素内で文書のヘッダを定義し、HTML要素内のBODY要素内で文書の本体を記述します。
これらの要素は文書内に一度だけしか記述出来ません。

子要素は便宜上名付けただけですが、ある要素の下にしか記述することが出来ない要素と定義付けます。
HEAD要素の下のTITLE要素、OLやUL要素の下のLI要素などが子要素になります。
厳密にはPやDIVなどの要素は「BODY要素の子要素」と位置付ける事も出来るのですが、これは記述が長くなりすぎるので、分類としては前述の４分類としています。

定義済み要素

では、実際にHTMLで定義されているいくつかの要素を例にとって解説したいと思います。
HTMLは厳格な言語ではないので、記述は比較的自由に出来ます。この方針のため、終了タグを省略出来る要素というものが存在していますが、本書では全てのタグに終了タグを付ける事を推奨し、終了タグの省略できる要素については明記しません。
ちなみにHTMLでは終了タグを「禁止」している要素も存在します。これを以下に列挙します。

HR要素
BR要素
IMG要素
INPUT要素
LINK要素
META要素
PARAM要素
FRAME要素
BASE要素
NEXTID要素
COL要素
AREA要素
BASEFONT要素

これらの要素についても、本書では終了タグの記述を推奨します（例：<br />）。理由はいろいろとあるのですが、現時点では「終了タグを記述しても害がない」点、並びに「多くのマークアップ言語では全ての要素で終了タグが必須になっている」点を覚えておけばいいでしょう。
あくまでも推奨なので、上記要素についてはHTML準拠の意味合いから終了タグを省略するかかどうかの判断は、読者にお任せします。

もう一つだけ。
HTMLで記述する要素には、中に含めることの出来る要素というのが決まっています。
例えばP要素はブロック要素ですが、中にブロック要素を含めることは出来ません。
この制約については要素ごとに設定されているので、各要素の冒頭に明記しておきます。

P要素

分類	中に記述出来る要素
ブロック要素	インライン要素

Pは段落を表す要素です。
通常の文章は、段落ごとにPでくくっていけばいいでしょう。日本語的にはBRを使用しての改行は行わず、このPのみで文章を構成するべきと言えます。
なお、内部にインライン要素しか含めることが出来ないため、<P><DIV></DIV></P>は誤まった使い方です。この場合、PはDIV要素が出現した時点で効力を失い、終了タグは無視されます。

DIV要素

分類	中に記述出来る要素
ブロック要素	インライン要素とブロック要素

DIVは汎用的なブロック要素です。基本的に中にはなんでも含めることが出来、例えば「目次」「本文」「索引」ごとに構成する場合、次のような構成が考えられます。

<h1>サンプル</h1>
<h2>目次</h2>
<div class="contents">
 <ol>
  <li>目次１</li>
  <li>目次２</li>
 </ol>
</div>

<h2>本文</h2>
<div class="description">
 <p>本文の段落１</p>
 <p>本文の段落２</p>
</div>

<h2>索引</h2>
<div class="index">
 <table>
  <thead>
   <tr>
    <th>項目１</th>
    <th>ページ数</th>
    <th>項目２</th>
    <th>ページ数</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>索引１</td>
    <td>1</td>
    <td>索引２</td>
    <td>2</td>
   </tr>
  </tbody>
 </table>
</div>

HTMLでは自分で要素を定義することが出来ないので、独自のブロック要素を作る場合はDIV、独自のインライン要素を作る場合は今回記述はしませんが、SPANを使うことになると思います。
DIVは入れ子に出来るので、スタイルシートのmarginやpaddingを適切に設定すれば、見やすく整形されたテキストも作りやすくなります。
ただし既に定義されている意味の要素が別にある場合、無闇にDIVやSPANを乱用せず、BLOCKQUOTE要素やSTRONG要素等を、効果的に使うよう心がけた方がいいでしょう。

HR要素

分類	中に記述出来る要素
ブロック要素	無し。常に空です。

誤用のNo1に挙げられるのが、このHRとBLOCKQUOTE要素です。
HR要素はブロック要素です。つまり下記の用法は出来ません。

<p>
<hr />
</p>

Pはインライン要素しか含めることが出来ないので、もしこれで意図した表示が行われていてもそれはブラウザのバグです。
また、HRは確かに線を引くための要素ですが、デザイン的に使用するべきではありません。「線を引け」という漠然とした命令に対する解釈は完全にブラウザの依存となるので、デザイン的な制御が難しいためです。デザイン的な意図で使用する場合、多くのブラウザで共同解釈出来るCSSを記述する労力を、覚悟しておく必要があるでしょう。

A要素

分類	中に記述出来る要素
インライン要素	A要素以外のインライン要素

これぞHTMLと言えるアンカーのための要素です。アンカーとは錨の意味だそうで、リソースを結びつける様をアンカーという言葉で表現しているようですが、要はハイパーリンクを記述するための仕組みです。ある意味でHTMLはこのA要素を書くために考案された言語とも言えます。
属性のhrefでリンク先を記述し、テキストでそのリンク先のタイトルを記述する方法が一般的でしょう。
これはインライン要素なので、当然以下の使い方は出来ません。

<a href="http://hogehoge/">
<p>
 <b>hogehoge</b>
</p>
</a>

こう書きましょう。

<p>
<a href="http://hogehoge/">
 <b>hogehoge</b>
</a>
</p>

BR要素

分類	中に記述出来る要素
インライン要素	無し。常に空です。

強制的に改行を行う要素です。
使用をよく見かけますが、本来使うべきではありません。
段落は前述のPやDIVで表しましょう。それでは不都合な場合、CSSで都合のいい表示形態にしておくべきです。

<p>段落１<br />
段落２</p>

上記は、本来こうするべきです。

<p>段落１</p>
<p>段落２</p>

ただしこれはHTMLの構造上のべき論であって、簡単な文書を構築する際BR要素が使いやすいのも確かです。
そうあるべきだがこうした、という確かな理由を持てるようであれば、本書は特にBRの使用を制限することはしません。私も「<」や「>」を何度も打つのが面倒くさいので、遠慮なく使っています。

B要素

分類	中に記述出来る要素
インライン要素	インライン要素

文字を太字にする要素です。「物理スタイル要素」とも呼称されます。
文書的に意味がなく、唐突に「ここは太字にしろ」と伝えるだけなので、使用はあまりするべきではありません。後述のSTRONG要素等の使用が推奨されます。
とは言え、STRONGとBだと文字数で6倍も違いますよね。閉じタグを入れたら実に10文字も違うわけで、CSSを構築するのも面倒で、ブラウザで表示出来ればいいだけの簡易な文書に、わざわざSTRONGを使う意味はありません。
ただし文書的に意味は全くないので、ちゃんとしたHTMLを構築したいなら、やはり使用は避けるべきでしょう。

STRONG要素

分類	中に記述出来る要素
インライン要素	インライン要素

文字を「より強く強調する」要素です。B要素とは反対に「論理スタイル要素」とも呼称されます。STRONGより弱く強調する要素は解説はしませんがEM要素で、こちらも論理スタイル要素です。通常EM要素は斜体で表現されます。
STRONG要素は、ブラウザでは通常文字を太字にして表示します。スタイルシートを適用していない環境では、BとSTRONGに表示上の違いを見受けることは出来ません。
それでもSTRONGの適用が推奨されるのは、STRONGが文書的に意味を持っているからに他なりません。
例えば音声朗読の場合、B要素だとどうしたらいいのかわかりませんが、STRONG要素は強調して読み上げればいいと理解出来ます。ありえないかもしれませんが、HTML文書を動画で流すようなソフトが作成された時、Bだと太字にされるだけかもしれませんが、STRONGだと何か演出が入ったりするかもしれませんね。強調すればいいのですから、解釈は自由だということです。
この自由な解釈こそHTMLで本来するべき表現なのですが、その詳細な記述は本書の範疇ではないため割愛します。太字にするならSTRONGを使うことが推奨されている、と覚えておけばいいでしょう。

ちなみにそんなに強く強調したくない場合、EM要素のスタイルシートを設定して、EM要素を太字、STRONG要素は文字サイズを大きくして太字、などにすると、より満足のいくHTMLが構築できるかもしれません。

CENTER要素

分類	中に記述出来る要素
ブロック要素	ブロック要素とインライン要素

非推奨要素、つまりHTML的に使わない方がいいよと言われている要素です。
Netscape社が独自に定義していた要素ですが、HTML3.2から「<div align="center">」の略記として正式に採用されました。
現在はDIVのALIGN属性そのものが非推奨になったので、CENTER要素も非推奨です。
スタイルシートを活用しましょう。

PRE要素

分類	中に記述出来る要素
ブロック要素	IMG,OBJECT,APPLET,BIG,SMALL,SUB,SUP,FONT,BASEFONT以外のインライン要素

何やら制約の多い要素ですが、一般的に「整形済みテキスト」と呼ばれる要素です。改行やスペースをそのまま表示に反映させることが出来ます。
プログラマーであれば、この要素内にソースコードを貼り付けるなどの使用方法を経験したことがあるでしょう。
勘違いされる事が多いのですが、インライン要素は記述出来ます。A要素も指定出来るので、基本的にHTML的な表記はPRE要素内でも許されているのです。
また、&や<などは、通常のテキストと同じように&、<と表記しなければなりません。PRE要素は文字をエスケープするための要素ではないのです。

まとめ

本項ではHTMLで定義されている要素を具体的に解説することで、よりHTMLについての知識を深めました。
要素ごとに個性があることを認識し、中には非推奨な要素というものが存在することもご理解いただけたでしょうか。
残念ながらTABLEやFORMなど、HTMLの軸となるいくつかの要素や、乱用されているが実は非推奨であるFONTなどの要素について、本書だけでは解説しきれません。
HTMLについてのよりエレガントな使用方法を理解するために、既にオンライン上にもいくつか文献が出ていますので、そちらを確認しつつ理解を深めていただければと思います。

あとがき

こんな感じか。
子要素がないが・・、口頭で言い訳すればいいか。:p
しかし前々から思っていたことだが、私のまとめ力の低さに脱帽するな。
長すぎるぞ。