6.HTMLタグに込められた「内なる想い」を知る　～HTMLタグの中身～

HTMLタグの中身とは？

製作者の「こういう風にしたい」という思いをブラウザに伝えるテキスト。

ブラウザへ伝えたい情報を「括弧の内側」に書いたもの。

まさに、内なる想い（違)

※ブラウザやHTMLとの関連は以前の２つの記事が参考になると思います。

2.webページ主に２種類のテキストファイルでできている～その１～ HTML編 - web制作のしおり

3.webページ主に２種類のテキストファイルでできている～その２～ CSS - web制作のしおり

話を戻します。

HTMLタグの中身にもルールがある？

HTMLはルールに基づいて書かれたテキストファイルであると、

散々自戒してきました。

と言うことは、

HTMLタグにもルールがあるのではと思ったそこのあなた！

さすがです。その通りです。

HTMLタグには様々な種類があり、

さらに、補足内容を付け加えることもできます。

例によってルールに基づいて書く必要はありますが。

HTMLタグって、どう書くんだっけ？

以前の記事では単純に

<タグ>表示したい内容</タグ>

と書きました。本来は英単語等で表記されますが、

仕組みを理解する上では特に問題は無いと思います。

上記の「タグ」の部分に色々と想いを込められる(情報を書き込める)んだよ。

というのが今回の本題なわけです。

タグの中身はどうなってるの？

<要素名属性名1=値1></要素名>

これがよく使われる説明です。

属性？値？吐きそう…。

大丈夫です、置き去りにしませんよ。

まずは概要をざっと見ましょう。

「要素名」は　タグに付けられた名前
「属性」は　ブラウザに伝えたい付加情報の種類
「値」は　付加情報の中身

１つずつ整理していきましょう。

要素名はタグに付けられた名前

冒頭で、

「こういう風にしたい」という思いをブラウザに伝える

という事をお伝えしました。「やりたいこと」にも

文字を表示させたい
画像を表示させたい
ボタンを表示させたい

など様々あると思います。

試しに上記のようにタグに「やりたいこと」を書いてみましょう。

<文字を表示させたい></文字を表示させたい>

<画像を表示させたい></画像を表示させたい>

<ボタンを表示させたい></ボタンを表示させたい>

のように書けますよね。

そう、これこそが要素名です。

この「やりたいこと」に名前をつけて、簡単にしたのが「要素名」です。

例えば、

<p></p>・・・段落の意味でパラグラフの略。文字を表示させる時に使う
<img>・・・画像の意味でimageの略。画像を表示させる時に使う
<button>・・・そのままボタンの意味です。ボタンを表示させる時に使います。

こうして「タグ」に「要素名」をつけることで、

人からブラウザへ、やりたいことの概要を伝達しているのです。

それでは、ここからは

「画像を表示させたい」ことをブラウザに伝える

これを例に話を進めていきます。

先に完成形をお見せしておきます。

ざっと目を通して、次へ進んで下さい。

<画像を表示したい　その画像は　”このファイルです”>

属性はブラウザに伝える付加情報

要素名を書くことで、「画像を表示させたい」という想いを

ブラウザに伝えることができました。

ただ、これではどの画像を表示させたら良いのか、わかりませんよね？

そこで、「どの画像を表示させるか」をブラウザに伝えるわけです。

では、タグを書いてみます。

<画像を表示したい　その画像は>

「その画像は」の部分が、「属性」にあたります。

そして実際の書き方をすると

となります。

ここでは「src」の部分が属性にあたります。

「src」はソースとかリソースの略と言われています。

「出どころ」とか「資源」の意味ですね。

勘の言い方はお気づきかもしれませんが、

属性を指定しただけでは「中身」が無いのです。

例えるなら、ブラウザに

「画像を表示したいよ。画像の出処はね・・・」

と含みのある言い方で終えているような状態です。

あくまで、「付加情報がありますよ」というお知らせをしているに過ぎません。

値は付加情報の中身

要素名、属性のところまでで、

やりたいこと
付加情報があります

ということをブラウザに伝えることができました。

最後に、付加情報の「中身」を伝えれば

ようやく「やりたいこと」をブラウザが実現してくれます。

もう一度完成形を確認してみましょう。

<画像を表示したい　その画像は　”このファイルです”>

付加情報の「中身」は、言うまでも無く　”このファイルです”　の部分ですね。

実際のテキストがこちら、

意味がわからない状態で見ると、

？が頭の上につきそうですが、

<画像を表示したい　その画像は　”このファイルです”>

と言われれば、なるほどね。とわかっていただけると思います。

何も難しいことは無いですよね。

整理することで、意味が理解できる

「こういう時には、こう書く！」

と、機械的に暗記するよりも

整理して言葉にすることで

タグの中身の意味がわかるかと想います。

登場人物を意識して、

このテキストが何の為に書かれているかを考えれば、

わかりやすいと思います。

今日のまとめ

タグは＜やりたいこと　付加情報="付加情報の中身">でできている
実際は<要素名属性="値"></要素名>の形で記される
要素名はやりたいことによって、様々なものが用意されいる
タグの中身を使ってブラウザと細かい意思疎通ができる

デイトラで日々学習していますが、まだ初級編の域を出ていません。

確かに、言われたとおりにやれば形になります。

ただ、こうした基本的なところで躓くことが多く、咀嚼に時間がかかっています。

トホホ。

とはいえ、引き続き学習を続けていきます。

では、また。