HTMLソースコードとは何ですか？

HTMLソースコードとは？

ウェブサイトを閲覧するとき、私たちは画面に表示された情報を見ていることになります。しかし、その背後ではコンピュータが理解できる言語で書かれた指示が存在し、ウェブサイトの見た目を形作っています。この指示書こそが「HTMLソースコード」と呼ばれるものです。

HTMLソースコードの正体

HTMLソースコードは、ウェブサイトの構造や内容を記述するためのプログラミング言語で記述されたテキストのことです。コード、ソース、ソースプログラム、原始プログラムとも呼ぶこともあります。

もう少し具体的に説明すると、HTMLソースコードは、ウェブページの要素（文章、画像、リンクなど）をどのように配置し、どのように表示するかをブラウザに指示する役割を担っています。私たちが普段目にしているウェブサイトは、このHTMLソースコードをブラウザが解釈し、実行した結果なのです。

HTMLソースコードの例

例えば、「こんにちは、世界！」という文字列と、その下に表示される猫の画像を含む簡単なウェブページがあるとします。このページのHTMLソースコードは、以下のように記述することができます。


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルページ</title>
</head>
<body>
  <h1>こんにちは、世界！</h1>
  <img src="cat.jpg" alt="猫の画像">
</body>
</html>

上記のコードでは、<h1>タグで囲まれた部分が「こんにちは、世界！」という見出しとして表示され、<img>タグは"cat.jpg"という名前の画像ファイルをウェブページに表示するようブラウザに指示しています。

HTMLソースコードの確認方法

WEBページの構造を記述しているHTMLなどの文書のソースコードは、WEBブラウザの機能を用いたりファイルをダウンロードしたりすることで簡単に見ることができます。ここでは、Google Chromeを例に、ソースコードを表示する手順を紹介します。

ソースコードを確認したいWEBページを開きます。
ページ上の何もないところで右クリックし、「ページのソースを表示」を選択します。または、キーボードの「Ctrl + U」キーを押します。
新しいタブが開き、WEBページのソースコードが表示されます。

HTMLソースコードの構成要素

HTMLソースコードは、様々なタグと呼ばれる要素で構成されています。タグは、<> で囲まれた英単語で表現され、開始タグと終了タグの間にコンテンツを記述します。例えば、<p>タグは段落を表し、以下のように使用します。


<p>これは段落です。</p>

主なHTMLタグとその役割を以下の表にまとめます。

タグ	役割
<html>	HTML文書の開始と終了を示すタグ
<head>	文書のメタ情報を記述するタグ
<title>	文書のタイトルを記述するタグ
<body>	ブラウザに表示される内容を記述するタグ
<h1>〜<h6>	見出しを記述するタグ (h1が最も大きい見出し)
<p>	段落を記述するタグ
<a>	リンクを記述するタグ
<img>	画像を表示するタグ
<ul> <ol> <li>	リストを記述するタグ (ulは番号なし、olは番号付き)
<table> <tr> <td>	表を記述するタグ

HTMLソースコードとは？

HTMLソースコードの正体

HTMLソースコードの例

HTMLソースコードの確認方法

HTMLソースコードの構成要素

関連QA

Q：HTMLソースコードを編集すると、ウェブサイトの内容が変わりますか？

Q：HTMLソースコードを見ることは違法ですか？

Q：HTMLソースコードを学ぶメリットは？