要素 (タグ)

コードを 図にしてみる

師匠

前回、実行したHTMLコードを、下に書いておいたで。

<!DOCTYPE html>
<html>
	<head>
		<title>
			Sample
		</title>
	</head>
	<body>
		Hello!
	</body>
</html>
師匠

これを 説明するわな。

弟子

はい。

師匠

左のコードを 分かりやすい図 にすると、右みたいになる。

<!DOCTYPE html>
<html>
	<head>
		<title>
			Sample
		</title>
	</head>
	<body>
		Hello!
	</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
      Sample
</title>
</head>
<body>
      Hello!
</body>
</html>
弟子

ふむ。

師匠

ざっと見た印象は?

弟子

複雑。

師匠

HTMLのコードを読むにはコツがある。

要素(element)とタグ(tag)

師匠

<> の注目する。

師匠

<> で囲まれたものを、 要素 (element) または タグ (tag) と呼ぶ。

師匠

上のコードだと、
<html><head><title></title></head><body></body></html>
要素(タグ)や。

師匠

厳密に言うと、要素 と タグ は別の意味で、区別して使うべきや。
でも、世間一般では 混同されとる。
さらに、 どーでも良いことでもある ので、初級のうちは その違いを気にせんでええ。

師匠

で、HTML言語は、このタグ(要素)で書いていく言語や。
だから、いろんな種類の要素の使い方を覚えることが、HTMLを習得することになるんや。

弟子

要素って、何種類くらいあるんですか?

師匠

HTML5の場合、108種類や ( ← 煩悩(ぼんのう)の数と同じ )。

弟子

多いですね。。。

師匠

ま、そのうち30種類くらい覚えておけば、そこそこのページができるんじゃないか?

弟子

じゃ、30種類を覚えれば終わりですか?

師匠

終わるわけが無かろ? Webは、奥が深いねん・・・。

開始タグ と 終了タグ

師匠

もう一回、コードを図式化したのを 書いておくで。

<!DOCTYPE html>
<html>
<head>
<title>
      Sample
</title>
</head>
<body>
      Hello!
</body>
</html>
師匠

<html>みたいなのを 開始タグ</html>みたいのを 終了タグ と呼ぶ。
終了タグは、</ で始まるわけや。

師匠

上のコードやと、<html><head><title><body> が開始タグ、
</title></head></body></html> が終了タグや。

師匠

で、<html></html><head></head> みたいに、同じ要素の 開始タグと終了タグを ペアで使う
ペアで作ったブロックを()()にしていくのが、基本や。

弟子

?

師匠

上の例だと、<!DOCTYPE html>は とりあえず無視して。。。
一番大きいタグのペアは、<html></html> やな。

師匠

その中に、<head></head>と、<body></body>が、入れ子になっているな。
つまり、 <html>に、<head><body>という 二人の子供 がいるみたいなもんや。

師匠

そして、<head>の下には、<title>という がいる。

師匠

つまり、こんな感じや。

師匠

大事なことは、下のHTMLコードを見て、上のような関係を見出すことや。

<!DOCTYPE html>
<html>
	<head>
		<title>
			Sample
		</title>
	</head>
	<body>
		Hello!
	</body>
</html>
弟子

。。。

師匠

ま、慣れやな。

<!DOCTYPE html>

弟子

一行目の <!DOCTYPE html> は、何ですか?

師匠

これは、枕詞だと思って、いつも書く。常に書く。
以上。

弟子

(オッサン・・・)

師匠

HTMLにも バージョンがあるんや。
今の主流は、バージョン5。
略して、 HTML5 と呼ばれている。

師匠

で、<!DOCTYPE html>は、「このファイルは、HTML5の形式で書いてありますよ~」という宣言をするものや。
たぶん、書かなくても問題ないが、一応 礼儀として、常に書いておく。

師匠

なお、ここに <!DOCTYPE HTML PUBLIC "-//W3C//DTD...> みたいな、長ったらしい呪文を書いてある場合がある。
これは、バージョン4とかの古い形式やから、気にしなくて良い。
<!DOCTYPE html> と書けば、間違いない。

師匠

あと、<!DOCTYPE html>に終了タグが無いことに注意。
終了タグが無いタグは。。。あとで説明するわ。

弟子

難しくなってきたな。。。

復習

  • <> で囲まれた文字列は、要素(タグ)。
  • 要素(タグ)には、開始タグと終了タグがある。 (例: <html></html>
  • 要素(タグ)は、入れ子にしていく。
  • 一行目には、<!DOCTYPE html> を書く。