HTML タグってなに？
今まで抽象的な話ばかりで「HTMLファイル」についての説明をすすめてきましたが、今回はこの「HTMLファイル」の中身を見ていきます。少し復習になりますが、「HPってなんでできてるの？」の内容を思い出してください。
「HTMLファイルの中身はHTML専用の特別な記述方法で書かれています」
と話をはぐらかせていたと思いますが、この「HTML専用の特別な記述」に使う文字のことを「HTMLタグ」と呼びます。
タグとはもともと「荷札」と和訳されるのですが、コンピューターの世界では多少意味が違っていまして、「意味の始まりと終わりを示す文字」ということになっています。
不等号でタグ名を囲む（<タグ名>）ことにより意味の始まりを示す文字を記述することができ、不等号でスラッシュ（/）とタグ名を囲む（</タグ名>）ことにより意味の終わりを示す文字を記述することができます。
ここで更に思い出してもらいたいのですが、「HPってなんでできてるの？」にてHTMLファイルの中身には「文字の意味を表す文字がある」と説明をしていました。ここまで言えばもうお分かりでしょう。この文字の意味を表す文字がHTMLタグなのです。意味の始まりと終わりを示す文字（HTMLタグ）で表示するための文字を囲み、その文字の意味を表していることとなります。
こんな説明では分かりにくいと思いますので、簡単な例を挙げてみましょう。
このように<strong>強く表す部分</strong>を意味付けできます。
このように強く表す部分を意味付けできます。
見てもらうと分かると思いますが、「<strong>」と「</strong>」に囲まれた範囲の表示が変わり、強調されていると思います。ただここで注意してもらいたいのは、見た目を強調するために「<strong>」と「</strong>」で文字を囲むのでは無いということです。あくまで「<strong>」と「</strong>」で囲んだ部分に意味が付けられただけであり、その意味の結果WEBブラウザが見た目を変化させているのです。最初のうちは戸惑うかもしれませんが、この部分をしっかりと理解しておいて下さい。
さて次に記述方法を紹介しましょう。「<strong>」と記述することにより「ここから後の文字は強調したい文字ですよ」と言うことを表します。この記号のことを「開始タグ」と呼んでいます。
また、強調の開始タグが記述された後にくる文字はずっと強調のままになりますので、どこかで強調の終了を表してやる必要があります。それが「</strong>」という記述なんですね。「</strong>」により、「ここで強調したい文字は終了ですよ」と表しているのです。この記号は「終了タグ」と呼んでいます。
これで話が終わりではありません。よい機会ですのでもう少し言葉の意味を覚えておきましょう。まずはタグの例から。
このように記述することにより、囲まれた文字がハイパーリンクであることが表されているのですが、今はそれは本題ではありません。それぞれにつけられた名前について説明をしていきます。
| < | a | href="https://www.7key.jp/hp/" | > | ここがハイパーリンク | </ | a | > | |
| １ | ２ | ３ | １ |
まず、「１」〜「３」まで、ここで紹介しています全てをひっくるめて「要素」と呼ぶことを覚えて下さい。開始タグから終了タグまで全てが「要素」と言うわけですね。
「１」はタグ名と先ほど紹介しましたが、正しくは「要素名」と呼ばれています。どんな意味を付けるのか、ということを決定するためのものでもあります。
「２」は「属性」と呼ばれているもので、タグに指定することができる追加情報のようなものです。
「３」は「内容」と呼ばれ、見ての通り実際に表示される部分になっています。
HTMLの勉強を進めていく上で、「要素」「要素名」「属性」「内容」といった用語は避けて通れないものでしょう。しっかりと覚えておいて下さいね。
HTMLの記述方法がだいたい理解できましたら、今度はHTMLファイル全体の書き方について勉強しましょう。少し思い出してみてください。「HTMLファイルを作ってみよう」で作ったHTMLファイルの中身は次のようになっていましたよね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> </head> <body> </body> </html>
これは「HTMLファイルを作ってみよう」にて「HTMLファイルを作成した際に必ず入力するおまじない」と紹介していましたよね。このおまじないの意味を今から見ていきましょう。
まず、「<html>」と「</html>」に囲まれた範囲は「HTML文書」ですよ、という意味になっています（HTML文書であることを明示しているのです）。
このように<strong>強くあらわす部分</strong>を意味付けできます。
とか
は、「<body>」と「</body>」の間に記述する、ということになりますね。
最後に、「<head>」と「</head>」で囲まれた範囲には、そのページの基本情報を記述します（例えばページのタイトルでありますとか、文字の情報でありますとか）。この部分はブラウザで見た際に表示されることはありません。
- 多少意味が違っています
- 「目印」になるもの、という意味に解釈すれば同じですかね。
- よい機会
- 説明する側にとってです・・・
