レッスン1：HTMLとは？はじめてのWebページ

🌟 導入：ウェブページってどうやって作るの？

みなさんは毎日スマホやパソコンでウェブサイトを見ていますよね。YouTubeやX（旧Twitter）、学校のホームページ……。

でも、あのページたちって、いったいどうやって作られているのでしょう？

実は、ウェブページはすべて HTML というものでできています。HTMLを覚えれば、あなたも自分だけのウェブページを作ることができます！

💡 HTMLとは？タグの仕組み

HTML（HyperText Markup Language）は、ウェブページの内容と構造を作るための言語です。「ここは見出しだよ」「ここは文章だよ」というように、文章に意味のラベルを貼っていく作業です。このラベルのことを タグ（tag） と呼びます。

タグは < と > で囲まれています。例：

<h1>こんにちは！</h1>

🤔 考えてみよう：このコードの <h1> を <h2> に変えると、どんな見た目になると思う？試してみよう！

<h1> … 開始タグ（ここからh1が始まる）
</h1> … 終了タグ（ここでh1が終わる）
間に挟まれた「こんにちは！」… 内容

ほとんどのタグは、開始タグと終了タグがセットになっています。

🏗️ HTMLファイルの基本構造

HTMLファイルには必ず書かなければいけない骨組みがあります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>はじめてのページ</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これは私のはじめてのウェブページです。</p>
  </body>
</html>

タグ	意味
`<!DOCTYPE html>`	「これはHTMLファイルです」とブラウザに伝える宣言
`<html lang="ja">`	HTMLの始まり。`lang="ja"` は「日本語のページ」という意味
`<head>`	ページの設定情報（タイトルや文字コードなど）を書く場所
`<meta charset="UTF-8">`	日本語が正しく表示されるようにする設定
`<title>`	ブラウザのタブに表示されるページのタイトル
`<body>`	実際にブラウザに表示される内容を書く場所

💡 ポイント：画面に表示したいものは、すべて <body> の中に書きます！

✍️ やってみよう：はじめてのHTMLファイルを作る

💡 プログラミングの基本習慣：一気に全部書かず、少し書いてはブラウザで確認しましょう。小さく試すことでミスを早く見つけられます。

テキストエディタを開く
メモ帳（Windows）やテキストエディット（Mac）など、文字が書けるアプリを開いてください。

以下のコードをそのまま入力する

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>自己紹介ページ</title>
  </head>
  <body>
    <h1>はじめまして！</h1>
    <p>私の名前は<名前>です。</p>
    <p>好きなものは<好きなもの>です。</p>
  </body>
</html>

index.html という名前で保存する
ファイル名の最後を必ず .html にしてください。
保存したファイルをダブルクリックする
ブラウザが開いて、自分のページが表示されます！

⚠️ よくあるミス

タグの閉じ忘れ：<h1>タイトル と書いて </h1> を忘れると、その後の文字もすべて見出しになってしまう。
大文字・小文字の混在：HTMLタグは小文字で書くのが基本。<H1> より <h1> を使おう。
ファイルの保存忘れ：コードを書いたら必ず Ctrl+S（Mac: Cmd+S）で保存してからブラウザで確認しよう。

📝 まとめ

✅ HTML はウェブページの内容と構造を作る言語
✅ タグは <タグ名>内容</タグ名> の形で書く
✅ HTMLファイルには <html>・<head>・<body> の骨組みが必要
✅ 画面に表示したいものは <body> の中に書く

🚀 次のレッスンへ

次のレッスンでは、見出しや段落などのタグをもっとたくさん使って、文章をきれいに表示する方法を学びます。

自分の名前や好きなものを書いたページを作って、次のレッスンに備えておきましょう！

🔍 もっと調べてみよう：「HTML タグ一覧」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！