kmath1107 > HTML > HTMLの概説

2012/11/17 HTMLの概説

HTMLとは "Hyper Text Markup Language" の略である. タグ (tag) と宣言 (declaration) とその他の文字列によって文書を構成する. タグとは、 <body>, </body> のような文字列のことである. < で始まり > で終わるものと, </ で始まり > で終わるものがある. XHTML の場合は < で始まり / > で終わるものもある. 宣言には, <!-- This is a comment. --> などがある.

タグは, <p>This is a pen.</p> のように書く. <p> と, </p> で何かをはさむ形にする. <div><p>This is a pen.</p></div> のように, タグを入れ子にすることができる場合もある. また, <hr> (あるいは<hr />)のように, 対を成さないタグもある.

タグではなくて単に不等号を書きたいときは, &#60;, &#62; と書けばよい. これで <, > が出る.&lt;, &gt;でも同様に<, >が出る。 アンパサンド (&) を出したいときは、&#38;と書くか, &amp; と書けばよい.

ところで, <p>This is a pen.</p> のように書いたものをp要素 (p element) という. <p>から</p>までの部分である. <hr>あるいは<hr />をhr要素 (hr element)という. head要素, meta要素, body要素, div要素, blockquote要素なども同様の意味である.

HTMLの大体の書き方としては, html要素が一つだけあり, その中にhead要素, body要素があるようにする. (本当は先に DOCTYPE 宣言を書くものだが,それは HTML を十分に習得した後でよい.) head要素にはさらにmeta要素,link要素, title要素を入れる. 特にtitle要素は必須である. 文字 code 指定も必ず入れるようにしよう. body要素にはさらにh1要素, h2要素, h3要素, hr要素, p要素, div要素などを入れる. p要素の中にようやく本文を書く. 次に簡単なHTMLドキュメントの例を挙げておこう. meta要素のcontent属性の属性値text/html; charset=euc-jpの部分は 文字codeにより text/html; charset=Shift_JISなど適当なものに書き換えないといけない.

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>挨拶</title>
</head>
<body>
<h1>あいさつ</h1>
<p>
本日はとても良い天気です.
今後とも皆様の安寧を願います.
</p>
<p>
良い天気とは何でしょう.
晴れ, 曇り, 雨, 雷, 雪, その他多様な天気があります.
何が良い天気かは場合によるでしょう.
</p>
</body>
</html>

これを file に書いて保存し browser で開くと sample001.html の頁にあるものができる. この例でもやはり html 要素が一つあり, その中に head 要素と body 要素一つずつがある. head 要素の中には meta 要素と title 要素がある. body 要素の中には h1 要素一つと p 要素が二つある. p は paragraph(s) の頭文字で, つまり段落が二つある. h1 は見出し (heading) を意味する. 見出しには h2, h3 などもあり, h1 が最も大きい見出しで h2 は h1 の下位の見出しで h3 は h2 の下位の見出しになり, h4, h5, h6 も同様である.

body 要素の中に入る要素には, inline 要素と block 要素がある. body 要素内の要素はすべて inline 要素と block 要素のどちらか一方か両方になる. div, p, h1, h2, h3, h4, h5, h6 は block 要素である. span, em, strong, a, img は inline 要素である. 単なる文字列もまた inline 要素である. HTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1 などでは, body要素直下にscript要素を除く inline 要素を置けないことには注意しなくてはならない.

いきなりこのように書かれても理解するのは難しいと思われる. とりあえず, 先に挙げた例のように書けば良い. 段落の前に <p> を書き, 段落の後に </p> を書く.