WEBページの制作に必須となるマークアップ言語「HTML」について解説します。HTMLは、Webページを構成する最も基本的なマークアップ言語です。
このページで学べる内容
- HTMLとは？
- Webページはどのように作られている？
- そもそもマークアップとはどういう意味？
「マークアップ」という概念を丁寧に理解した上で、HTMLの役割を論理的・感覚的にイメージできないとHTMLの本質的な理解はできません。
実はHTMLは、javaやVBAなどの他のプログラミング言語と比較すると簡単にmマスターできる簡易な言語ですが、HTMLの基本的な動作原理や、システム上の役割・仕組みを知らないと自分で応用的にコーディングすることができません。
このページでは、HTML学習者であれば知らないと恥ずかしい内容ばかりですので是非最後までご覧ください。
HTMLとは？
HTMLとは、Hyper Text Markup Language の頭文字をとった単語で、 Webページを構成するマークアップ言語です。
Hyper Text ・・・いろんな要素を持つすごいテキスト（文字列）に
Markup・・・マークアップする（目印をつける）
Language・・・言語
日本語に直すとこんな感じの意味になります。（※それぞれの詳細は後述します。）今ご覧いただいているこのサイトもHTMLで構成されていますし、普段見ているインターネットのページはほぼHTMLで構成されていると考えてOKです。
Webページはどのように作られる？
そもそも、Webページはどのように構成されているのでしょうか？ここを知っておくと、HTMLをより正しく理解することができるのでちょっと寄り道して解説します。
実は、Webページの裏側を見るのはだれでも簡単にできるのです。簡単に本ブログの記事の裏側（ページのソースコード）を見ていきましょう。まずは、確認したいWebサイトを開いてみましょう。
※以下のリンクをクリックすると本サイトのトップページが別タブで開きます。
画面を開いたら、どこでもよいので右クリック ⇒ 「ページのソースを表示」をクリックします。
このブログに限らず、すべてのWebサイトでソースを表示することが可能です。YahooやAmazonなど、あなたがよく閲覧するサイトでソースの表示をしてみるのも面白いと思います。
ビズドットオンラインのソース表示をした結果がこちら。
ご覧のように、Webページを構成するソースコードを確認することができます。ここで、見ていただくとわかるように
Webページは「文字列」と「HTML」で成り立っている
ということが確認できます。つまり、今あなたが見ているこの記事は、「記事＝文字列」と、その文字に意味を与える「HTML」ですべて構成されているのです。
文字列だけではだめ？
ここで、こんな疑問が思い浮かぶ方もいるでしょう。
文字さえあれば記事になるのではないか？結局HTMLって何をしているの？
文字さえあれば、情報をユーザに伝えることができますので、HTMLが何をしているかわからない方もいるはずです。
最初に示した、HTMLの定義を見てみましょう。
HyperText ・・・いろんな要素を持つすごいテキスト（文字列）を
Markup・・・マークアップする（目印をつける）
Language・・・プログラミング言語
最初に示したように、HTMLは「文字列をマークアップ」する役割を持ちます。つまり、ただの文字列を「装飾している」のがHTMLなのです。
マークアップとは？
ここで、本題に戻ります。マークアップ言語とは何か？
答えは、文字列に何らかのコンピュータ的な意味を与える役割を持つプログラミング言語です。
（厳密にいえば、HTML＝プログラミング言語ではなく、HTML＝マークアップ言語となります。）
HTMLでマークアップされている文章と、そうでない文章を比較してみてみましょう。まずは、マークアップされてないHTMLをブラウザで表示した結果がこちらです。
そして、こちらがHTMLでマークアップした文字列です。
まず見た目から一目瞭然ですね。見出しとその他の段落が明確に区別されていることが伺えます。これが、文字列をマークアップする、ということです。
また、先ほどHTMLを「文字列に何らかのコンピュータ的な意味を与える役割を持つプログラミング言語」であると説明した通り、見た目だけでなく、HTMLは文章にコンピューター的な意味も付与しています。つまり、この文字列が見出しで、この文字列が段落で、この文字列は・・・・、というのをコンピューターが認識するのです。
※見出しや段落の他にも数多くの文章構造を表現することができます。
＜ｈ１＞や＜ｐ＞は「タグ」と呼ばれます。HTMLでは、「タグ」をつけることによって、見出しや段落といった意味を持たせることができます。
コンピューターの認識って必要？
こんな声も聞こえてきそうですが、実はコンピューターの認識こそがHTMLにとって一番大事な役割なのです。
HTMLを利用せずに、例えば文字の大きさだけを変えて見出しや段落を表現すればよいのでは？と思うかもしれません。別にコンピューターに認識されなくても、ユーザに読んでもらえればOK!みたいな感じで。
だけど、そうしてしまうとせっかく作った文章は世の中のだれからも見つからなくなってしまいます。コンピューターに認識されないということは、GoogleやYahooなどで検索できないという結果につながるからです。
逆に言えば、この文章やコンテンツを充実させたうえで、HTMLを適切に利用することが、多くの人に読んでもらえるWebサイト制作の肝になるのです。
さて、ここまででHTMLがどのようなものか理解することができたのではないでしょうか？次は、具体的にHTMLをどのように記述すればよいのか？コーディングの仕方については、こちらのページで整理していますので、続けてご覧ください。