タグで定義
下の入力例は、はじめに
基本的な流れ
3.編集と確認で作成したテキストファイルです。
をクリックすると確認用のページが表示されますので確認してみてください。
my_first_web.html
はじめてのウェブページ
うまく表示されるかな。
このテキストファイルをブラウザで開くと、入力したはずの空行や改行が無視され、全て1行で表示されてしまいます。この入力例にタグというものを追加して段落を指定してみましょう。
上の入力例を次のように変更(追加)します。日本語以外の追加された部分(太字の部分)は全て半角英数で入力してください。
入力し終わったら、保存して確認しましょう。
my_first_web2.html
<p>はじめてのウェブページ</p>
<p>うまく表示されるかな。</p>
自分が入力したものと結果が異なる場合は、入力ミスの可能性があるので、ミスを直して保存し、再度ブラウザで開いてください。
入力したテキストのうち、不等号「<」と「>」で囲まれたものは表示されないことに気が付かれたと思います。また、「<p>」と「</p>」の間にあるテキストは1つの段落になっています。
タグとは
上の例のように、「<」と「>」で囲んだものをタグといい、具体的に「<p>」なら「<p>タグ」と呼ばれます。また、「<」の直後に「/」があるものを終了タグ、ないものは開始タグといいます。
開始タグと終了タグで囲まれた部分は何かの役割や意味を定義(指定)されます。上の例のように「<p>」と「</p>」で囲まれていたなら、段落として定義され、通常、ブラウザでは改行され、1行分の空行を設けて表示されます。
HTML/XHTMLではこのようなタグが多く用意されており(といっても標準で80個くらいで、通常使用するのは20〜30程度です)、これらのタグを使用してテキストなどに何かの意味を定義してWebサイトを作成していきます。
尚、ほとんどのタグは英語を略したものや、頭文字を取ったもの、あるいは、英語そのものになっています。段落は英語で「paragraph」(パラグラフ)なので、上の例でのタグの意味は簡単に推測できると思います。
まとめ
- <と>で囲んだものをタグ
- <xxx>が開始タグ、</xxx>が終了タグ
- 開始タグと終了タグによって囲まれた部分が何かの意味を定義される
- <p>で段落を定義