HTMLが表示される仕組み|Webにおける重要概念を図解!

「【第1回】HTMLとは?基本のタグ・コードの書き方を実演で解説!」では、HTMLについて以下のように解説しました。

HTML(Hyper Text Markup Language)は、Webページを表示するためのマークアップ言語の1つです。マークアップとは、コンテンツの前後にタグと呼ばれる印(マーク)をつけて意味づけをすることを指します。

では、記述したHTMLがWebページ表示されるまでには、裏で何が起こっているのでしょうか。本記事では、そもそもWebページを開くとはどのような流れを指すのかを解説し、その中でHTML文書はどう処理されているのかを見ていきます。

WEBページが表示される仕組み

Webページが表示される流れは、クライアントとサーバーの関係で説明されます。クライアントとは、サイトを閲覧しようとしているユーザーが用いている、インターネットに接続された端末のことです。一方サーバーとは、ユーザーが閲覧使用としてるWebページの情報が格納されている場所です。

概略的に説明すると、Webページが表示される裏では、クライアントがサーバーに対して「このページが見たい」という要求(リクエスト)を出し、サーバーがそれに応えて、当該ページの情報を送り返す(レスポンス)というやりとりが行われているのです。

「このページが見たい」というリクエストは、皆さんが普段何気なく行っている、各種Webブラウザの検索窓でキーワードを打ち込み見たいページをクリックすることや、直接ページのURLを検索することです。そして、これらのリクエストをサーバーが受け取ります。

サーバーにはWebページの様々な情報が格納されており、リクエストに応じて必要なものをクライアントに送り返しますが、HTMLファイルもその中の1つです。

では、文字だらけでデザイン性の欠片もないHTML文書が、どのようにして見やすいWebページとして表示されるようになるのでしょうか。次の見出しで、HTMLファイルが辿る流れみていきます。

HTMLが表示される仕組み

クライアントからのリクエストに対してサーバーから送り返されたHTMLファイルは、そのままではタグなどが書かれたただの文字列です。しかし、サーバーからファイルを受け取ったWebブラウザが以下の流れでHTMLを解析・表示します。

まずHTMLパーサーという機能を用いて、HTMLファイルが文法に則って記述されているかをチェックします。パーサー(parser)とは「解析」を意味するparseが由来であり、したがってHTMLパーサーとは、HTMLファイルの要素を解析し、コンピューターが扱いやすいようなデータに変換を行うのです。

HTMLパーサーには、開始タグと閉じタグで囲われているか、などの文法をチェックするプログラムが組まれています。もし「閉じタグがない」など記述にミスがある場合は、文法ミスとして扱われたり、単なるテキストとして処理されてしまうのです。

そしてHTMLパーサーの次の段階は、レンダリング(rendering)と呼ばれます。HTMLパーサーで解析・変換したデータを、記述通りに画面に表示させる機能です。

サーバーから送り返されたHTMLファイルは、以上の主な2段階を踏まえて、無事ブラウザ上に表示されます。

まとめ

本記事では、Webページが表示される仕組みと、そのうちHTMLファイルはどのように処理されているのかを解説してきました。リクエストとレスポンス、HTMLパーサーなどは、今後HTML&CSSの理解を深めていくにあたって必ず必要になってくるでしょう。

ただし、今回はHTMLファイルの扱われ方を解説することを主題としていたため、本記事の内容もまだ基礎的なものに留まっています。たとえば、リクエストとレスポンスの関係をより深く理解しようとするならば、IPアドレスやDNSサーバーなどについても勉強しなければなりません。本記事を足がかりとして、徐々に次のステップに進んでいきましょう。