HTMLって何だろう？

ソースとブラウザーのページでホームページはHTMLという言語で作られているという事をお話しました。
でも急にそう言われても、
「HTMLっていったい何なの？どうやって作るの？」
って思いますよね？

そこで、ここではHTMLの仕組みと、その作り方についてお話していきます。

まず、HTMLというのはHyperText Markup Languageの略称です。
これを簡単に日本語に訳すと『マークアップすることによって文字を超越させることのできる言語』ということになります。

つまり、どういうことかというと、HTMLタグといわれる「タグ(マークアップ)」で文字列を囲むことによって、単なる文字ではなくて、例えば色付けや文字の大きさの変更、画像の貼付、リンクの設定などといった特別な意味合いを含ませることが出来る言語ということです。

HTMLタグとは

タグ(tag)というのは付け札、付箋(ふせん)といった意味です。
そして、文字列にHTMLの付箋を付けて意味を持たせてあげるのがHTMLタグです。

例えば、日本語の文章で

と表示したいとします。この文章は、「見出し」として”ホームページの作り方”というのがあって、その下に「段落」を設けて文章が書かれています。

これを、人の目で見れば簡単に分かることなんですが、コンピュータ(ブラウザ)の中ではこのままでは理解をしてくれないんです。

そこで、見出しや段落などといった文章の構成要素をひとつひとつ宣言してあげなければいけません。上の例文で言うと「見出し」と「段落」、後は「改行」といった要素が含まれていますね？

これに目印を付けると、上のような文章になります。これならコンピューターでもその部分がどういう意味合いを持つのかが判断できるようになります。

ただし、ここでもうひとつ問題が発生してしまいます。 コンピューターでは日本語が理解できません。
そこで、「見出し」という意味を持つ「heading」、「段落」は「paragraph」、「改行」は「break」といった感じで英訳して頭文字でそれぞれの要素を表現します。

すると、上のような感じになります。この文章をHTMLソースと言って、赤色で表示されている部分を「HTMLタグ」、タグの間に挟まれている文字列のことを「内容(content)」、HTMLタグと要素を合わせたものを「要素(element)」と呼びます。

空要素について

普通は<要素名>〜</要素名>といった感じで開始タグと終了タグとで内容文を囲んでHTMLタグと言うんですが、「br(改行)」タグには開始タグや終了タグといった区別がありません。
改行の場合は”ここからここまでが改行”ではなくて”ここで改行！”といった感じの適用範囲が無いタグになります。つまり、要素が空っぽになるので開始も終了も無くなってしまうんです。
こういった要素に内容が無いものを「空要素」と言って、開始タグだけで表示します。他には、画像を表示する為の「img」タグなんかもこれに当ります。