IORI online School

JavaScript、html、css の無料学習サイト

【Web 入門講座】HTMLタグを記述するためのルール

[Web 入門講座]HTMLタグを記述するためのルール

本講座では「タグの記述ルール」を学習する。

タグとは何か

前講座で記述したファイルの内容を確認する。

001<p>IORI</p>

ファイルに、 「<p>IORI</p>」 と記述した。 このファイルをWebブラウザで開く。

IORI

このように表示する。ここで頭が混乱する。 ファイルに記述した内容が、Web画面に表示しない。 Webブラウザに「IORI」と表示したが、「<p>」と「</p>」はどこへ行ったのだろうか? なぜ、つぎのように表示しないのだろう?

<p>IORI</p>

このように表示しないのはなぜだろう? 「<p>」と「</p>」 は表示しないのだろうか?

HTML文書のルール タグはWebブラウザ上に表示しない

タグはWeb画面に表示しない。 では、タグとは何か?

タグとは<」と「>」で囲まれたもの

小なり記号「<」と、 大なり記号「>」で囲まれた文字は、 「タグ」と言われる。

001<p>IORI</p>

<p>は「<」と「>」で囲まれている。 これは「pタグ」と言われる。 タグはWebブラウザに表示しない。pタグはタグの一種なので、 Webブラウザに表示しない。 HTML文書で利用するタグは、pタグの他にも数多く存在する。 他のタグも例示する。

タグ タグ名 構造
<html> htmlタグ HTML文書のルートタグ
<body> bodyタグ Webブラウザ上に表示するタグ
<span> spanタグ 文章の途中で挟むタグ

「<」と「>」で囲まれた文字は、全てタグとみなされる。

HTML文書は、タグを記述しながら作成する。 そのため、どのタグがどのような機能を持っているのか把握する必要がある。

さらにタグには、非常に重要なルールがある。 そのルールを解説する。

タグのルール 開始タグと終了タグがセット

タグは開始タグと終了タグがセットで存在する(最近だと終了タグを省略する記法もある)。

開始タグ 終了タグ
<html> </html>
<body> </body>
<p> </p>
<span> </span>

開始タグ タグ名を「<」と「>」で囲む。

終了タグ タグ名を「</」と「>」で囲む。

終了タグは、タグ名を「</」と「>」で囲む。 もう一度、今回作成したファイルを見る。

001<p>IORI</p>

pタグの開始タグと終了タグの間に、 文字列「IORI」が記述されている。

このファイルは、このように表現できる。 さて、このファイルをWebブラウザで開いても、 <p>も </p>も表示しない。 ただ、文字列「IORI」が表示するだけである。

基本的に、タグはWebブラウザに表示しない。

タグを記述するルール

タグのルールを解説する。

001<p>IORI Web Site</p>

このファイルは、文字列「IORI Web Site」をpタグで囲んでいる。 pタグは文章を記述する時に利用するタグである。 一般的に文章を記述する時、その文章をpタグの開始タグと 終了タグで囲む。

001<p>IORI <span>Web</span> Site</p>

pタグの中にspanタグが存在する。 このように、タグの中にタグを記述できる。 このファイルを詳しく解説する。

001<p>IORI <span>Web</span> Site</p>

まずpタグの開始タグがある。

001<p>IORI <span>Web</span> Site</p>

つぎに文字列「IORI」が続き、spanタグが存在する。

001<p>IORI <span>Web</span> Site</p>

spanの終了タグがある。

001<p>IORI <span>Web</span> Site</p>

最後に、pの終了タグがある。タグの順番が非常に重要である。

  1. pタグ開始
  2. spanタグ開始
  3. spanタグ終了
  4. pタグ終了

このような順番になっている。

子要素 タグの中にタグがある場合、 中のタグを「子要素」と言う。

pタグの中にspanタグが存在する場合、 「spanタグはpタグの子要素」と言う。 この時、「pタグはspanタグの親要素」と言える。 親要素も子要素も、今後利用し続ける用語である。

XML文書のルール 子要素の終了タグの前に、親要素の終了タグは記述できない

このルールは絶対的に重要である。 このルールに合致しないファイルを掲載する。

001<p>IORI <span>Web Site</p></span>

まずpタグが開始する。 つぎに、spanタグが開始する。 この時、「spanタグはpタグの子要素」と言える。

001<p>IORI <span>Web Site</p></span>

このファイルは、子要素spanタグを終了する前に、 親タグのpタグを終了している。 これは誤った記述である。このファイルの構造は次の通りである。

  1. pタグ開始(親要素開始)
  2. spanタグ開始(子要素開始)
  3. pタグ終了(子要素が終了する前に親要素を終了しているのでエラー!!
  4. spanタグ終了

XML文書のルール 子要素の終了タグの前に、親要素の終了タグは記述できない

このルールは絶対的に重要である。

001<p>
002  IORI <span>Web Site</span>
003</p>

HTML文書はこのように改行して記述する事ができる。 一般的には、改行して記述する。 念のため解説する。1行目でpタグが開始する。 2行目で文字列「IORI」があり、 さらにspanタグが開始する。 spanタグは、pタグの子要素と言える。 2行目の最後でspanタグを終了する。 3行目でpタグの終了タグを記述する。

IORI Web Site

ファイルをWebブラウザで開くと、このように表示する。

001<p>
002  IORI
003  <span>Web Site</span>
004</p>

文字列「IORI」と「Web Site」を改行して記述した。 このファイルをWebブラウザで開くとどうなるだろう。

IORI Web Site

このように表示する。文字列「IORI」と「Web Site」は改行しない。 ファイルで改行しても、Webブラウザでは改行が反映しない。 ファイルに記述した内容が、そのままWebブラウザに表示するわけではない。 WebブラウザはHTML文書のルールに従ってファイルを解釈して、 画面に表示する。

改行した文字列をWebブラウザで表示する場合、 別のタグを記述する必要がある。

まとめ

HTML文書のルール タグはWebブラウザ上に表示しない

タグとは<」と「>」で囲まれたもの

タグのルール 開始タグと終了タグがセット

開始タグ タグ名を「<」と「>」で囲む。

終了タグ タグ名を「</」と「>」で囲む。

子要素 タグの中にタグがある場合、 中のタグは「子要素」と言われる。

XML文書のルール 子要素の終了タグの前に、親要素の終了タグは記述できない