もはや現代社会に欠かせない存在となったインターネット。
その基本的な仕組みのひとつがHTMLです。誰もが一度は聞いたことがあると思います。
しかしそもそもHTMLとは何でしょうか？
しかし、具体的にそれが何を意味するかわかるでしょうか？
そこでここでは、今さら聞けないHTMLの基本を、わかりやすく解説したいと思います。
その仕組みがわかれば、ウェブサイトの基本的な構造がわかりますよ。
えっ本人じゃん！Audibleでは人気声優が原作のナレーションを担当！
HTMLとは何か？
HTMLは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略です。
ハイパーテキストを記述するための、マークアップ言語になります。
マークアップ言語とは、テキストにタグを使って特定の構造や意味を付けるための言語のことです。
World Wide Web（ワールド・ワイド・ウェブ）という、ハイパーテキストシステムにおいて、ウェブサイトを記述・構築する際に、HTMLを用います。
要するにHTMLとは、ウェブサイトを制作する際に用いる、基本的な言語であり仕組みのことです。
ハイパーテキスト
ハイパーテキストとは、ハイパーリンクによって複数の文書を関連付けできる仕組みです。いわゆるリンクのことで、文書と文書を紐付けられます。リンク機能は、今や一般的に知られるネットの仕組みですね。
マークアップ言語
マークアップ言語とは、タグ（山括弧のやつ）によってテキストを囲み、構造を表現するコンピュータ言語のことです。
World Wide Web
World Wide Webとは、ハイパーテキストによって記述されるシステムのことです。URLにある「WWW」はこれを指しています。インターネットの基幹構造であり、インターネットそのものを意味することもあります。
HTMLの他に、XMLというマークアップ言語も広く用いられています。
HTMLの役割
HTMLの決まりに従い、テキストを組み立てることで、ウェブサイトの構造を作り上げることができます。
HTMLは、ブラウザに対して「この部分は見出しです」「この部分は段落です」といった情報を伝える役割を果たします。
ブラウザはHTMLを解釈し、それに基づいてウェブページを表示します。
なのでHTMLという言語で書かれるているからこそ、コンピュータはそれがウェブサイトであると認識できるのです。
つまり人間にではなく、コンピュータに理解させるために用いる言語です。プログラミング言語も同様です。
そういった言語を総じて、コンピュータ言語と言います。
人間の話す言語も、それが公用語の国で話さないとうまく通じませんよね。それと同じ様なものです。
インターネットというウェブ上の世界では、HTMLが公用語なのです。
ウェブサイトを見るためのソフトがブラウザです。みなさんご存知の、ChromeやSafariやFirefoxなどです。
HTMLの基本構造
HTMLはどのような構造なのでしょうか？
初心者がいきなりソースコードだけ見ると、複雑怪奇な暗号文に感じるかも知れませんね。
でも実は、HTML自体は単純な構造をしています。
簡潔に言うと、「タグで文字列を囲み構造を表現する」というものです。仕組み自体は、とてもシンプルなんですね。
例えば、
<p>これは段落です。</p>
といった感じです。
これがHTMLなど、マークアップ言語の基本ルールです。
タグ
タグとは、<>（山括弧）で囲まれた部分のことです。<p>や<br>などがタグです。
タグには開始タグと終了タグがあり、終了タグには</p>のようにアルファベットの前にスラッシュが入ります。
マークアップ
開始タグと終了タグの間には文字列を書き入れます。タグに囲まれることで、その文字列には意味付けがされます。
こうした意味付けがマークアップです。
要素
タグで文字列を囲んだ一括りのかたまりを、要素と言います。
タグには様々な種類があります。例えば、<p>は段落、<br>は改行を意味付けするタグです。
そして、タグと文字列による要素をいくつも組み合わせて、HTMLの構造が出来上がります。
HTMLによる文書の例
では、HTMLを用いて書かれたサンプルを見てみましょう。
HTML文書は「文書型宣言、ヘッダ、文書の内容」という形で構成されます。
以下の様な形が基本になります。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<!-- ここにコンテンツを追加します -->
</body>
</html>
文書型宣言
一番最初の<!DOCTYPE html>の部分が、文書型宣言です。この文書がHTMLであることを宣言しています。
html
<html>タグは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の基本がわかっていれば、何かと役に立つでしょう。
