IT入門講座

HTMLとは何か?ハイパーテキストを記述するマークアップ言語である!

もはや現代社会に欠かせない存在となったインターネット。

その基本的な仕組みのひとつがHTMLです。誰もが一度は聞いたことがあると思います。

しかしそもそもHTMLとは何でしょうか?

しかし、具体的にそれが何を意味するかわかるでしょうか?

そこでここでは、今さら聞けないHTMLの基本を、わかりやすく解説したいと思います。

その仕組みがわかれば、ウェブサイトの基本的な構造がわかりますよ。

HTMLとは何か?

HyperText Markup Language

HyperText Markup Languageは、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTMLと呼ばれることが多い。SGMLを元に開発された。World Wide Webにおいて、ウェブページを表現するために用いられる。

Wikipedia

HTMLは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略です。

ハイパーテキストを記述するためのマークアップ言語になります。

World Wide Web(ワールド・ワイド・ウェブ)という、ハイパーテキストシステムにおいて、ウェブサイトを記述・構築する際に用います。

要するにHTMLとは、ウェブサイトを制作する際に用いる、基本的な仕組みのことです。

ハイパーテキスト

ハイパーテキストとは、ハイパーリンクによって複数の文書を関連付けできる仕組みです。いわゆるリンクのことで、文書と文書を紐付けられます。リンク機能は、今や一般的に知られるネットの仕組みですね。

マークアップ言語

マークアップ言語とは、タグ(山括弧のやつ)によってテキストを囲み、構造を表現するコンピュータ言語のことです。

World Wide Web

World Wide Webとは、ハイパーテキストによって記述されるシステムのことです。URLにある「WWW」はこれを指しています。インターネットの基幹構造であり、インターネットそのものを意味することもあります。

HTMLの他に、XMLというマークアップ言語も広く用いられています。

HTMLの役割

HTMLの決まりに従い、テキストを組み立てることで、ウェブサイトの構造を作り上げることができます。

HTMLという言語で書かれるているからこそ、コンピュータはそれがウェブサイトであると認識できるのです。

つまり人間にではなく、コンピュータに理解させるために用いる言語です。プログラミング言語も同様です。

そういった言語を総じて、コンピュータ言語と言います。

人間の話す言語も、それが公用語の国で話さないとうまく通じませんよね。

それと同じ様なものです。

インターネットというウェブ上の世界では、HTMLが公用語なのです。

ウェブサイトを見るためのソフトがブラウザです。ご存知Chrome、Safari、Firefoxなどが代表です。ブラウザはウェブサーバーに接続し、HTMLなどの言語を読み込んで、サイトを表示しています。

HTMLの基本構造

HTMLはどのような構造なのでしょうか?

初心者がいきなりソースコードだけ見ると、複雑怪奇な暗号文に感じるかも知れませんね。

でも実は、HTML自体は単純な構造をしています。

簡潔に言うと、「タグで文字列を囲み構造を表現する」というものです。

とてもシンプルで簡単ですね。

これがHTMLなど、マークアップ言語の基本ルールです。

これさえ分かっていれば、わりと簡単にHTMLを理解していくことができると思いますよ。

タグ

タグとは、<>(山括弧)で囲まれた部分のことです。<p>や<br>などがタグです。

タグには開始タグと終了タグがあり、終了タグには</p>のようにアルファベットの前にスラッシュが入ります。

マークアップ

開始タグと終了タグの間には文字列を書き入れます。タグに囲まれることで、その文字列には意味付けがされます。

こうした意味付けがマークアップです。

要素

タグで文字列を囲んだ一括りのかたまりを、要素と言います。

タグには様々な種類があります。例えば、<p>は段落、<br>は改行を意味付けするタグです。

そして、タグと文字列による要素をいくつも組み合わせて、HTMLの構造が出来上がります。

IT関連においては、まずザックリと「こんな感じ」といった概要から掴むのが重要です。

HTMLによる文書の例

では、HTMLを用いて書かれたサンプルを見てみましょう。

HTML文書は「文書型宣言、ヘッダ、文書の内容」という形で構成されます。

文書型宣言

一番最初の<!DOCTYPE html>の部分が、文書型宣言です。この文書がHTMLであることを宣言しています。

ヘッダ

<head>から</head>にかけてがヘッダです。ヘッダとは情報技術における先頭のデータのことです。この文書がどういった構成かを示しています。

文書の内容

<body>から</body>にかけてが文書の内容です。ウェブサイトを開いた際に、実際に表示される部分です。

どんなに複雑に見えるHTML文書でも、基本は同じです。

「文書型宣言、ヘッダ、文書の内容」です。

こうしたコンピュータ言語で書かれた文書を、ソース(source)、またはソースコードと呼びます。

HTMLとCSS

HTMLに関して調べると、セットのようにCSSという言葉もくっついてきます。

CSSとはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、スタイルシートのひとつです。

スタイルシートとは、HTMLなどマークアップ言語で書かれた文書の、見た目を記述するコンピュータ言語です。

つまり、色やフォントやレイアウトといった、実際の見た目を整えるのがCSSです。

まずHTMLで構造を記述し、表示スタイルをCSSで記述する、といった形が基本です。

HTMLとプログラミング

 

HTMLは構造自体はシンプルです。

なのでプログラミングの入門は、HTMLから始めるのが一般的な様です。

厳密にはマークアップ言語(データ記述言語)なので、プログラミング言語ではないです。

しかしコンピュータ言語への入門としては、最適だと言えるでしょう。

IT関連の学習の際に、丸暗記しようとするのは良くありません。基本や仕組みを抑えるのが重要です。

まとめ

HTMLはインターネットを形作る重要な基盤と言えます。

HTMLがあるからこそ、ウェブサイトはその基本的な構造を作り上げることができます。

これからも一層と、ネットの重要性は高まっていくと思われます。

どんなに新しい言語が生まれても、HTMLの基本は生かされ、残り続けるでしょう。