マークアップをはじめよう。漸ノ篇

2回ほど脱線した記事を書いてしまったので、3日ぶりの「マークアップをはじめよう」編です。
前回は架空のタグである、発言タグをつかってマークアップを説明しましたが、今回は実際にHTMLでつかえるタグをつかってマークアップをしていきましょう。

HTMLにはバージョンによって若干書き方が違うのですが、基本的に新しいもの好きなので本ブログでは基本的にHTML5での記述を心がけていきたいと思います。

四郎くんは「こんなもの本当の寿司じゃない」と言いました。

今回も例によってこちらの文章をマークアップしていきます。

はじめにメモ帳等のテキストエディタに上記の文章をコピーして、適当な名前で保存しましょう。HTMLファイルなので拡張子は.htmlにしてください。僕はsushi.htmlを言う名前で保存します。

ちなみにこの時点でこのファイルをブラウザで開いてみると、

f:id:kimizuka:20131207225751p:plain

こんな感じです。いわゆるひとつの文字化けです。
思わず気持ちがめげそうになりますが、ぐっと耐えてマークアップしていきましょう。

文章の中でHTMLの部分をブラウザに教えてあげるためのタグです。
すなわち基本的に文章全体がHTMLタグに囲まれることになります。

先ほどの文章をHTMLタグでマークアップしてみましょう。

<html>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</html>

f:id:kimizuka:20131207225751p:plain

まだブラウザの表示は変わりません。

タグではないですが、重要です。

例えば、どんな名捕手でも投手が何を投げるのかがわからなければ捕球できません。
そのため野球では捕手が投手にサインを出したり、投手が捕手にサインを出したりしてどんなボールを投げるのか認識をあわせています。

それと同じように（若干違うかもしれませんが）、僕らもブラウザに対して、
「今からHTMLを書くよー！」的な宣言をしなければHTMLははじまりません。

ドキュメントタイプ宣言にはいくつか種類があるのですが今回は、

<!DOCTYPE html>

と書きましょう。
これは DOCUMENT TYPE は html 的な宣言で、「これからHTML5を書くよー！」的な意味になります。

なので、

<!PITCHETYPE curve>

と伝えたらカーブを投げてくれる投手もいるかもしれません。（たぶんいないです）

とにもかくにもHTMLを書く際は最初にDOCTYPEを宣言しましょう。

<!DOCTYPE html>
<html>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</html>

f:id:kimizuka:20131207225751p:plain

まだまだブラウザの表示は変わりません。

宅急便における「伝票」と「荷物」。
プロダクトにおける「説明書」と「本体」。
パック寿司における「パックに貼ってある原材料とかが書いてあるシール」と「寿司」。

そんな関係がHTMLにおける headタグと bodyタグです。（違うかも）

文章の中でHTMLに対する説明を書いてある箇所はheadタグで囲み、
文章の中で本文にあたるところはbodyタグで囲みます。

とりあえず、本文をbodyタグで囲ってみましょう。

<!DOCTYPE html>
<html><body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body></html>

見にくいので改行してみます。

<!DOCTYPE html>
<html>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

ここで重要ことは、

の2点です。

四郎くんは「こんなもの本当の寿司じゃない」と言いました。

という文章はHTMLであり、そのなかのbodyなので上記のような記述になります。

また、改行に関してはブラウザのためでなく人のためにいれています。
基本的にブラウザはタグとタグの間の改行を認識しません。
（と断言したら語弊があるかもしれませんが、ここでは一旦そういうことにして話をすすめます）

またこの文章の中にはHTMLに対する説明的な文章がないのでheadタグで囲むものがありません。
なので一旦、空のheadタグをいれておきましょう。

<!DOCTYPE html>
<html>
<head></head>
<body>四郎くんは「こんなもの本当の寿司じゃない」と言いました。</body>
</html>

ここで重要なことは、タグは空でも駄目じゃないということです。

小説で「」と、何もはいってない括弧があったり、漫画でなにも書いてない吹き出しがあったりするのと一緒です。（違うかもしれませんが）

んで、ここまで書いたものをブラウザで見てみると、

f:id:kimizuka:20131207225751p:plain

俄然表示は変わりません。
表示は変わりませんが大分長くなってきたので今回はここまでにして、つづきは爻ノ篇でお送りしたいと思います。

みかづきブログその3