「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

順番に見ていきましょう。
まずは予備知識として「HTML」と「タグ」について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

HTMLは「ホームページのファイルの書き方ルール」です。
専門用語で「マークアップ言語」と呼ばれるやつです。
詳細は、用語「HTML」の説明を ご覧ください。



タグは「目印」です。
元々の意味は「付箋」とか「荷札」とか、そんな感じらしいですけどね。
「目印」と解釈した方がイメージしやすいと思います。



以上を踏まえて

ホームページの内容に意味付けをするための「目印」

が「HTMLタグ」です。

例えば、そうですね。

ホームページのファイルに

あああ<b>ここは太字になります。</b>いいい

と書いたとしましょう。

そうすると、実際にホームページを表示したときには

あああここは太字になります。いいい

のような見た目になります。
「<b>」と「</b>」で囲んだ部分が太字になっていますよね。

これは、ホームページの世界では「『<b>』と『</b>』で囲んだ部分は太字になる」というルールがあるからです。
言い方を変えると、太字にしたい部分には目印として「<b>」と「</b>」を付けるのです。

この話で登場した「<b>」と「</b>」がHTMLタグ（のひとつ）です。
ホームページの内容に意味付けする「目印」です。

……というのが大雑把な説明です。

次に、もう少しだけ細かい部分を説明します。
余裕がある方は頑張って読んであげてください。
脳みそから煙が出そうな人は無理する必要ありません。
ゆっくり休んでください。



あっ、読んでくださるのですね。
ありがとうございます。

それでは、いってみましょう。

例えば、そうですね。
ピヨ太君が以下の文章を書きました。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

この文章をホームページに載せるために、HTMLのルールに従ってマークを付けました。
ピヨ太君がマークを付けた結果は、以下の通りです。

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>

少し大雑把に説明しますが「<h1>」「</h1>」で囲まれた部分は、HTMLのルールでは「これは大見出しですよ～」の意味になります。
同様に「<h2>」「</h2>」で囲まれた部分は「これは小見出しですよ～」の意味です。
「<p>」「</p>」で囲まれた部分は「これは本文ですよ～」の意味になります。

ピヨ太君の書いた文章は、HTMLのルールに沿ってマークを付けたことで以下のような意味合いになりました。

■ピヨ太とは（←これは大見出し）
(1)見た目（←これは小見出し）
愛嬌は多分ある（←これは本文）

(2)性格（←これは小見出し）
イイ性格（←これは本文）

(3)経済状況（←これは小見出し）
庶民レベル（←これは本文）

おぉ、なんか文章の構造が分かりやすくなりましたね。

さて、この文書ファイルをWebブラウザ（ホームページを見るときに使うソフト）で見ると、どうなるでしょうか。

実は、ホームページを見るソフトが、HTMLのルールに沿って付けられたマークに注目することで、文章の構造を判断してくれます。
そして、勝手に見た目を整えてくれるのです。
例えば「これは見出しか～。じゃあ目立つように表示してやるか」みたいなことをやってくれます。

その結果、ピヨ太君が書いた文章（にHTMLのルールに沿ってマークを付けた）

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>

は、ホームページを見るソフトで表示すると

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

のような見た目になります。

参考までに、HTMLのマークを付けていない文章は、以下のように表示されます。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

いかがでしょう。
見た目が違いますよね。
これは、ホームページを見るソフトが、文書構造を判断して、見た目を整えてくれているからです。

流れとしては

１．文章を用意する
２．HTMLのルールに沿ってマークを付けることで、文章に意味付けをできる
３．ホームページを見るソフトが、HTMLのマークを見て構造を判断し、見た目を変えてくれる

となります。
これがホームページが表示されるときの基本的な流れです。

そして、この話で登場した

HTMLのルールに沿って付けられたマーク

がHTMLタグです。
具体的には「<h1>」「</h1>」「<h2>」「</h2>」「<p>」「</p>」の部分です。

上の方の説明で、HTMLタグの例として「<b>」と「</b>」を挙げました。
ホームページのファイルに

あああ<b>ここは太字になります。</b>いいい

と書くと、実際に表示したときには

あああここは太字になります。いいい

のような見た目になるやつです。

このHTMLタグの説明をしたときに

ホームページの世界では「『<b>』と『</b>』で囲んだ部分は太字になる」というルールがある

と言いました。
これは、ちょっとウソです。

厳密に言えば「<b>」と「</b>」は「ここは太字だよ！」を意味するHTMLタグです。
あくまで意味付けの話なので、実際の見た目とは関係ありません。
実際に太字になって見えるのは、ホームページを見るソフトが気を利かせて太字にして表示してくれているからです。

そこまで気にする必要は ありませんけどね。
厳密には、HTMLタグは

HTMLのルールに沿って、文章に意味付けするための目印

です。
気が向いたら、頭の片隅にでも置いておいてあげてください。