【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の終了タグがある。タグの順番が非常に重要である。
- pタグ開始
- spanタグ開始
- spanタグ終了
- 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タグを終了している。 これは誤った記述である。このファイルの構造は次の通りである。
- pタグ開始（親要素開始）
- spanタグ開始（子要素開始）
- pタグ終了（子要素が終了する前に親要素を終了しているのでエラー！！）
- spanタグ終了
XML文書のルール 子要素の終了タグの前に、親要素の終了タグは記述できない
このルールは絶対的に重要である。
001<p>
002 IORI <span>Web Site</span>
003</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>
002 IORI
003 <span>Web Site</span>
004</p>
文字列「IORI」と「Web Site」を改行して記述した。 このファイルをWebブラウザで開くとどうなるだろう。
IORI Web Site
このように表示する。文字列「IORI」と「Web Site」は改行しない。 ファイルで改行しても、Webブラウザでは改行が反映しない。 ファイルに記述した内容が、そのままWebブラウザに表示するわけではない。 WebブラウザはHTML文書のルールに従ってファイルを解釈して、 画面に表示する。
改行した文字列をWebブラウザで表示する場合、 別のタグを記述する必要がある。
属性と値
タグの属性と値について学習する。 サンプルを掲載する。
001<p class="iori">IORI</p>
・・・難しい。
<p class="iori">
この部分は、pタグの開始タグである。 HTMLタグにはタグ名の他に、 様々な情報を記述できる。 今回、pタグに追加した情報は、
class="iori"
この部分である。
属性と値 属性 = "[値]"
開始タグに情報を追加する場合、「 属性 = 値 」という形で記述する。
| 属性 | 値 |
| class | iori |
<p class="iori">
このタグは、「pタグにclass属性を追加して、class属性の値をioriに設定した」 と言う事ができる。 Webブラウザは、 タグに記述された情報を参考にして、画面を表示する。
別のサンプルを掲載する。
001<p id="run-iori">IORI</p>
このタグは、 「pタグにid属性を追加して、id属性の値をrun-ioriに設定した」 と言う事ができる。
解説は以上である。
