HTML ってなに？

前回まで、ホームページを持つために必要となる準備をお伝えしてきました。
今回は、ホームページの中身についてお話しします。
ホームページは HTML という書式に従って書かれた電子データです。
その HTML についてざっくりお話しします。

HTML とは？

ホームページを見るためには、ウェブブラウザーというソフトを使います。
今あなたは、なんというブラウザーをつかっていますか？

え？そんなブラウザーとか言われても・・・このぐるっとしたマークのアイコンを押せばインターネットが見れるよと教えてもらったから、わからないよ。

・・・ですよね。
「これでインターネットがみれます。」と教わったから、それで見てるという方も多いと思います。
（もちろん正確にお答えできる方もいらっしゃいますよね）

ですが今ここで覚えていただきたい。

みなさんがインターネットと呼んでいるのは、ホームページ（正しくはウェブサイト）で、それを見るための専用のソフト＝ウェブブラウザーで見ているということです。

今こうしてごらんになっている読み物も、私がつくったホームページ（しつこいようですが正しくはウェブサイト）で、あなたは専用のウェブブラウザーで見ているから読むことができています。

さてそのウェブブラウザーですが、どんな書式のものであっても表示してくれるものではありません。
HTML という書式に従ったデータでなければならないのです。

HTML は、ハイパー・テキスト・マークアップ・ラングエッジ Hyper Text Markup Language の略です。

ぐわぁ・・・横文字が！となりますよね。
落ち着いてください。

この HTML とは要するに、「普通の紙の書類にはできないようなことをやれちゃうようにした言語」といったところです。

おそらく言葉の意味よりも、この HTML でできることを実際に見たほうが分かりやすいと思います。

HTML でできること

リンクは大発明

まず HTML でできることの一番のウリは、リンクです。
インターネットを見てるとよく見かけますよね。「くわしくはこちら」みたいなもの。
これは、その「こちら」をクリックすると、詳しい情報を見せてくれるというもの。

普通の紙の書類ですと「詳しくは、別紙○○の○ページを参照ください」と書いてあったら、自分でその別紙○○の○ページを探さなければいけませんよね。とてもめんどくさいです。

HTML で書かれた書類ではその手間がありません。
「くわしくはこちら」を見つけたら、そこをクリックするだけで詳しい情報を見ることができる。

これは大発明だと思います。
そのおかげでホームページは発展していったといっても過言ではないと私は思います。
気になったことを次から次にクリックして見ることができるからこそ、読み物として、または広告として非常に有効な媒体となりえたと思います。
もしもリンクがなかったら・・・ここまでインターネットが普及しなかったと思います。

文章の構造を明確化できる

その他に HTML ができることとして、文章の構造を明確にできること。
「文章の中のこの部分が本題です、この部分は余談です。」という文章の意味付けができるというものです。
これは人間のために用意された機能というよりは、コンピューターのために用意された機能というべきものです。

人間は文章を読んでいて「あ、この部分は余談だね。あ、ここが大事なポイントだね」と文脈から理解ができますが、コンピューターにはそれはできません。
文脈を理解することができませんのでコンピューターにはただの文字の羅列でしかないんです。

そう考えると人間ってすごいですね！

それはさておき、その文脈をコンピューターに教えるためのものが HTML にはあります。

イメージとしてはこんな感じです。

<ここから大事なこと>この文は大事なこと<ここまで>

こういった感じで、大事なことの始まりを示す目印から、その終わりを示す目印を置くような書式でコンピューターに文章の意味付けを行います。
こういった目印となるものが HTML には用意されています。

<h1>一番大事な見出しです！</h1>

と書くと、この<h1> から</h1> の間で囲まれた文章はとても大事な見出しなのだとコンピューターが理解して、ひたすら大きな文字で表示してくれます。

他にも、下のように、本文となる部分と余談となる部分を明示する目印があります。

<main>ここは文章の本文となるところ。</main>
<aside>ここは余談です。そこまで大事ではない</aside>

ウェブブラウザーは画面に表示するものと、目が不自由な方のために文章を読み上げるものがあります。
その読み上げのときに、文章の構成をコンピューターが理解していることが大事なのです。
大事なところは音量をあげて強調する、余談はそこまで強調しないといった感じで。
それを実現するのが HTML です。

書類のレイアウトを指示できる

その他にも HTML には書類のレイアウトを指示するための目印があります。

枠組み、段組み、表、画像の配置などなど・・・そういった指定ができます。

ただ・・・

私が HTML を学んだ20年前は、HTML だけで書類のレイアウトをするのが主流でしたが、現在は CSS （カスケーディング スタイル シート）という、書類の書式を指定する別のものを用意するのが当たり前になりました。

Oh！ もう頭がついていかない・・・ですよね(^^;
そこは専門的に学びたいと思う方だけで良いと思います。

HTML では、こんな感じで表を作ったり・・・

段組みをしたり、画像を載せたり

この画像がアトリエKWのロゴです。

これらはすべて、HTML で決められた 目印で作られています。

• 表は <table> で始まる書式
• 段組みは <div> で始まる書式
• 画像は <img>

といった形で、コンピューターが理解できるような目印が用意されています。

これらの目印のことを タグ と呼びます。

HTML を習得する＝タグを覚える

さて、本当にざっくり HTML についてお話ししました。
次は、ホームページを作るために HTML を習得するにはということでお話しします。

それはもう単純なことです。

HTML のタグを覚えること。

それに尽きます。

これから HTML を学ぼうとしているみなさん。
安心してください。
タグは無数にあるわけではありません。たかが知れています。
数日使いまくっていたら覚えられるレベルです。

※ HTML についての詳しい話は、別テーマで記事を書いていこうと思います。

ホームページを持とうと思われている経営者のみなさんは、HTML の具体的なことについては考える必要はありません。
そんな細かいことを考えるよりも、自社のホームページでなにをアピールして売り上げにつなげるかということを考えていただきたいと考えるからです。

今回は、HTML でできることをざっくりとご理解できれば幸いです。

まとめ

最後まで読んでくださってありがとうございます。

この、「いまさらきけない○○」シリーズは、本当にいまさら人にきけないようなネタでつづっていきます。
皆様からのリクエストにもお答えしたいとおもいますので、いまさらきけないなぁということがありましたら、アトリエKW の Twitter または LINE公式アカウントまで、お送りください。

アトリエKW 公式 SNS

Twitter アカウント

LINE 公式アカウント