「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

最初に留意事項です。
「HTML」と言われて「あぁ、アレのことね」と分かる方は最後まで読む必要ありません。
HTMLの正式名称（？）が「HyperText Markup Language」です。
「HyperText Markup Language」を何となく省略したのが「HTML」ね。



※「HyperText Markup Language」を何となく日本語にすると「ホームページのファイル用の印を付ける言語」となります。[詳細]

以上が「HTML」の意味を知っている人向けの説明です。

「HTMLって何だっけ？」な人は、このまま読み進めてください。
用語の中身について説明します。



それでは、いってみましょう。
まずは予備知識として「マークアップ言語」について説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

マークアップ言語は「目印で囲む（マークをつける）ことで構造を表現する書き方ルール」です。

例えば、そうですね。
ピヨ太君が、とある文書ファイルに

ピヨ太君は、とってもお腹が空いています。

と書いたとします。



ピヨ太君は、すごいお腹が空いているのです。
「とっても」の部分を強調したいです。



ピヨ太君が文章を書いた文書ファイルには「<strong>」と「</strong>」で囲った部分は強調扱いになる、というルールが ありました。
そこで、ピヨ太君は文書ファイルの中身を

ピヨ太君は、<strong>とっても</strong>お腹が空いています。

と書き換えました。

これでピヨ太君のお腹の空きっぷりが強調されましたね。
ピヨ太君は満足です。

ここで、この文書ファイルの書き方に注目してください。
目印を付けることで「ここは強調だよ」と文書構造を表現しました。

このような

目印で囲む（マークをつける）ことで構造を表現する書き方ルール

がマークアップ言語です。
今回の例であれば「ピヨ太君が文章を書いた文書ファイルはマークアップ言語で書かれている」と言えます。

以上を踏まえて、マークアップ言語のひとつで

ホームページのファイルを書くときに使う、ファイルの書き方ルール

が「HyperText Markup Language」です。
上でも書きましたが、一般的には「HTML」と表現されます。
※本ページでも以降は「HTML」と表現します。

まずは、ホームページのファイル構成の観点から、HTMLについて見てみましょう。
この説明を書いている時点では、ホームページは

・内容が書いてあるファイル
・見た目が書いてあるファイル
・絵が描いてあるファイル
・動作が書いてあるファイル

の4種類のファイルを組み合わせて1つのページを表示するのが主流です。



内容が書いてあるファイルは「HTMLファイル」と呼ばれています。



あら、いきなり「HTML」という単語が出てきましたね。
とりあえず先に進みましょう。

HTMLファイルは内容を書いておくファイルです。
ページの核となるファイルですね。

見た目が書いてあるファイルは「CSSファイル」と呼ばれています。



CSSファイルは見た目に関するルールを書くファイルです。
例えば

・ホームページの横幅はどれくらいにしよう
・この目印を付けた文字の色は何色にしよう
・この目印を付けた範囲に背景を付けよう

などのルールを書いておきます。

絵が描いてあるファイルは「画像ファイル」です。



画像ファイルは説明しなくても分かりますよね？

最後に、動作が書いてあるファイルが「JavaScriptファイル（jsファイル）」です。



JavaScriptファイル（jsファイル）は「動作」を定義するファイルです。
例えば

・ページを表示するときに、こんな動きをしてよ
・他のページに移動するときに、こんな動きをしてよ
・このボタンを押したら、こんな動きをしてよ

などの指示を書いておきます。

これら4種類のファイル

・HTMLファイル（内容）
・CSSファイル（見た目）
・画像ファイル（絵）
・JavaScriptファイル（動作）

が組み合わさることによって、ホームページの中の1ページが形作られています。



この4種類のファイルのうち、HTMLファイルの中身を書くときのルールを定義したものが「HTML」です。



先ほど、マークアップ言語は

ファイルの書き方ルール

だと説明しました。
HTMLは、ホームページのファイルの書き方ルールです。

また、マークアップ言語は

「このマークを付けたら、こんな意味になるから！」なルールの寄せ集め

だと説明しました。
HTMLも「このマークを付けたら、こんな意味になるから！」なルールの寄せ集めです。

例えば、そうですね。
ピヨ太君が以下の文章を書いたとしましょう。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

この文章をホームページに載せるために、HTMLのルールに従ってマークを付けました。
ピヨ太君がマークを付けた結果は、以下の通りです。

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>

少し大雑把に説明しますが「<h1>」「</h1>」で囲まれた部分は、HTMLのルールでは「これは大見出しですよ～」の意味になります。
同様に「<h2>」「</h2>」で囲まれた部分は「これは小見出しですよ～」の意味です。
「<p>」「</p>」で囲まれた部分は「これは本文ですよ～」の意味になります。

ピヨ太君の書いた文章は、HTMLのルールに沿ってマークを付けたことで以下のような意味合いになりました。

■ピヨ太とは（←これは大見出し）
(1)見た目（←これは小見出し）
愛嬌は多分ある（←これは本文）

(2)性格（←これは小見出し）
イイ性格（←これは本文）

(3)経済状況（←これは小見出し）
庶民レベル（←これは本文）

おぉ、なんか文章の構造が分かりやすくなりましたね。

さて、この文書ファイルをWebブラウザ（ホームページを見るときに使うソフト）で見ると、どうなるでしょうか。

実は、ホームページを見るソフトが、HTMLのルールに沿って付けられたマークに注目することで、文章の構造を判断してくれます。
そして、勝手に見た目を整えてくれるのです。
例えば「これは見出しか～。じゃあ目立つように表示してやるか」みたいなことをやってくれます。

その結果、ピヨ太君が書いた文章（にHTMLのルールに沿ってマークを付けた）

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>

は、ホームページを見るソフトで表示すると

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

のような見た目になります。

参考までに、HTMLのマークを付けていない文章は、以下のように表示されます。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル

いかがでしょう。
見た目が違いますよね。
これは、ホームページを見るソフトが、文書構造を判断して、見た目を整えてくれているからです。

流れとしては

１．文章を用意する
２．HTMLのルールに沿ってマークを付けることで、文章に意味付けをできる
３．ホームページを見るソフトが、HTMLのマークを見て構造を判断し、見た目を変えてくれる

となります。
これがホームページが表示されるときの基本的な流れです。

ホームページが表示されるときは、それに加えてCSSとかJavaScriptとかが登場します。
余裕ができたら勉強してください。