🦌

HTMLとは結局どういうもの？(初心者向け)

2024/06/01に公開

HTML

入門

基礎

tech

HTMLという名前から紐解く

HTMLを理解するためのアプローチは色々あると思いますが、ここでは「なぜHTMLという名前が付いているのか」という視点からHTMLを紐解いてみます。本記事は初心者向けなので、読み終えた時に「なんとなくHTMLに対するイメージが湧いた」という状態になるくらいを目指していますが、誤解のあるイメージを持ってしまうことは避けたいところです。そこで、HTMLという名前の意味するところを紐解いていけば、比較的間違いのないイメージに近づくだろうと考えてこのアプローチを取ることにしました。耳慣れない言葉が出てくるかもしれませんが慌てず１つずついきましょう。

主な対象読者

これからHTMLを始める方
既にHTMLを使っていてもっと本質的な意味を知りたい方
HTMLの語源を知りたい方

HTMLは略語

HTMLは「HyperText Markup Language」の略で、日本語(カタカナ)で書くとこうなります。
「ハイパーテキスト・マークアップ言語」

そうするとHTMLはこのふたつのワードで出来ている名前だということに気が付きます。

ハイパーテキスト(HyperText)
マークアップ言語(Markup Language)

どちらも覚える必要はありません。HTMLには２つの側面があるということが分かれば十分です。１つずつ紐解いていきます。

HTMLの"ML"（マークアップ言語）

理解のしやすさを踏まえて先に「マークアップ言語」について紐解きます。
いかにもIT用語風で馴染みにくいので、さらにバラバラにしてもう少しイメージの近い日常的な言葉に置き換えてみます。

マーク
初心者マーク、エコマーク、トレードマーク、五輪マークなどで使われる「マーク」と同じ意味です。日本語にするなら「しるし」というイメージです。
アップ
メイクアップ、ドレスアップ、セットアップ、ライトアップなどで使われる「アップ」と同じ意味です。日本語にするなら「～を施す」というイメージです。
言語
日本語、英語などの「言語」と同じ意味です。言い換えるなら「伝えるためのルール」というイメージです。

これらを合わせると「マークアップ言語」は「しるしを施して伝えるためのルール」と言い換えることが出来ます。ですが「誰が、誰に、何を」伝えるのかが省略されていて漠然としていますので付け加えるとこうなります。
「人が文章にしるしを施してコンピューターに文章の構造を伝えるためのルール」

ここでわかりにくいのは後半の「コンピューターに文章の構造を伝える」の部分じゃないでしょうか。恐らく具体例を見る方が分かりやすいと思います。

果物の種類

メロンの種類
マスクメロン
アンデスメロン
アムスメロン
夕張メロン
プリンスメロン

みかんの種類
温州みかん
伊予柑
清見
ポンカン
不知火

見づらい文章ですが、どの部分が「大見出し」「小見出し」「リスト」に該当するか振り分けてください、と言われたら恐らくこんな風に分ける方が多いのではないでしょうか。

大見出し ⇒ 「果物の種類」
小見出し ⇒ 「メロンの種類」
リスト　 ⇒ 「マスクメロン」「アンデスメロン」「アムスメロン」「夕張メロン」「プリンスメロン」
小見出し ⇒ 「みかんの種類」
リスト　 ⇒ 「温州みかん」「伊予柑」「清見」「ポンカン」「不知火」

これができるのはあなたが人間だからです。今までの経験や知識を参考にした結果、分類できたのであってコンピューターはそれが全くできません。コンピューターにとってこれらの文章はただの文字に過ぎず、どの文字がどんな意味を持つかを判断することができません。(AIを利用すれば可能ですが)

つまりコンピューターに「これが見出しですよ」「これがリストですよ」と、文章の意味を理解してもらうためには、ひとつずつルールに従ってしるしを施して丁寧に教える必要があります。

やってみます。
完全な書き方ではないですがイメージは掴めると思います。

<h1>果物の種類</h1>

