遠かれ近かれ、情報技術の発達により将来的にはHTMLを触ることの方が珍しくなってしまうのかもしれません。
しかし、今とのころwebサイトを制作する上でHTMLの知識は必須。
記述のルールさえ分かっていれば、割と誰でも扱えるものだと個人的には思っています。
めちゃくちゃ極端なことを言えば(CSSやドメイン、SEOなどは度外視した場合)webサイトはHTMLを組んでサーバーにアップロードするだけで表示できます。
ですがそれは「記述のルールがわかっているから扱える」というだけ…。
実はHTMLは、一番最初に草案されてから既に約30年も経っています。
それだけ歴史があり、奥深いものなのです。
そして皆さん、HTMLの事をどれだけ知っていますか？
存在が当たり前過ぎると、わかっているつもりでもわかってない事の方が多いこともよくあったりします。恋愛と同じですね。
ですが、正直に話すと僕はそこまでhtmlのことを知っていないのかもしれません。
孔子の弟子が残したといわれる「論語」にも、『知るを知るとなし、知らざるを知らずとなす、これ知るなり』と言及があったらしいです。自分が知らないと自覚することで、新たな学びがあるという意味ですね。(解釈は様々らしいですが)
というわけで、今回は改めてhtmlがどういうものなのかという事を改めて紐解いて記していきたいと思います。
ただ、今回は基本的な構造やルールを記していくので、「そんなん知っとるがな」という方がいらっしゃるかもしれません。
弊社は理念の一つに「教育」を掲げておりますので、当記事は初学者の方やwebに興味を持っている学生に理解が深まれば、という考えのもと記しております。
もし当記事がご存知の内容であれば、是非弊社のコラム一覧から気になる記事を見つけて読んで頂ければと思います。面白い記事が沢山ありますよ〜。
それでは本題に移りたいと思います。
ハイパーテキスト マークアップ ランゲージ
HTMLの正式名称です。
直訳すると「ハイパーテキストをマークアップするための言語」。
単語を一つ一つ紐解いていきましょう。
■ハイパーテキスト
まず「ハイパーテキスト」とは、複数の文書(ページとも言い換えられる)を相互に関連づけて、結びつける仕組みのことです。
簡単に言えば、webサイトはリンクが付いていて、そこから色んなページにアクセスできますよね。
つまりwebページとwebページ同士は結びついていて、お互いに関係を持っています。
その複数のwebページを結びつける文書及び仕組みの事をハイパーテキストと言います。
■マークアップ
次に、「マークアップ」とは「コンピュータが認識できるテキスト」を記述していく事を挿します。
コンピュータは、ただテキストを記載しただけではその文章がどういった意味なのか理解できません。
なので、「この文章はこういう意味ですよ」と認識させるために「マーク(しるし)」をつけます。
HTMLでいうこの「マークをつける」行為は、「タグ」をつけるとも言い換えられます。
例えば、衣服を買う時に商品に値段など記載されたタグがついていますよね。アレと同じです。
衣服に値段が記載されたタグをつけることで、僕たちはその値段を認識できます。
同じように、webサイトに記載する文章に「タグ」をつけることで、コンピュータはその文章がどういう意味で書き込まれた文章なのかを認識できるようになるのです。
つまり「マークアップ」とは、「コンピュータが文章を認識できるように、書き込んだ文章にタグ(マーク)を書き起こして(アップして)いく」という意味なのです。
この「タグ」については、HTMLを記述するルールにも関連してきますので、詳細は後述していきます。
■言語
そして「言語」ですが、これはそのままの意味です。
日本語しか扱えない人が英語しか扱えない人とコミュニケーションを取る際、英語を話そうとしますよね。(逆も然りですが。)
そして日本語には日本語の、英語には英語の単語や文法が存在します。
英語の単語を覚えて、それの文法に基づいた言葉や文章を伝えてはじめて、英語はその人に伝わります。
コンピュータもそれと同じで、人がコンピュータに理解できる文章を伝えて初めて、コンピュータは人から与えられた言葉を理解できるのです。
先ほどHTMLはタグをつけた文章を認識すると説明しましたが、そのタグの付け方にもルールが存在します。
日本語も英語も決められた単語を組み合わせて文章を作るように、HTMLにも決められたタグが存在するのです。
代表的なタグは見出しを意味するh1タグ(細かく言えばh2〜h6まである)や、段落(文章)を意味する
タグなどがあります。
そしてタグの記述のルールも、「テキストはタグで囲まなければならない」というものがあります。
つまり、
<p>こういう事ですね。 </p>
上記はpタグで囲みましたが、文章の頭にあるタグを「開始タグ」、文章の後ろにあるタグを「閉じタグ」などと呼んだりします。ちなみに閉じタグは、タグの名前の前に「/(スラッシュ)」をつけなければなりません。
上記のルールに倣って、pタグで囲むことによって初めてコンピュータは「こういう事ですね。」というテキストは段落を意味しているんだと理解します。
これがHTMLが理解できる言語です。コンピュータと人は会話できない(siriとかはまた別ですが)ので、webサイトで情報を表すように伝えるには、こうやって文書で命令を起こさなければなりません、「話す・聞く」ではなく「読む・書く」が基本的なコンピュータとのコミュニケーション方法ですね。
因みにこれはHTMLに限らず、様々なマークアップ言語やプログラミング言語に共通することです。
ちなみにマークアップ言語は「タグをつける事でコンピュータに文書の構造を伝えられる言語」、
プログラミング言語は「コンピュータに計算処理などの命令を与えることができる言語」の違いがあります。
つまり、HTMLとは「相互に紐づいている文書(ハイパーテキスト)」を「コンピュータが認識できるように(マークアップ)」するための「言語(人からコンピュータに伝えられる言葉)」なのです。
そして、webサイトは基本的に「ブラウザ」と呼ばれるソフトウェアを介して初めて表示されます。
お馴染みGoogle ChromeやFirefox、Internet Exprolerなどですね。
ブラウザがHTMLの情報を読み取って初めてwebサイトが閲覧できるのです。
以上が、HTMLの根本的な名前の由来、基本的なルールとなります。
ひょっとしたら
・コンピュータが意味を理解したらどうなるの？
・タグで囲まなくてもブラウザに表示できたんだけど
・じゃあCSSとかJavaScriptってどんな役割なの？
などなど、色んな疑問を持つ方もいらっしゃるかもしれません。
僕も本当はもっともっと解説したい事柄があるのですが、それは次回以降に詳しく記載していきたいと思います。
次回もお楽しみに！
