HTML コース
✓ 1 2 3 4 5 6
1 STEP 1 / 7

HTMLとは？初心者向けわかりやすい解説【中高生向け】

⏱ 約25分 やってみよう 1 クイズ 1
📋 前提知識：レッスン0：パソコン基礎知識を完了してください

🎯 このレッスンで学ぶこと

  • HTMLとは何かを説明できます。
  • タグの基本形（開始タグ・終了タグ）を書けます。
  • HTMLファイルの骨組み（html・head・body）を作れます。
  • index.htmlをブラウザで開けます。

📖 前回の復習（レッスン0）

  • フォルダはファイルをまとめる引き出し。プロジェクトごとにフォルダを作る
  • 拡張子はファイルの種類を表す（.html・.css・.js）
  • VS Code でコードを書き、Ctrl+S（Mac: Cmd+S）で保存する

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

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

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

答えは「コード」です。文字を打つだけで、ウェブページが作れるのです。

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

💡 HTMLは「プログラミング言語」ではない:
HTMLは「マークアップ言語」と呼ばれ、文章に構造をつけるためのものです。計算や条件分岐はできません。プログラミング言語（JavaScript）は後のコースで学びます。

💡 HTMLとは？タグの仕組み

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

HTMLファイルの拡張子は .html です。ブラウザはこのファイルを読み取って、画面にページを表示します。

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

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

✏️ コードを編集

▶ プレビュー

🤔 考えてみよう：このコードの <h1> を <h2> に変えると、どんな見た目になると思う？試してみよう！
  • <h1> … 開始タグ（ここからh1が始まる）
  • </h1> … 終了タグ（ここでh1が終わる）
  • 間に挟まれた「こんにちは！」… 内容

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

💡 よく使うタグの例:
・<h1>〜<h6>: 見出し（大きさ順）
・<p>: 段落（文章のまとまり）
・<a>: リンク
・<img>: 画像
次のレッスン以降で順番に学んでいきます！

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

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

index.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> の中に書きます！

💡 属性（attribute）とは:
タグに追加情報を付けるものです。例えば <html lang="ja"> の lang="ja" は「このページは日本語です」という属性です。
属性は 属性名="値" の形で、開始タグの中に書きます。
📬 head と body のたとえ:
head = 封筒の表面（宛名や差出人 = ページの設定情報）
body = 封筒の中身（手紙の本文 = 画面に表示する内容）
ブラウザに見せたいものは body に、裏方の設定は head に書きます。
💡 インデント（字下げ）の意味:
コードの先頭にスペースを入れて字下げすることを「インデント」と言います。タグの入れ子構造が見やすくなります。動作には影響しませんが、読みやすさのために必ずつけましょう。VS Code では Tab キーで自動的にインデントが入ります。
HTMLの木構造の図解 html head body title meta h1 p a

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

💡 プログラミングの基本習慣：一気に全部書かず、少し書いてはブラウザで確認しましょう。小さく試すことでミスを早く見つけられます。
  1. VS Code を開く
    lesson0でインストールした VS Code を起動し、メニュー「File」→「Open Folder」で my-practice フォルダを開いてください。左のサイドバーで「新しいファイル」アイコンをクリックし、index.html という名前でファイルを作成します。
  2. 以下のコードをそのまま入力する
    ⚠️ 以下のコードの 【名前】・【好きなもの】 は、自分の情報に書き換えてください。書き換えないと「【名前】」という文字がそのまま表示されます。
    index.html
    <!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>自己紹介ページ</title>
    
  </head>
  <body>
    <h1>はじめまして！</h1>
    <p>私の名前は【名前】です。</p>
    <p>好きなものは【好きなもの】です。</p>
  </body>
</html>

    ▶ プレビュー

  3. Ctrl+S（Mac: Cmd+S）で保存する
    保存先は my-practice フォルダです。
  4. 保存したファイルをダブルクリックする
    Google Chrome などのブラウザが開いて、自分のページが表示されます！
    ✅ 正しく表示されると、こうなります：
    ・ブラウザのタブに「自己紹介ページ」と表示される
    ・ページに大きな見出し「はじめまして！」が表示される
    ・その下に「私の名前は〜」「好きなものは〜」という文章が表示される

⚠️ よくあるミス

  • タグの閉じ忘れ：<h1>タイトル と書いて </h1> を忘れると、その後の文字もすべて見出しになってしまう。
  • 大文字・小文字の混在：HTMLタグは小文字で書くのが基本。<H1> より <h1> を使おう。
  • ファイルの保存忘れ：コードを書いたら必ず Ctrl+S（Mac: Cmd+S）で保存してからブラウザで確認しよう。
  • 全角文字を使ってしまう：タグやスペースに全角文字（　）を使うとエラーになります。コードは必ず半角英数字で書きましょう。日本語の文章部分だけ全角OKです。
⚠️ 文字化けしたら:
ブラウザで「文字化け」（意味不明な記号が表示される）が起きたら、<meta charset="UTF-8"> が <head> の中に書かれているか確認しましょう。この1行がないと日本語が正しく表示されません。
⚠️ タグを閉じ忘れるとどうなる？

✅ 正しい例:
<p>こんにちは</p><p>さようなら</p>
→ 「こんにちは」と「さようなら」が別々の段落になる

❌ 閉じ忘れ:
<p>こんにちは<p>さようなら</p>
→ 表示が崩れたり、意図しないレイアウトになる

💡 ブラウザは閉じ忘れを自動補完しようとしますが、意図しない結果になることがあります。開始タグを書いたら、すぐに終了タグも書く習慣をつけましょう。

📝 まとめ

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

📖 もっと詳しく学ぶ

HTMLとは？初心者向けにわかりやすく解説【中高生向け】

🏷️ HTMLタグの入れ子構造を可視化してみよう！

このレッスンで学んだ HTML を貼り付けると、タグの入れ子をツリー表示。閉じタグ忘れも検出できます。

HTML タグ可視化ツール →

🚀 次のレッスンへ

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

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

自由課題: ページを充実させよう

余裕がある人は、以下を追加してみましょう:

  • <p> タグで「趣味」「将来の夢」などの文章を追加
  • <h1> の文字を変えてみる
  • 3つ以上の <p> タグを使って長い自己紹介にする
🔍 もっと調べてみよう：「HTML タグ 一覧」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！

✅ このレッスンが終わったら

ドリルで知識を確認してから次に進むと、理解が定着しやすいよ！

次のレッスン: 文字を表示しよう → 📝 このレッスンの問題を解く →

このレッスンは役に立ちましたか？

目次
    他の質問を見る → 詰まった？質問する

    📖 このレッスンの用語

    ⚠️ よくあるエラー

    📝 関連ブログ記事

    🏋️ 練習問題

    このレッスンの練習問題に挑戦（Q4〜Q8）→

    📋 チートシート

    チートシートを見る →
    ← HTML コース一覧に戻る
    𝕏 シェア LINE シェア
    次のレッスン: 文字を表示しよう →