【初心者向け】HTMLって何? ~Webの最も基本的な言語~

2018年11月22日木曜日

Web技術 プログラミング

赤ちゃん

HTMLという言葉を、聞いたことがありますでしょうか。



インターネットやWebについて少し調べたことがある方は、ご存知かもしれませんね。


HTMLとは、Hyper Text Markup Language (ハイパー テキスト マークアップ ラングイッジ)の略で、Webサイトを構築する上で、最も基本となる言語です。



たとえば、今あなたが読んでいるこのブログ、日本語で書かれていますよね?

僕は、日本語でこの記事を書いています。


ただ、実はこの記事、ウェブサーバーからあなたのコンピューターに送られるとき、単純に日本語だけで書かれているわけではないんです。


どういうことでしょうか。


Webの基本的な仕組みから、順を追って説明していきましょう。


WebサーバーとWebブラウザ


WebサーバーとWebブラウザに関しては、以前、以下の2つの記事で概要を説明しました。

Webサーバーって何? >>

Webブラウザって何? >>



Webサーバー(おさらい)


ざっとおさらいをすると、Webサイトのデータは普段「Webサーバー」と呼ばれるコンピューターに保管されています。

そのWebサーバーというコンピューターは、世界中にたくさんあります。

ネットビジネスを運営している会社の中にもありますし、AmazonやGoogleなどの大きな会社は、「Webサーバー」をたくさん持っていて、世界中の人たちに貸したりしています。

日本にも、Webサーバーを、僕たちに貸してくれる会社はたくさんあります。

また、個人でコンピューターを買って、それをWebサーバーとして使うことも可能です。


とにかく、そういう「Webサーバー」と呼ばれるコンピューターが世界中にたくさんあって、そのコンピューターそれぞれが、中にWebサイトのデータを持っているのです。

そして、そのWebサイトのデータを欲しがっている人が現れると、その人のコンピューターに、WebサーバーがWebサイトのデータを送信するのです。



Webブラウザ(おさらい)


そうやってWebサーバーから送られてきたWebサイトのデータを、僕たちは普段読んでいます。

しかし、Webサーバーから送られてきたデータは、僕たち一般人が読むことを想定して書かれたデータではありません。

それを解読するのは、非常に大変な作業です。


そこでWebブラウザの出番です。


Webブラウザは、Webサーバーから送られてきた難解なデータを解析して、僕たち人間にも見やすい形にして表示してくれているのでした。



そして、その「難解なデータ」というのが、主に「HTML」のことです。



HTMLは、Webサーバーから送られてくるデータの中核を成している!


実はHTMLの他にも、色々なものがWebサーバーから送られてきているのですが、あまり深入りした説明はここでは割愛しましょう。

以前、「【初心者向け】JavaScriptって何?」という記事の中でご紹介した、「JavaScript」も、HTMLと一緒に送られてくるものの一つです。



色々送られては来るのですが、常にその中心にあるのは「HTML」です。


たとえばJavaScriptは、ボタンが押されたときにHTMLに変更を加えたりするのが仕事です。


もう一つ、「CSS」と呼ばれるものも送られてくるのですが、それも、HTMLの中に書くとゴチャゴチャする情報を、別のファイルとして取り出しただけのものです。



つまり、「HTML」というものが、WebサーバーからWebブラウザに送られてくる情報の中心です。



では、その「HTML」とはいったいどのようなものなのかというと、以下のようなものです。


HTMLとはこういうもの


少し暗号みたいですね。

なんだか、カッコで括られたブロックが、たくさんあります。

ただ、日本語もところどころ交じっていますね。



この暗号みたいな文字列が、Webサイトを形作っているんです。


少しだけ上記のHTMLの詳細を見てみましょうか。


たとえば、以下の部分、、

画像のHTML

「img」という言葉が書かれていますね。

これは、「イメージ」という意味です。

イメージを英語で書くと「image」で、意味は「画像」ってことですね。

つまり、「この部分には画像がくるよ」ということを、このHTMLは意味しているのです。


そして「img」と書かれた下の方に、青字で暗号みたいなものがズラ~っと書かれていますが、これは「表示するための画像は、ここから取って来れるよ」ということが書いてあります。


つまり、このHTMLが言っていることは、「ここから取ってきた画像を、この位置に表示してね」ということです。

僕たち人間は、そんなこと言われても、「え?どこから取ってくるの? ってか画像ってどうやって取ってくるの?」と混乱してしまいます。


ですから、HTMLを読むのは僕たちの仕事ではありません。


それは、「Webブラウザ」の仕事です。



Webブラウザが、
「了解! 画像を持ってきて、その画像をこの位置に表示して、読者に見てもらうぜ!」
と言って、指定された位置に画像を表示してくれているのです。


Webサイトとは、こういう命令が、いーーーーーっぱい 集まってできています。


画像を一つ見せるのにも、ボタンを一つ表示するのにも、すべてHTMLという言葉で「ここに画像出して」とか、「ここにボタンを表示して」とか、いちいち指示が書かれているのです。

そしてその指示に従って、Webブラウザと呼ばれるソフトが、画面上に情報を表示してくれているのです。


笑う赤ちゃん



まとめ


  • 「HTML」は、Webサイトを形作る、最も基本的な言語

  • Webサーバーからは、Webサイトの情報が「HTML」という形式で送られてくる

  • 「HTML」には、Webサイトのどこに、何を表示するのかということが書かれている

  • Webサーバーからは、「HTML」以外も送られてくるが、その他はオマケ

  • その「HTML」をWebブラウザが読んで、僕たち人間にも分かるように表示してくれている


HTMLはWebを形作る最も基本的な言語なので、しっかり知っておくと良いと思います。

このページが少しでも理解の助けになれば幸いです。

不明点などあれば、このページの一番下にある「お問合せ」などから、ご遠慮なくご質問ください。


最後まで読んでくださり、ありがとうございました。