HTML とは

HTML」は Web ブラウザ上に何かしら表示を行いたいときに使う言語になります。

「言語」というと少し難しく聞こえるかもしれませんが、あまり難しく考える必要はなくてコンピューターとコミュニケーションを取る 1 つの手段だと思ってもらえたらと思います。

例えば、日常生活での「言語」を考えてみてください。

僕たちは誰かとコミュニケーションを取る時、次のような方法でコミュニケーションをとります。

  • 相手が日本人出れば「日本語」でコミュニケーションをとる
  • 相手がアメリカ人であれば、「英語」でコミュニケーションをとる


これと同じように、「Webブラウザ」とコミュニケーションをとるときの1つの手段にHTMLというものがあると認識していただけたらと思います。

そして HTML の役割は、冒頭でも書いたように「Web ブラウザに表示したい内容を伝えること」です。

HTML は「HyperText Markup Language」の頭文字を取ったものです。

HTML の「L」は「Language(=言語)」ということから「言語」を意味していることがわかります。

「言語」ということは「何かしら」とコミュニケーションを取ることになりますが、ここでいう「何かしら」が「Web ブラウザ」になります。

HTML で書かれたコードと Web ブラウザの様子

HTML の基本的な書き方は次回解説します。

ここでは「HTML で書かれたサンプルコード」と「Web ブラウザに表示された内容」を比較しながら、サンプルコードのどの部分が、Web ブラウザのどの部分と紐付いているかのイメージを掴んでいただけたらと思います。

サンプルコード

1 2 3 4 5 6 7 8 9 10 11 12 13 14
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>ここは大きく表示されます。</h1>
    <p>pは「paragraph(=段落)」のpです。</p>
    <p>「img」を使うと画像の表示ができます。</p>
    <img src="https://html-css.sokushu-class.com/images/og-image-for-top.png" />
  </body>
</html>

サンプルコードの内容が Web ブラウザに反映された様子

画像をクリックすると別タブで画像が開きます。
サンプルコードをWebブラウザで確認した様子

今回のサンプルコードの注目ポイント

サンプルコードの 8 行目の<body>と、 13 行目の</body> 間に記述した内容が Web ブラウザ上に表示されているのに気付けたでしょうか?

  • 9 行目の<h1></h1>で囲った文字が Web ブラウザの一番上に大きく表示されている
  • 10,11 行目の <p></p>に囲まれた部分が、h1 で囲まれたところよりも、少し小さく表示されている
  • 12 行目の<img> の中の src="..."の「...」の部分に記述した画像 URL の内容が Web ブラウザに表示されている。



それでは次に、もう少し具体的な「HTML の書き方」を学んでいきましょう!

results matching ""

    No results matching ""