[トップページへ] [←前のページへ] [→次のページへ]


HTML文書をメモ帳で作ってみよう

第06回:HTML文書をメモ帳で作ってみよう!6

HTMLの文書構造++

基本的な要素を覚えたところで、HTMLのもうすこし突っ込んだお話をしようと思います。

<html>
<head>
<title>
タイトルをここに記述します。
</title>
</head>
<body>
本文はここに書きます
</body>
</html>

今まで、本文はBODYに直接書いてきましたが、要素や、HTMLの記述に関して書かれている本などを見ると、 ブロック要素や、インライン要素といった記述があります。

インライン要素とは、BRやIMGのような要素のことで、ブロック要素の中にしか入れられません。
逆に、ブロック要素とは、HTMLやBODYのような要素のことで、中にブロック要素とインライン要素両方を含めても良いことになっています。

では、本文はインライン要素なんでしょうか?ブロック要素なんでしょうか?
答えはどっちでもありません。
とりあえず言えることは、「本文をいきなりBODYの中に書いてはいけない」ということです。

「え?じゃあ、今まで書いていたHTML文書は間違いなの?」と思うかも知れませんが、 HTML3.2という昔の取り決めでは、それでも良いことになっていたのですが、 HTML4.01という、新しい取り決めでは、インライン/ブロック要素を明確に分けて書きましょうということが言われたのです。

本文をBODYに置けないのなら、どれかの要素に入れないといけないのでは?と思った方はどれくらい居るでしょうか
こういうときのために、段落を示す要素、P要素が用意されています。

P要素は、パラグラフ、ひとつの段落のまとまりを示すインライン要素です。もちろん、P要素の中にブロック要素を含むことはできません。

本文を各々P要素に含めて、段落付けをしてみましょう。

<p>段落1です。<br>
いろんな文章がたくさん書かれていると思ってください。</p>

<p>段落2です。段落1との間に空白が空いているのが分かるでしょうか?</p>

P要素で囲んだ内容を、BODYの中に置けば、きちんとした正しいHTML文書であるということになります。

前回学んだTABLEの中のTD要素の中にも、文章を書きましたが、この場合はインライン要素もしくは本文を直接書き込むことが許されています。
本文と一緒に、インライン要素であるIMG要素も使うことができます。

<table>
<tr><td>表組みの中は文章をいきなり書けます。</td></tr>
<tr><td>画像も置けます。<img src="sakura.jpg" width="100" height="80" ALT="さくらの画像"></td></tr>
</table>

次回は、見栄えについて多少お話しようと思います。

Author: tkm / せかんどすたいる

[トップページへ] [←前のページへ] [→次のページへ]