HTMLという名前はよく聞くけどけよく分からない方も多いと思います。HTMLという名前からひも解く形で簡単に説明します。
HTMLという名前からひも解く
HTMLを理解するためのアプローチは色々ありますが、ここでは「なぜHTMLという名前が付いているのか」という視点からHTMLを紐解いてみます。
本記事は初心者向けなので、読み終えた時に「なんとなくHTMLに対するイメージが湧いたという状態になる」ことを目指していますが、誤解のあるイメージを持ってしまうことは避けたいところです。そこで、HTMLという名前の意味するところを紐解いていけば、比較的間違いのないイメージに近づくだろうと考えています。その中でも耳慣れない言葉が出てくるかもしれませんが、慌てずひとつずついきましょう。
主な対象読者
- これからHTMLを始める方
- 既にHTMLを使っていてもっと本質的な意味を知りたい方
- 既にHTMLを使っていてもっと本質的な意味を知りたい方
- HTMLの語源を知りたい方
HTMLは略語
HTMLは「HyperText Markup Language」の略で、日本語(カタカナ)で書くとこうなります。
「ハイパーテキスト・マークアップ言語」
そうするとHTMLはこのふたつのワードで出来ている名前だということに気が付きます。
- ハイパーテキスト(HyperText)
- マークアップ言語(Markup Language)
どちらも覚える必要はありません。HTMLには２つの側面があるということが分かれば十分です。１つずつ紐解いていきます。
HTMLの”ML”（マークアップ言語）
理解のしやすさを踏まえて先に「マークアップ言語」について紐解きます。
いかにもIT用語風で馴染みにくいので、さらにバラバラにしてもう少しイメージの近い日常的な言葉に置き換えてみます。
- マーク
初心者マーク、エコマーク、トレードマーク、五輪マークなどで使われる「マーク」と同じ意味です。日本語にするなら「しるし」というイメージです。
- アップ
メイクアップ、ドレスアップ、セットアップ、ライトアップなどで使われる「アップ」と同じ意味です。日本語にするなら「～を施す」というイメージです。
- 言語
日本語、英語などの「言語」と同じ意味です。言い換えるなら「伝えるためのルール」というイメージです。
これらを合わせると「マークアップ言語」は「しるしを施して伝えるためのルール」と言い換えることが出来ます。ですが「誰が、誰に、何を」伝えるのかが省略されていて漠然としていますので付け加えるとこうなります。
「人が文章にしるしを施してコンピューターに文章の構造を伝えるためのルール」
ここでわかりにくいのは後半の「コンピューターに文章の構造を伝える」の部分じゃないでしょうか。恐らく具体例を見る方が分かりやすいと思います。
しるしの無い文章
果物の種類
メロンの種類
マスクメロン
アンデスメロン
アムスメロン
夕張メロン
プリンスメロン
みかんの種類
温州みかん
伊予柑
清見
ポンカン
不知火
見るからにただの果物の羅列ですが、この文章をどの部分が「大見出し」「小見出し」「リスト」に該当するか振り分けてください、と言われたら恐らくこんな風に分ける方が多いのではないでしょうか。
大見出し ⇒ 「果物の種類」
小見出し ⇒ 「メロンの種類」
リスト ⇒ 「マスクメロン」「アンデスメロン」「アムスメロン」「夕張メロン」「プリンスメロン」
小見出し ⇒ 「みかんの種類」
リスト ⇒ 「温州みかん」「伊予柑」「清見」「ポンカン」「不知火」
しかし、これができるのはあなたが人間だからです。今までの経験や知識を参考にした結果、分類できたのであってコンピューターはそれが全くできません。コンピューターにとってこれらの文章はただの文字に過ぎず、どの文字がどんな意味を持つかを判断することができません。(AIを利用すれば可能ですが)
つまりコンピューターに「これが見出しですよ」「これがリストですよ」と、文章の意味を理解してもらうためには、ひとつずつルールに従ってしるしを施して丁寧に教える必要があります。
やってみます。
しるしを施してみる
完全な書き方ではないですがイメージは掴めると思います。
<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>`を見つけると「これが一番大きな見出しなんだな」と理解することができます。
これが「人が文章にしるしを施してコンピューターに文章の構造を伝えるためのルール」、つまりマークアップ言語と呼ばれるものです。
「<h1> <h2> <ul> <li>」などのしるしは、HTML用語では「タグ」と呼ばれます。このしるし(タグ)をつけることをマークアップと呼びますが、もっと砕いた表現の「タグで囲む」を使うことが多いです。ですのでマークアップという言葉は普段はあまり使われず耳慣れない言葉となっています。
HTMLの”HT”（ハイパーテキスト）
では後回しにしていた「ハイパーテキスト」について紐解きます。
こちらもいかにもIT用語風で馴染みにくいので、もう少しイメージの近い日常的な言葉に置き換えようと思うのですが、そのまま置き換えると「凄い文書」「文書の域を超えた文書」としか言いようがないので何が凄いのかを考えてみます。
テキスト（凄くない文章）
これは紙に印刷された文書のイメージです。新聞、ちらし、本、何でも構いませんが、このように印刷されていたとします。
お問い合わせはこちら！
https://samplesite.com/inquiry紙に印刷された文書ですので、当たり前ですがどこを何度指で押そうとも何も起こりません。これが「凄くない(普通の)文書」です。この文章をそのままWebサイトで公開しても、「https://samplesite.com/inquiry」をクリックしてもお問い合わせページに行くことはできず、自分でURLをコピーしてブラウザに張り付けてアクセスする、というとても不便なものになります。
Webサイトで公開する文書を作るには、上記のような他のページへのリンクはもちろん、画像ファイル、動画ファイル、Javascriptファイル、CSSファイルなど様々な文書やファイルを組み合わせる必要があります。１枚の文章やファイルではなく複数のファイルを関連付けて表現出来るようにした凄い文書が「ハイパーテキスト」と呼ばれています。
ハイパーテキスト（凄い文章）
先ほどのお問い合わせ先を記載した文書をハイパーテキスト(すごい文章)にしてみましょう。ここで、前項のマークアップ言語を使ってコンピューターに「これは他ページへのリンクですよ」ということを伝えます。
そうです、ハイパーテキストを書くには、マークアップ言語を使う必要があります。
<a href="https://samplesite.com/inquiry">お問い合わせはこちら！</a>
先ほどの果物の種類のマークアップの例とは少し様子が違いますが、こう書くことでコンピューターに次のようなことを伝えることができます。
- <a>と</a>で囲まれた文章は「クリック可能なリンクですよ」
- クリックされたら「href=”” で指定したURLに飛んでね」
リンクの正式名称は「ハイパーリンク」ですが単に「リンク」と呼ばれることが多いです。
リンクの他にも文書内に画像や動画を埋め込むことも出来ますがここでは割愛します。
“HT”と”ML”を合わせるとHTML
上述のように「ハイパーテキスト」と「マークアップ言語」の基本的なイメージが揃ったところでこれらを合わせて考えてみます。
おさらい
- マークアップ言語
文章にしるしを施してコンピューターに文章の構造を伝えるためのルール
- ハイパーテキスト
マークアップ言語を使って、他の文書へのリンクや動画像を埋め込んだ文書
つまりHTMLとは
文書内の各文章がどんな意味を持っているかをはっきりさせたり、他の文書へのリンクや動画像を埋め込んだりするために、文書内にしるしを付けてコンピューターに正しく伝えるためのマークの付け方のルールのこと
つまり、
コンピューターに文章の意味を理解させるために付けるマークのこと
です。
おわりに
HTMLの少し本質的なところに触れてみました。
これからHTMLを学ぶ方のベースに、既に使っている方の豆知識になれば幸いです。
コメント