2020/08/29
突然ですが、「html」とは何でしょう？
「なんかホームページ作れる系のやつでしょ」というざっくりな認識で知っている人もいるかと思いますが、実際どういうものなのか分かっていない人も多いかと思います。
そこで今回は「html」について、全く知らないあなたにも分かりやすいように例え話も交えて解説していきたいと思います。
では早速みていきましょう！
◾️対象読者想定
- htmlってなんやねん！って思っている人
- あれ、ホームページとか作る時に出てくるやつじゃないの？でもよくわかってない
◾️この記事を読むとどうなる？
- htmlについて何かが分かるようになる
- htmlについてざっくりと説明できるようになる
「html」を一言で表現すると？
まず「html」を一言で説明するなら、
ブラウザが認識することができる文字
といえるでしょう。
「html」とは？
では詳細にみていきましょう。
htmlの略
「Hyper Text Markup Language」（ハイパーテキストマークアップランゲージ）の略になります。
だからなんやねん！！って感じですよねw
すごいテキスト？まーくあっぷ？ランゲージということはまぁなんかの言語なのか。。？
とおそらく最初はこんな感じになるかと思いますが、この意味は最初に聞いても難しいと思うので後回しにします。
htmlとは？
「ブラウザが認識することができる文字」ということはどういうことでしょう？
htmlはlanguageというように言語であり、つまりは書き方のことです。
「htmlという方式の書き方で文字を記載することでブラウザがその内容を認識することができるようになる」のです。
※ブラウザについてわからない人はこちらも読んでみてください
まだ全然わけわからなくて大丈夫です。
例えば、日本語という書き方で文章を書くことで日本人はその内容を認識することができる、これなら意味は分かりますよね？
日本人の友達に何を言っているか理解してもらうために、日本語という言語（＝書き方）で文章を書くことで、その日本人は内容を理解することができます。
それと同じです。
ブラウザというツールに内容を認識してもらうために、利用する言語（＝書き方）としてhtmlという書き方でテキストを書くのです。
そうすることで、ブラウザ側でhtmlで書かれたファイルを解釈してくれるので、私たちはブラウザを利用して、ウェブページを閲覧することができているのです。
ちなみにhtmlという書き方で文字が書かれたファイルをhtml形式で書かれたファイル、と言ったりします。
一番大事なこと
ここで一番重要なことは、ブラウザで閲覧しているウェブページは全てhtml形式で書かれているということです。
正直htmlがハイパーテキストマークアップランゲージの略だとかどうでもいいですし、全然覚えてなくていいですw
（まぁ豆知識として飲み会とかで「htmlはハイパ〜の略だよ」って言えたら「おー」ってなるとは思いますがそれだけで本質ではないですw）
話がそれてしまったので、再掲します。
ブラウザで閲覧しているウェブページは全てhtml形式で書かれている
ということなので、いつも見ているあのウェブサービスたちは全て、html形式で書かれているファイルを作成しインターネット上に公開することで、我々がブラウザを使ってインターネットを通じて見れるようにしている、ということになります。
htmlの実態
じゃあその「html形式」で書くってどうやって書くんよ？っと疑問になるかと思いますので、実際にhtmlに少しだけ触れてみたいと思います。
html形式ではタグというものを利用することでテキストに構造やレイアウトを持たせることができます。
例えば、パソコンで新規でファイルを２つ作成して、１つ目は「htmlお試しファイル.txt」、２つ目は「htmlお試しファイル.html」というファイル名で作成し、両方とも以下の文章をコピペして保存してみてください。
<h1>自己紹介</h1><h2>趣味</h2><p>・寝ること</p><p>・料理</p><h2>特技</h2><p>・水泳</p><p>・サッカー</p><p>・野球</p>
そして、そのファイルをそれぞれブラウザで開くとどうなるでしょうか？
- 「htmlお試しファイル.txt」と名前をつけて保存したファイル
→そのまま書いた通りに表示されてしまう
- 「htmlお試しファイル.html」と名前をつけて保存したファイル
→ファイル名の末尾に「.html」とつけて保存することで「このファイルをhtml形式で保存します」という意味になる（これを拡張子と言ったりします)
→<h1></h1>などのタグと呼ばれるものがブラウザで解釈されて文字が大きく太字になっている
このことから、確かに普通のファイルでもブラウザで表示することは可能ではあるのですが、より綺麗なウェブページにしようとすると、ブラウザが解釈できるhtml形式でレイアウトを作成することになります。
誤解のないように先ほど「ブラウザで閲覧しているウェブページは全てhtml形式で書かれている」と言いましたが、正確には「ほぼ全てhtml形式で書かれている」というのが正しく、今行ったような例外もあったりします。
「html」を現実世界で例えると
最後に「html」を現実世界に置き換えてもっと分かりやすくイメージしてみましょう。
先ほどすでに出しましたが以下のように考えると分かりやすいですかね。
html = 日本語
ブラウザ = 日本人
日本人の友達に何かを伝えるのに日本語で伝えるように、ブラウザというツールに内容を認識してもらうためにhtmlという書き方で書くのです。
補足
html=「Hyper Text Markup Language」（ハイパーテキストマークアップランゲージ）の略だということで、最後の最後でこの意味に少しだけ触れて終わりたいと思います。
※個人的な解釈を含みますのでイメージが伝われば大丈夫ですw
ハイパーテキストというのは、よくウェブページでも青くなっている文字列をクリックすると別のページに移動するのをハイパーリンクと言ったりするように、そのような特殊なテキスト形式という意味でハイパーテキスト、
マークアップには「意味付け」という意味があるように、タグを使ってタイトルやサブタイトルなどの構造をつけて文章それぞれに意味を持たせているという意味、
それらを合わせて、ブラウザが解釈可能な文字のことを「特殊なテキストで書かれた文章構造に意味を持たせるための言語」＝html、と名付けられたのだと思います。
まとめ
ということで今回は「html」について分かりやすく解説してみました。
html＝ブラウザが認識することができる文字
ということが理解できるようになっているとよいですね！
