サービス別コラム

ホーム > サービス別コラム > Webサイト制作 > 新人WEB担当者必見！今さら聞けないHTML

日々進化し続けるWEB業界。
新しい専門用語も次々と出てくる中、基礎中の基礎の「HTMLって何？」なんて聞けなくて困っている方もいるのではないでしょうか？
今回は、そんなあなたのために、「そもそもHTMLとは？」というところから、基本的なWEBページの表示までの仕組みを簡単にご説明いたします！

そもそもHTMLって？

さて早速ですが問題です！
HTMLとは、どんな言葉の頭文字を取ったものでしょうか？

正解は
「ハイパーテキストマークアップランゲージ（HyperText Markup Language）」です！

はて？
このままではわかりづらいので、一つひとつ分解してみましょう！

ハイパーテキスト

ハイパーリンクを埋め込むことができる高機能なテキスト。
「ハイパーリンク」は、ウェブページで下線の付いたテキストなどをクリックすると別ページへ移動する、あのリンクのことです。

ハイパーテキストでできることは

• ウェブページから別のウェブページにリンクをはる
• ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込む

つまり、読むだけだったテキストを、読者がより快適にかつ情報を得やすいような機能を備えたテキスト（ハイパーだ！）ということになります。

マークアップ

続いて「マークアップ」とは何のことでしょうか？
端的に言うと、文書の各部分がどのような役割を持っているのかを示すということです。

みなさんはHTMLファイルを開いた時に
<h1>◯◯◯◯◯◯</h1>
とか
<p>あああああああああああああああ</p>
といった、ものを見たことはないでしょうか？
これは「タグ」と呼ばれるもので、ここに記載されているテキストは何の意味を持っているか。ということを表すものです。

例えば、
<h1>は、ここが一番最初の大見出しですよ。という意味になります。
（見出しタグはh1以外の後、h2・h3・h4……と続いていきます。）
本などでも使われている大見出しと、小見出しのようなイメージですね！

<p>はパラグラフ（paragraph）の頭文字、つまり文章の段落を囲っていますよ。という意味です。
このように各テキストに意味をもたせることによって、検索エンジンにこのサイトがどういった内容のサイトであるかを認識してもらい、より情報を求めている人に求めている情報が正確に伝わるようにするためのものになります。

その他のタグを知りたい方はこちら（http://www.tagindex.com/html_tag/elements/）

つまりハイパーテキストマークアップランゲージとは、文書の論理構造や表示の仕方などを記述することができる言語（ランゲージ）ということになります。

デザインを表示するためには？

「あれ？でもHTMLだけだとデザインって表示できないんじゃ…」
と気づいた方は、いらっしゃいませんか？
そうなのです。HTMLファイルだけでは、デザインは表示できないのです!!

HTMLは画面を表示するための命令を記述する言語でしたね。
WEBには用途によって様々な表現方法が必要になります。ひとつの言語だけですべてを担うことは難しいし、運用上もとても不便です。
そのため、用途によって様々な言語が開発されました。

そこで登場するのが「CSS」と「js」。こちらも聞いたことはあるのではないでしょうか？
CSSはカスケーディング・スタイル・シート（Cascading Style Sheets）の略で、HTMLが文書の意味や構造を定義するものなら、スタイルシートは「Webページのデザインやレイアウトを定義するもの」です。
JsはJavaScriptの略で、動きのある画面を構成したり，種々の計算や情報検索などをWeb上で実現するためのものです。

なんかムズカシイ……　もっと簡単に！！！
HTML　→　表示する内容を記述するよ！
CSS　→　表示するデザインを記述するよ！
js　→　表示の仕方や動き方を記述するよ！
というイメージです。

例えば青い太字の「5秒後に消えるよ」という文字を5秒後に消したかったら……
【HTML】

5秒後に消えるよ

→表示する文字を記述

【CSS】
. hogehoge {
color : #0000FF;
font-weight : bold;
}
→表示する文字の太さと色を記述

【js】
//
→5秒後に消える動作を記述

となります！

いかがでしたでしょうか？
今回はHTMLのことから、ホームページが表示するまでに必要なファイルを簡単にご紹介しました！　これを機会に、HTMLに興味を持っていただけるとうれしいです！

【編集担当：鈴木】