HTMLとは

css

HTMLはウェブページの記述に使用する言語あり「Hyper Text Markup Language」の頭文字を取ってHTMLと名づけられました。

直訳すると「ハイパーテキストをマークアップする言語」で、これはHTMLの機能をそのまま表しています。 ハイパーテキストとマークアップが分かればHTMLとは何かを理解できるので、順に見てみましょう。

ハイパーテキストとは

ハイパーテキストとは、複数のテキストを相互に関連付け(リンク)ができるテキストの事です。 例えばウェブページのリンクを押せば、リンク先に飛ぶことができますよね。 これは紙文書ではできないことで、テキストを超えたテキストということでハイパーテキストと名付けられました。

ハイパーテキストにおけるリンクをハイパーリンクといいます。 HTML文書はハイパーリンクによって、他のハイパーテキストへのリンクや画像・動画などの埋め込みなどを実現しています。 例えば下のGoogleへのリンクと画像の表示はどちらもハイパーリンクによって実現しています。

Googleへのリンク html

「画像もハイパーリンクなのか」と思うかもしれませんが、HTMLではアップロードされた画像のURLを記述して表示させることができます。 アップロードしたのが自分であれ他人であれ、画像のURLさえ分かれば表示できます。つまりはリンクによって表示しているのでハイパーリンクなのです。

今日のウェブは、ネットに繋げばクリック一つで世界中の文書を調べられます。 インターネットが存在しなかった頃には想像し得なかったような、まさにハイパーなテキストと言う訳です。

マークアップとは

マークアップとはテキストの部分がどのような役割なのか目印を付ける事です。 ここは見出し、ここは段落、ここは赤文字、といった具合にテキストに目印を付ける事でテキストの役割を示します。

例えば履歴書は名前・住所・経歴といった具合に、その部分の役割が示されていますよね。 丁度あんな感じでコンピュータに対してテキストの役割を示すのがマークアップです。

HTMLにおいては文章を「タグ」付けする事によってマークアップを実現します。 我輩は猫であるの一節をマークアップした場合、こんな感じになります。

テキスト

我輩は猫である
我輩は猫である。名前はまだない。

ハイパーテキスト

<h1>我輩は猫である</h1>
<p>我輩は猫である。名前はまだない。</p>

コンピュータにとってマークアップ前の文章は文字の羅列に過ぎません。見出しなのか段落なのかリンクなのか画像なのかも判断できない状態です。 しかしタグによって<h1>~</h1>が「見出し(題名)」、<p>~</p>が「段落(文章)」といった具合に役割を明記することで、そのテキストが一体何なのかを判断できるようになる訳です。

まとめと補足

HTMLは「Hyper Text Markup Language」の略と冒頭で言いました。 ここまで説明した内容で噛み砕いて言えば、「HTMLは通常のテキストをハイパーテキスト仕様に書き換えて、コンピュータに対してテキストの役割を示すための言語」という訳です。

HTMLは通常の文章をコンピュータに理解できるように「タグ」で役割を明記するのが役割です。 タグは数百種類あって全て覚えるのは無理ですが、普段使うものはそう多くはないので順次覚えていきましょう。

HTMLは環境を問わずに利用できる

HTMLの重要な特性として、環境を問わず利用出来る文書形式である事が挙げられます。 ウェブサイトは特徴的で多様なレイアウトをしていますが、実はHTMLの構造は本質的に変わっていません。

レイアウトや表現はCSS(スタイルシート)という言語で表現し、レイアウトを変えたいときはCSSのみを変更します。 CSSを変更すれば見た目はまるで違うサイトに変わりますが、HTML文書は何も変わっていないのです。

HTMLはマークアップ言語であり、プログラム言語ではない

ちなみにマークアップ言語はプログラム言語とは別物です。 プログラム言語とは「順次・選択・繰返し」によってデータを処理するもので、マークアップ言語にそのような機能はありません。 なのでHTMLマークアップをコーディングとは言いますが、プログラミングとは言わなかったりします。

\share/

よく読まれている記事