レッスン2：文字を表示しよう

📖 導入 — 文章にも「構造」がある

本や教科書を思い浮かべてください。大きな章タイトル、小さな見出し、本文…と、文章には「構造」がありますよね。

ウェブページも同じです。HTMLには文章の構造を表すためのタグがたくさん用意されています。このレッスンでは、よく使う基本のタグを学びましょう！

📝 見出し・段落・改行・区切り線

見出しタグ：`<h1>` 〜 `<h6>`

見出し（heading）を表示するタグです。<h1> がいちばん大きく、<h6> になるほど小さくなります。ページのタイトルには <h1>、章の見出しには <h2>、小見出しには <h3> を使うのが一般的です。<h1> は1ページに1つだけ使うのがおすすめです。

<h1>いちばん大きい見出し</h1>
<h2>2番目の見出し</h2>
<h3>3番目の見出し</h3>

段落タグ：`<p>`

段落（paragraph）を表すタグです。文章のまとまりを <p> で囲むと、前後に自動で余白が入ります。

<p>これは1つ目の段落です。</p>
<p>これは2つ目の段落です。段落が変わると少し間が空きます。</p>

改行タグ：`<br>`

段落の途中で改行したいときは <br> を使います。終了タグが不要な「一人タグ」です。

<p>1行目のテキスト<br>2行目のテキスト</p>

区切り線タグ：`<hr>`

ページの内容をセクションで区切りたいときに使います。<br> と同じく、終了タグは不要です。

<p>ここまでが自己紹介です。</p>
<hr>
<p>ここからは趣味の話です。</p>

💻 やってみよう！

前のレッスンで作った index.html を開いて、<body> の中を書き換えてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>文字を表示しよう</title>
  </head>
  <body>
    <h1>HTMLの文字タグ練習</h1>

    <h2>見出しの大きさ比べ</h2>
    <h1>h1：いちばん大きい</h1>
    <h2>h2：少し小さい</h2>
    <h3>h3：さらに小さい</h3>

    <hr>

    <h2>段落と改行</h2>
    <p>これは段落です。<br>ここで改行しました。</p>
    <p>これは別の段落です。段落の間には自動で余白が入ります。</p>
  </body>
</html>

📌 まとめ

タグ	役割
`<h1>`〜`<h6>`	見出し。数字が小さいほど大きく表示される
`<p>`	段落。前後に余白が自動で入る
`<br>`	段落内の改行
`<hr>`	水平の区切り線

✅ <h1> は1ページに1つだけ使うのがおすすめ
✅ <br> と <hr> は終了タグが不要

🚀 次のレッスンへ

次のレッスンでは、リンクと画像を使ってページをもっと豊かにする方法を学びます！

🔍 もっと調べてみよう：「HTML 見出し段落使い方」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！