先生、タグって1つ1つどんな意味があるんですか？どのタグをどう使えばいいのか知りたいです。
あの<>の記号、ゲームのコマンドみたいで面白そう！でもどう使えばいいのか分からないです。
なるほど、君たちは実際の書き方を知りたいんだね。HTMLタグは文章に「意味」を付ける道具なんだ。例えば「これは見出し」「これは段落」といった具合にね。
タグの基本構造
HTMLタグは開始タグと終了タグのペアで使います。この仕組みを理解すれば、どんなWebページでも作れるようになります。
HTMLタグの基本構造
HTMLタグ（要素）は以下の3つの部分から構成されています：
| 部分 | 役割 | 例 |
|---|---|---|
| 開始タグ | 要素の始まりを示す | <p> |
| タグの内容 | タグで囲まれる文字や他の要素 | これは段落です |
| 終了タグ | 要素の終わりを示す（/付き） | </p> |
この全体が1つの「要素」と呼ばれます。
基本的な書き方:
<p>これは段落です</p>サンドイッチみたいですね！パンで挟んでる感じ。
その通り！とても良い例えだね。パン（タグ名）の種類によって、同じ具材でも全然違う料理になるように、HTMLでもタグ名によって意味が変わるんだよ。
タグ名で意味が変わる
重要なのは、タグ名によって文章の意味が変わることです：
| タグ名 | 意味 | 例 |
|---|---|---|
h1 | 大見出し | <h1>大きな見出し</h1> |
h2 | 中見出し | <h2>少し小さな見出し</h2> |
p | 段落 | <p>普通の文章</p> |
なるほど！<h1>だと見出し、<p>だと段落になるんですね。
そうなんだ！同じ文章でも、どのタグで囲むかによって「これは見出しです」「これは段落です」と意味が変わるんだよ。
なぜペアで使うの？
HTMLタグがペアになっている理由は3つあります：
- 範囲の明確化 どこからどこまでが1つの段落なのかはっきりさせる
- 入れ子構造 タグの中にさらにタグを入れることができる
- エラー防止 開始と終了がセットなので、書き忘れに気づきやすい
よくある間違いと正しい書き方
初心者がつまずきやすいポイントを確認しておきましょう：
| ❌ 間違った書き方 | 解説 |
|---|---|
<h2>テキスト | 終了タグが抜けている |
<h2>テキスト<h2> | 終了タグに「/」が必要 |
< h2>テキスト</h2> | タグ名のスペースは不要 |
<H2>テキスト</H2> | 小文字で記述すべき |
実際に書いてみよう
以下のエディターで基本的なタグの使い方を練習してみましょう。
試してみよう
h2タグを間違った使い方をしてみて、どのように表示されるか確認してみましょうpタグをh3からh6まで変えて、見出しの大きさの違いを確認してみましょう
- 左側のエディターにHTMLコードを入力します
- 右側にリアルタイムでプレビューが表示されます
見出しタグ
文章には大きなタイトルや小さなタイトルがありますよね？
その通り！それが見出しタグの出番だよ。英語で言うと、“heading” 。頭文字の「h」を取ってh1からh6までのタグがあるんだ。
見出しタグは文章の構造を作る重要な要素です。6段階のレベルがあり、それぞれ異なる用途で使います。
ブラウザーはデフォルトで<h1>を一番大きく表示しますが、大切なのは見た目の大きさよりも情報の重要度で使い分けることです。
| タグ | 用途 | 使用例 |
|---|---|---|
h1 | 最も重要な見出し | ページのメインタイトル |
h2 | 章の見出し | 「基本操作」「応用テクニック」 |
h3 | 小見出し | 「準備手順」「注意点」 |
h4〜h6 | さらに細かい見出し | 詳細な分類 |
- ページの「顔」である
<h1>タグは、原則として1ページに1つだけ使いましょう。本のタイトルが1つだけなのと同じです。 - 見た目ではなく構造を意識して、
h2の次はh3…という順序を基本にすると、読み手や支援技術に優しい構造になります（厳密なルールではありません）。
見出しの使い方
実際に見出しタグを使ってみましょう。以下のエディターで見出しの大きさの違いを確認してください：
💡 試してみよう
- 見出しの文字を変更してみましょう
- 未使用の見出し（
h4〜h6）を追加してみましょう h1からh6まで、どのように大きさが変わるか確認してみましょう
このように、情報の重要度に応じて見出しのレベルを使い分けるんだ。新聞記事や教科書も同じような構造になっているよね。
段落タグ
文章の内容は段落タグ(p)で囲みます。段落は「意味のまとまり」を表現する重要な要素です。
段落って、作文で習ったあれですか？
まさにその通り！HTMLでも同じ考え方だよ。「p」は「paragraph（パラグラフ＝段落）」の略なんだ。覚えやすいでしょ？
改行について
段落を説明する前に、改行について知っておこう。HTMLでは普通に文字を書いても改行されません。
えっ、改行されないんですか？
そうなんだ。HTMLでは改行したい場合に専用のタグを使うんだよ。段落内で改行したい時は**<br>タグ**を使います。
<br>タグの特徴
- 終了タグが不要
<br>だけで使える特殊なタグ - 段落内改行 同じ段落の中で改行したい時に使用
- 使いすぎ注意 本当に必要な時だけ使おう
<p>今日は学校で<br>
HTMLを勉強しました。<br>
とても楽しかったです。</p>段落の使い方
1つの意味のまとまりごとに<p>タグで囲みます。以下のエディターで段落と改行の使い方を練習してみましょう：
💡 試してみよう
- 段落の内容を自分の言葉に変更してみましょう
- 新しい段落を追加してみましょう
<br>タグを使って段落内で改行してみましょう- 段落と段落の間にどのような間隔ができるか確認してみましょう
- 段落分け 意味のまとまりが変わる時は新しい
<p>タグ - 改行 同じ段落内での改行は
<br>タグ - 見た目調整 空の
<p></p>や連続<br>は避けて、CSSで調整
改行のためだけに<p>タグを乱用するのは避けましょう。段落は意味のまとまりを表すために使います。
リストタグ
買い物リストみたいな箇条書きも作れますか？
もちろん！リストタグの出番だね。
HTMLには2種類のリストがあります。見た目だけでなく、情報の意味に合わせて正しく使い分けることが大切です。
| タグ | 名前 | 用途 | 見た目 |
|---|---|---|---|
ul | Unordered List | 順序のない箇条書き | • りんご • バナナ |
ol | Ordered List | 順序のある番号付きリスト | 1. 起きる 2. 歯を磨く |
どちらも各項目はli（List Item）タグで囲みます。
リストの項目を入れ替えても意味が変わらないならulを使うし、順番が大事ならolを使うんだ。
例えば、買い物リストは順番が関係ないからul、料理の手順は順番が大事だからolを使うよ。
実際にリストを作ってみましょう：
💡 試してみよう
- ulは順序が重要でない項目（買い物リストなど）
- olは順序が大切な項目（手順やランキングなど）
- 各項目は必ずliタグで囲みます
- 新しいリスト項目を追加してみましょう
リストの入れ子構造
リストは入れ子にすることもできます。
💡 試してみよう
- リストの中にさらにリストを作ることができます
- インデントで階層がわかりやすくなります
- カテゴリとその詳細を整理するのに便利です
- 新しいカテゴリや項目を追加してみましょう
<li>タグの中に新しい<ul>や<ol>を入れるのが基本ルールです<ul>や<ol>の直下に置けるのは基本的に<li>だけです
理解度チェッククイズ
さあ、ここまでの内容を振り返ってみよう。クイズに挑戦して、理解度をチェックしてみてね！
HTMLタグの基本ミニクイズ
まとめ
タグって思ったより簡単ですね！
これで自分の文章をHTMLにできそうです！
そうだね！君たちが理解してくれて嬉しいよ。今度は実際に手を動かして、もっと練習してみよう。
- タグの構造 開始タグ + 内容 + 終了タグ
- 見出し h1〜h6で文章の構造を作る
- 段落 pタグで意味のまとまりを表現
- リスト ul/olとliで箇条書きを作成
次回は、HTML属性の活用法について詳しく解説します。