HTMLってどういうものなの?

HTMLを見ているクエスチョンマークがついた子供のイラスト プログラミング言語

HTMLって何?

HTML/CSS初級内容から学習を再開するにあたり、「HTMLってそもそもどういうものなんだろう」と思い、いろいろ調べてみることにしました。

あるく
あるく

HTMLって字面はよく見るけど、細かい仕組みとかよくわかってないんだよね。どういうものか概要を教えてよ。

AI先生
AI先生

HTMLとは、「HyperText Markup Language」(ハイパーテキストマークアップランゲージ)の略で、Webページの骨組みを作る言語です。

家でいうと「柱と壁」にあたる部分で、ブラウザはこのHTMLを読み取って、私たちにページを見せてくれています。

あるく
あるく

「柱と壁」にあたるものか〜。家でいう基礎的なところだね。

ところでLanguageは言語だからわかるとして、「ハイパーテキスト」と「マークアップ」ってなんなの?

ハイパーテキストとは?

📘 一言でいうと:

「リンクがついた文章」のこと!

🔍 もう少し詳しく:

ふつうの本や文章は、1ページずつ順番に読みます。でも、ハイパーテキストは、「ここの言葉をクリックすると、別のページにジャンプできる!」という仕組みがあります。

💡 例:

<a href="https://example.com">くわしくはこちら</a>

👆この「くわしくはこちら」をクリックすると別のページに行けます。
これがまさに ハイパーテキストの特徴!

マークアップとは?

📘 一言でいうと

「文章の中に目印をつけること」

🔍 もう少し詳しく

HTMLでは、ただの文字だけじゃなくて、

  • 「ここは見出しだよ」
  • 「ここは太字だよ」
  • 「ここはリンクだよ」

というふうに、コンピューターにわかるように「しるし(タグ)」をつけることを「マークアップ」といいます。

💡 例

<h1>これは見出しです</h1>
<p>これは文章です</p>

👆この <h1><p> が「マークアップ(タグ)」と呼ばれるものです。

あるく
あるく

リンク付きの文章とコンピュータがわかる「しるし(タグ)」をつける言語ってことか。

それらを略すとHTMLになるんだね。

AI先生
AI先生

その通り!とてもよく理解できていますね。

「リンク付きの文章」=ハイパーテキスト、「コンピュータがわかるしるし」=マークアップ(タグ)、それを合わせたのが HTML(HyperText Markup Language) です。

つまり、「つながる+伝わる」文章を作るためのしくみなんです。

今後HTMLを学んでいくと、「どこがタイトルか」「どこがリンクか」「画像はどれか」などを、タグで丁寧に伝えることの大切さがどんどん見えてきますよ。

HTMLってどうして生まれたの?

概要はわかりましたが、なぜこのようなものができたのか興味があったので、HTMLが生まれた経緯をAI先生に聞いてみました。

あるく
あるく

HTMLの言葉の意味と概要はわかったよ。でもどうしてこういう言語が生まれたんだろう?

初めに考えた人は誰なの?

AI先生
AI先生

とても良い視点ですね! ではわかりやすくまとめた説明をご紹介します。

誰が、どんな目的で作ったの?

インターネットがまだ一般に広まっていなかった1980年代後半、研究者たちは世界中で情報をやりとりする必要がありました。
でも当時は、決まった形式で情報を共有できる仕組みがなかったため、情報がバラバラで、うまく整理されていなかったのです。

そこで立ち上がったのが、ティム・バーナーズ=リー(Tim Berners-Lee) さんというイギリスの研究者。

彼はスイスのCERN(欧州原子核研究機構)で働いていたときに、「研究成果やドキュメントを簡単に共有できる仕組みが必要だ」と考え、1989年に“ワールド・ワイド・ウェブ(WWW)”の構想を発表しました。

このとき同時に生まれたのが、**HTML(ハイパーテキスト・マークアップ・ランゲージ)**です。

あるく
あるく

プログラム用の簡単な共通言語として使うために生まれたってことかな。

HTML以外にわかりやすい共有言語はなかったの? 英語とか。

AI先生
AI先生

鋭い質問ですね! わかりやすくお答えします。

HTMLは「共通言語」だった?

英語じゃダメだったの?

インターネット初期の時代、世界中の人が情報をパソコン同士でやり取りするためには、人間の言葉(たとえば英語)ではなく、コンピュータが読める形の共通ルールが必要でした。

英語はあくまで「人間が読むための言葉」。でもパソコンは、「ここが見出しだよ」「ここがリンクだよ」などを、ルール(構造)として明確に理解できる必要があります。


なぜHTMLが選ばれたのか?

HTMLは「英語っぽい見た目」をしていて読みやすく、しかもコンピュータにとっても扱いやすいという、**人間とコンピュータの“間をつなぐ言語”**として優れていたのです。

<h1>こんにちは</h1>
<p>これは段落の文章です。</p>

↑このように、「見出し(h1)」や「段落(p)」などのルールをタグで示すことで、どこが何かを、機械にも伝えられるようになります。


他に共通言語はなかったの?

当時も、プログラミング言語(C言語、Perlなど)は存在していましたが、それらは ロジック(計算・処理)に特化した言語であり、「文章や画像をどう見せるか」といった見た目の構造化には向いていませんでした。

HTMLは、情報を「整理して表示する」ことに特化した共通言語として生まれたため、今のような「誰でも簡単にWebページを作れる世界」の基礎になったのです。

あるく
あるく

なるほど! 人間とコンピュータの両方にわかりやすい言語が、それまでなかったんだね。

AI先生
AI先生

はい。こうした背景を知ると、HTMLが「ただのタグの集まり」ではなく、世界中とつながるための“架け橋”だったことがわかりますね!

📝 まとめ:HTMLってこういうものだった!

あるく
あるく

今日はHTMLについていろいろ聞いて、かなりスッキリした気がするよ。
最後にざっくりまとめておこうか!

AI先生
AI先生

はい、今回の学びを以下に整理してみましょう!

✅ HTMLとは?

  • 正式名称は HyperText Markup Language
  • Webページの**骨組み(構造)**を作るための言語
  • 見出し・段落・リンク・画像などの要素を「タグ」で示す

✅ 「ハイパーテキスト」って?

  • リンク付きの文章のこと
  • クリックで別ページに飛べる構造

✅ 「マークアップ」って?

  • コンピュータが理解できるように目印をつけること
  • <h1><p>などの「タグ」がその目印になる

✅ なぜHTMLが生まれたの?

  • 情報共有を効率化するために生まれた共通の表現ルール
  • 世界中の研究者が「誰でも簡単に情報を共有できる」ための手段
  • 英語では構造を伝えられないため、HTMLが必要だった

✅ HTMLのすごさって?

  • 人にもコンピュータにも読みやすいという絶妙なバランス
  • 「タグを使って伝える」ことで、どんな環境でも同じ表示が可能
あるく
あるく

タグで伝えるっていうのが、Webの“共通ルール”なんだね。

AI先生
AI先生

はい、それがまさにHTMLの役割です。この基礎があるからこそ、次に学ぶCSSやJavaScriptが活きてくるんですよ。

今回はHTMLで気になったことを、AI先生に教えてもらいました。まだまだわからないところも多いので、引き続き勉強していこうと思います。ではでは。

コメント

タイトルとURLをコピーしました