HTMLってよく聞くけど何？
Webページでは「HTML（Hyper Text Markup Language）」という文法で記述されています。
Webブラウザは、これを解釈して適切な書式に直してユーザに表示します。
HTMLはWebページを表記するために考案された書式です。「言語」と言っても複雑わけではなく、
ここが「見出し」だよ〜、ここが「本文」だよ〜、ここが「画像」だよ〜と言うようにコンピューターにわかるように印をつけているような感じです。
マークアップランゲージ
HTMLは、「マークアップランゲージ（Markup Language）」と呼ばれ、自分がコンピュータにわからせたい箇所を「タグ（Tag）」で囲んで表現するのが特徴です。
タグは例えば「<title>〇〇博物館<title>」のように「＜タグ＞***********＜タグ＞」の形式で記述します。
上の例でいうと「タイトルが博物館だよ〜」という意味になります。
タグで示された部分を「要素（element)」と言います。タグは用途によって次の3つに分類できます。
意味を決めるもの
「title(タイトル）」「h1(大見出し）」「h2（中見出し）」など
タイトルは先ほど説明した形ですが「h1」とか「h2」とか、この数字の部分が大きくあるほど表示される見出しは小さくなります
別コンテンツへの参照を示すもの
「img（画像を埋め込むことを示す）」「video（動画を埋め込むことを示す）」など
よくブログを見ていて画像が埋め込んであったり、再生マークがついていてクリックすると動画が再生されたりとかそういうものがこの内容です。
装飾するもの
「b（ボールド＝太字）」「font（文字色や文字サイズ）」など。
ただし、装飾のタグに関してはHTMLで指定することは現在では推奨されておらずCSSで装飾を指定することが求められています。
まぁWordとかExcelとかで上の方に「B」とか書いてあるところをクリックすると選択したところが太字になります。
WEBブラウザによる「レンダリング」
Webサーバからは、HTMLの形式でWebページが送信されてきます。Webブラウザが、このHTMLを「はいはいここがタイトルね〜、ここが見出しね〜」と配置してくれてユーザに表示します。
前回の投稿で、WebブラウザがHTMLを解釈して整形することを「レンダリング」と言う書きましたがWebブラウザに内臓されているレンダリング機能のことを「レンダリングエンジン（rendering engine)」と呼びます。
レンダリングはここ⇨レンダリング
基本的には、Webブラウザが違えばレンダリングエンジンも違います。しかし最近では独自のレンダリングエンジンではなくApple社を中心に開発された「Webkit（ウェブキット）」と呼ばれる無償で使えるレンダリングエンジンを採用しているWebブラウザもあります。そうした場合表示結果はほぼ同じです。
下記表が代表的なWebブラウザとレンダリングエンジンです。
| WEBブラウザ | レンダリングエンジン |
|---|---|
| Internet Explorer | Trident |
| Microsoft Edge | EdgeHTML |
| Fire Fox,SeaMonkey | Gecko |
| Opera | Presto |
| Safari | Webkit |
| Google Chrome | Blink |
Webブラウザによって見栄えや動きが違う
HTMLはレンダリングエンジンによって解釈される・レイアウトされるのでレンダリングエンジンが違うとWebページの表示が異なることがあります。
またWebブラウザの中でプログラムを実行できる機能がある「JavaScript」の機能差もあるためWebページの構成によってはあるWebブラウザでは動かないということもあります。
そのためWebサイトを作るときはいくつかのWebブラウザでの動作確認が必要です。
特に企業ユーザーをはじめとする多くのユーザーはOSに付属しているMicrosoft Edgeを使用しているためこのブラウザでの動作確認は必要不可欠です。同じブラウザでもバージョンが違うと挙動が異なる事があります。
リンクから別のページにたどる仕組み
これはよくWebページなどで見るやつです。
↓↓↓↓↓↓こういうの↓↓↓↓↓↓↓
Webページに貼られたリンクをクリックすると、別ページに飛ぶ事ができます。リンクは略称で正式には「ハイパーリンク（hyperlink)」です。リンク（ハイパーリンク）は、リンクタグ「<a href="リンク先のURL">」として構成されています。
あとはExcelとかでもありますね！！
ユーザーがリンクをクリックするとWebブラウザは「指定されたURLのデータを取得」してそれを表示します。
ページからページへ移動しているように感じますが、実際は新しいページを次々とダウンロードしているに過ぎません。
画像や動画は別に読み込まれてHTMLにはめこまれる
文章やタグはHTMLに全て記述されています。ただし画像や動画ファイルはそのHTMLとは別にWebサーバー上に置かれます。
HTMLには「画像ファイルはこの場所にある（<img src="(画像ファイルのURL）">」という情報しか記載されません。
「画像はWebサーバーのXXっていうところにあるよー」という内容しか書かれてないということです。
Webブラウザはこの画像データを別途Webサーバに要求してダウンロードします。そしてダウンロードした画像をページ内にはめ込むように表示します。
WebブラウザがWebサーバーに対して「XXっていうところにある画像ちょうだい〜」っていうと、Webサーバーが「はいはいこれねー」と返してくれます。
↓↓↓↓↓↓こんなの↓↓↓↓↓↓
まとめ
いかがだったでしょうか、普段何気なくみているWebページがこんなことになっているんだと思われたかも知れません。
私も最初知ったときは「へぇ〜」って思いましたw
プログラマの中には「HTML」をプログラミング言語ではない！と言う人もいますが私はそうは思いません。
「HTML」もプログラミング言語の一つだと思っています、ただ世の中ではそういう風潮が根強く残っていますが私から言わせるとプログラミングというのは「コードを書いてコンピューターに実行させる」と考えているので私はプログラミング言語の一種だと思います。
ではでは
Follow me!
