HTMLとは？
はじめての Hello World

1. HTMLはどこで使う？

Lesson 3 で見た職種の表を思い出してください。 HTMLを書くのは、フロントエンド（画面）を担当する PG（プログラマー）のマスです。

また Lesson 2 では、Webサーバーから届いた HTML・CSS・JavaScript を、 ブラウザが組み立てて画面に表示することを学びました。今日はその「届けられる側のファイル」を、自分で作ってみます。

2. HTML・CSS・JavaScript の役割分担

Webページは、役割の違う3つの言語でできています。このシリーズでも、この3つを順番に学んでいきます。

この3つは、Lesson 7〜9 のポートフォリオ作りで、HTML → CSS → JavaScript の順に1つずつ足していきます。今日はまず HTML です。

3. HTMLは「タグ」で意味を付ける

HTML は HyperText Markup Language の略です。「Markup（マークアップ）」とは、文章に目印を付けること。 HTMLでは、< と > で囲んだタグという目印で、文章の各部分が「何なのか」をブラウザに伝えます。

4. よく使うタグ

タグはたくさんありますが、最初はこれだけ知っていれば十分です。どれも Lesson 7 のポートフォリオで使います。

src="cat.jpg" のように、タグの中に書く追加情報を属性（ぞくせい）と呼びます。 img なら「どの画像を表示するか（src）」「画像の説明（alt）」を属性で指定します。

5. HTMLページの基本の形

HTMLファイルは、いつも次のような「お決まりの形」で書きます。最初は意味を全部覚えなくて大丈夫。「こういう箱に入れるもの」と思ってください。

<!DOCTYPE html>            ← 「これはHTMLです」という宣言
<html lang="ja">           ← ここからHTML（日本語のページ）
<head>                     ← ページの「設定」を書く場所（画面には出ない）
  <meta charset="UTF-8">   ← 文字コードの指定（文字化け防止）
  <title>タイトル</title>  ← ブラウザのタブに表示される名前
</head>
<body>                     ← ここに書いたものが画面に表示される
  ここに中身を書く
</body>
</html>                    ← HTMLの終わり

たとえるなら、<head> は荷物の送り状（中身ではないけれど大事な情報）、 <body> は箱の中身です。

6. やってみよう：Hello World!

プログラミングの世界では、はじめて書くプログラムで 「Hello World!」と表示するのが昔からのお約束です。 1970年代のプログラミング言語の入門書で使われたのが始まりと言われ、今では世界中のエンジニアが最初に通る「入学式」のようなもの。 さっそくやってみましょう。（ここでは Windows のメモ帳を使います）

1. 作業用のフォルダを作る

   デスクトップで右クリック →「新規作成」→「フォルダー」を選び、名前を hello にします。

2. メモ帳を開く

   スタートメニューで「メモ帳」と検索して開きます。

3. 次のコードを入力する

   まずは1文字ずつ自分で打ってみるのがおすすめ。どうしても大変なら「コピー」ボタンを使ってもOKです。

   hello.htmlコピー

   <!DOCTYPE html>
   <html lang="ja">
   <head>
     <meta charset="UTF-8">
     <title>はじめてのHTML</title>
   </head>
   <body>
     <h1>Hello World!</h1>
     <p>これが私のはじめてのWebページです。</p>
   </body>
   </html>

4. 「hello.html」という名前で保存する

   メニューの「ファイル」→「名前を付けて保存」を選び、先ほど作った hello フォルダに保存します。 このとき、次の3点に注意してください。

   • ファイル名：hello.html（最後を .html にする）
   • ファイルの種類：「すべてのファイル」を選ぶ（「テキスト文書」のままだと hello.html.txt になってしまう）
   • エンコード：「UTF-8」を選ぶ（文字化け防止）

5. ダブルクリックで開く

   保存した hello.html をダブルクリックすると、ブラウザが開いて次のように表示されます。

↑ 表示例（実物です）。ブラウザのタブには <title> に書いた「はじめてのHTML」が表示されます。

ちょっと改造してみよう

メモ帳に戻ってコードを書き換え、上書き保存（Ctrl + S）してから、ブラウザで再読み込み（F5）してみましょう。

• Hello World! を自分の名前に変えてみる
• <p> の行をコピーして、2行・3行と増やしてみる
• <h1> を <h2> や <h3> に変えて、大きさの違いを見てみる

おまけ：他のサイトのHTMLものぞいてみよう

ブラウザで好きな Webページを開いて、Ctrl + U を押してみてください。 そのページの HTML（ソースコード）が表示されます。どんな大きなサイトも、<html> や <body> から始まっているのがわかるはずです。 もちろん、このページでも見られますよ。

7. うまくいかないときは

確認クイズ

選択肢をクリックしてください。

まとめ

• HTMLは、Webページの骨組み・中身を作る言語。フロントエンドの PG が書く。
• 見た目は CSS、動きは JavaScript が担当する。
• HTMLはタグで文章に「見出し」「段落」などの意味を付ける。開始タグ＋内容＋終了タグ＝要素。
• 画面に出る中身は <body>、ページの設定は <head> に書く。
• メモ帳とブラウザだけでも、Webページは作れる！

次の Lesson 6 では、プロのエンジニアも使っている道具（VS Code・Chrome・Claude Code）をそろえて、 もっと快適に作れるようにします。