<h2>メロンの種類</h2>
<ul>
  <li>マスクメロン</li>
  <li>アンデスメロン</li>
  <li>アムスメロン</li>
  <li>夕張メロン</li>
  <li>プリンスメロン</li>
</ul>

<h2>みかんの種類</h2>
<ul>
  <li>温州みかん</li>
  <li>伊予柑</li>
  <li>清見</li>
  <li>ポンカン</li>
  <li>不知火</li>
</ul>

このように書くことでコンピューターに次のようなことを伝えることができます。

<h1>と</h1>で囲まれた文章は「一番大きな見出しですよ」
<h2>と</h2>で囲まれた文章は「二番目に大きな見出しですよ」
<ul>と</ul>で囲まれた文章は「リストですよ」
<li>と</li>で囲まれた文章は「リストに並べるものの内のひとつですよ」

「<h1> <h2> <ul> <li>」などのしるしは、いつ、どれを使うかが人とコンピュータとの間でルールとして決められているので、コンピューターは<h1>を見つけると「これが一番大きな見出しなんだな」と理解することができます。

これが「人が文章にしるしを施してコンピューターに文章の構造を伝えるためのルール」、つまりマークアップ言語と呼ばれるものです。

HTMLの"HT"（ハイパーテキスト）

では後回しにしていた「ハイパーテキスト」について紐解きます。
こちらもいかにもIT用語風で馴染みにくいのでもう少しイメージの近い日常的な言葉に置き換えようと思うのですが、これは「凄い文書」「文書の域を超えた文書」としか言いようがないので何が凄いのかを考えてみます。

まず「凄くない文書」ですが、これは紙に印刷された文書のイメージです。新聞、ちらし、本、何でも構いませんが、このように印刷されていたとします。

お問い合わせはこちら！
https://samplesite.com/inquiry

紙に印刷された文書ですので、当たり前ですがどこを何度指で押そうとも何も起こりません。これが「凄くない(普通の)文書」のイメージです。こんなイメージの文書だと関連しているページをクリックして辿っていくといったことが出来ず、Web上で扱う文書としてはとても不便なものになります。

Webサイトで公開する文書を作るには、上記のような他のページへのリンクはもちろん、画像ファイル、動画ファイル、Javascriptファイル、CSSファイルなど様々な文書やファイルを組み合わせる必要があります。１枚の文章やファイルではなく複数のファイルを関連付けて表現出来るようにした凄い文書が「ハイパーテキスト」と呼ばれています。

先ほどのお問い合わせ先を記載した文書をハイパーテキストにしてみましょう。ここで、前項のマークアップ言語を使ってコンピューターに「これは他ページへのリンクですよ」ということを伝えます。そうです、ハイパーテキストを書くには、マークアップ言語が必要になります。

<a href="https://samplesite.com/inquiry">お問い合わせはこちら！</a>

先ほどの果物の種類のマークアップの例とは少し様子が違いますが、こう書くことでコンピューターに次のようなことを伝えることができます。

<a>と</a>で囲まれた文章は「クリック可能なリンクですよ」
クリックされたら「href="" で指定したURLに飛んでね」

リンクの他にも文書内に画像や動画を埋め込むことも出来ますがここでは割愛します。

"HT"と"ML"を合わせるとHTML

「ハイパーテキスト」と「マークアップ言語」の基本的なイメージが揃ったところでこれらを合わせて考えてみます。

おさらい

マークアップ言語
文章にしるしを施してコンピューターに文章の構造を伝えるためのルール
ハイパーテキスト
マークアップ言語を使って、他の文書へのリンクや動画像を埋め込んだ文書

つまりHTMLとは
文書内の各文章がどんな意味を持っているかをはっきりさせたり、
他の文書へのリンクや動画像を埋め込んだりするために、
文書内にしるしを付けてコンピューターに正しく伝えるためのマークの付け方のルールのこと

ざっと短く言うと
コンピューターに文章の意味を理解させるために付けるマークのこと

といったところです。

おわりに

HTMLの少し本質的なところに触れてみました。
これからHTMLを学ぶ方のベースに、既に使っている方の豆知識になれば幸いです。