この講座で、このページに初めて来られた方へ。本講座の目次があります。
注意：講座を書く順番が前後したため、講座４は未公開ですが内容は既習のものとして書いています。ご了承ください。
正式なHTML
「そろそろHTMLにも慣れて来たかな？」と思うのでここらで正しく読みやすいHTMLの書き方を学んでおきましょう。
「今までのは正しく無かったのか！」と怒られそうですね。確かに間違っては居ないのですが、ちょっとカタコトな感じのするHTMLです。
それに間違えがちなポイントもいくつかあるので、そのことにも触れて起きたいのです。
ブロックレベル要素はbody要素にいれよう！
body要素とは実際の文章の表示される部分そのものが含まれる要素です。
前々回で学んだブロックレベル要素、これらは全てbody要素の中に入っていなければなりません。そして、逆にbody要素のすぐ中にはブロックレベル要素しか入る事ができません。前回の講座でインライン要素はブロックレベル要素の中にだけ書くことを習いましたね。
title要素はhead要素にいれよう！
head要素は文章として直接表示するわけではない、文章に付随する情報が含まれます。
残ったtitle要素をhead要素の中に入れておきましょう。そして、head要素はbody要素よりも前に記述しておきましょう。
title要素はブラウザのタブや、タイトルバー、お気に入りの名前として表示されます。
html要素にhead要素とbody要素をいれよう！
そうして出来たhead要素とbody要素をhtml要素の中に入れます。すると、html要素の外に有るのはドキュメントタイプの宣言のみになるはずです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>タイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>
こんな感じですね。逆に、ここもhtml要素の中にはhead要素とbody要素しか入れることができません。
ところで、この例のhtml開始タグに変な属性がついてますね。なんか「lang="ja"」と書いてあります。これは、このhtmlが日本語の文章の属性をもっていますよ、ということです。
HTMLの論理構造
なぜこんなややこしいことをするのか。HTMLは文章に構造を持たせることで文章を意味づけしているからです。
HTMLの要素を、文章の一部分を入れる袋みたいなものだと考えましょう。
まず、大きなhtmlという袋があります。これを開けると、headとbodyというタグのついた袋があります。
headは文章の情報が入っている袋ですので、こっちの袋を先に開けてみましょう。titleの袋が入っていますね。titleの袋を開けてみるとこの文章が何について書かれているのか分かりました。
次に、bodyの袋を開けてみましょう。bodyには文章の本文が入っています。色々袋はありますが、とりあえず「ul」という袋が有りました。これは......覚えていますか？ 「順序の関係のないリスト」が入っていますね。
liという袋を開けるとリストひとつひとつの内容が入っていました。
このよう、小さい袋が大きい袋にすっぽり収まっていく構造がHTMLの最大の特徴です
ですから次のような構造は、正しいHTMLとは認められません。
<p>なんか文章<a>なんか文章</p>なんか文章</a>
なんか袋が破れちゃってますね。こんな袋はカラスの格好の標的になってしまうので気をつけてください。
その他、説明しきれなかったこと
他にもちょこちょことしてはいけない決まりが有ります。これはきちんとルールを覚えようとすると大変なので、ここでは大ざっぱに「これを守っておけば大丈夫」という感じのルールを選んでおきます。
- タグの要素名（titleとかpとかh1とか...）は半角小文字で書こう！
- 昔は大文字と小文字を区別しないことになってたので、大文字で説明してる先生も多いです。でも、最近新しくできたバージョンでは小文字で書くように決められていますので、みなさんは今から小文字で書く癖をつけておきましょう。
- 箇条書きは「ulやol」の中に「li」が入るけれど、その他のブロックレベル要素にはブロックレベル要素をいれない！
<p>なんか文章<p>何か文章</p>何か文章</p>
段落の中に段落が......よく分かりませんね。謎文章です。その他見出しの中に見出しだとかも謎文章です。こんな謎文章は書けません。
- HTML中にコメントをつけることも出来ます。
- <!-- コメントの内容 -->という記述でHTML中にコメントを書き込むことができます。
- Another HTML-lint gatewayで文法チェック！
- これだけの複雑なルールがあるのに全てを正確に書くなんてとてもない......。そんな心配もあるでしょうが大丈夫です。世の中にはAnother HTML-lint gatewayという素晴らしいサービスがあって、これはなんと自分が書いたHTMLをチェックして点数をつけてくれるのです。ただ、まだ今の知識では１００点を取ることは出来ません......。「よくできました」と評価がでたらまあOKでしょう！
章末問題
未制作。間違いを正して貰う問題でも作ろうかな......。
コメントする