p？div？h1？タグたちと友達になる “その2” の話

タグって、どこに書けばいいの？

さてさて。

前回「HTMLってなに？」を“その1”としてゆるっとお届けしましたが、
今回はちょっとだけタグたちの世界に近づいてみましょう。

でもその前に、タグってそもそも「どこに書くの？」って話。

HTMLには、大きく分けて <head> と <body> という2つの“エリア”があります。

<head> は、ページの設定やメタ情報を書く場所。
<body> は、実際にブラウザに表示される、目に見えるコンテンツを書く場所です。

ざっくり言うと：

<head>：裏方さん（目には見えない設定まわり）
<body>：ステージ上の主役（見た目に出るコンテンツ）

そして今回はこのうち、<body> に登場するタグたちにスポットを当てていきます。

HTMLタグの種類や使い方を知っておくと、

「あ、このタグってこういう意味だったんだ」って発見があるかも！

というわけで、タグたちと友達になる“その2”、はじめます ✌️

headとbodyの違いを図で見てみよう（図解パート）

HTMLファイルの基本構造って、ざっくりこんな感じです👇

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ページのタイトル</title>
  </head>
  <body>
    <h1>こんにちは！</h1>
    <p>これは本文の一部です。</p>
  </body>
</html>

ここで注目すべきは、やっぱり <head> と <body> の違い！

エリア	役割	表示される？
<head>	タイトル・メタ情報・外部読み込みなど	❌ 表示されない（設定まわり）
<body>	見出し・段落・画像・ボタンなど	✅ 表示される（ページの中身）

✅ headはページの「プロフィール」や「設定ファイル」みたいなもの、

✅ bodyは、実際に“ユーザーが見る”部分。こっちに書くタグが、今回の主役たちです。

ここからは、実際に<body>タグの中に書く、
HTMLの基本的なタグたちを見ていきましょう。

「よく見るけど、ちゃんと意味わかってる？」なタグたち。
ひとつひとつ、やさしく紹介していきます✌️

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

<h1>大きな見出し</h1>
<h2>ちょっと小さい見出し</h2>

内容を“見出し”として区切るタグです。

<h1>がいちばん大きくて、数字が増えるごとに小さくなります。

💡 SEOでも重要なのがこのタグ。

<h1>はそのページで「一番伝えたいこと」に使いましょう！

SEOについては”SEOって何HTMLマークアップからできるSEO対策”を読んでみてね！

<p>：段落タグ（paragraph）

<p>これはひとつの段落です。</p>

文章のかたまりはこのタグで囲みます。

改行するために<br>を使う人、多いけど、文章のまとまりには<p>が正解。

<a>：リンクタグ（anchor）

<a href="https://noichi.tech/">noichiのトップへ</a>

クリックできるリンクを作るタグ。

href属性にURLを書くことで、他のページや外部サイトへ飛べます。

💡 target=”_blank”で新しいタブで開くようにもできるよ！

<ul>, <ol>, <li>：リストタグ

<ul>
  <li>りんご</li>
  <li>みかん</li>
</ul>

<ul>は順番なしのリスト（unordered）
<ol>は番号付きのリスト（ordered）
<li>はリストの1項目

買い物リスト、手順、箇条書き…全部このセットでOK！

<img>：画像を表示するタグ

<img src="sample.jpg" alt="サンプル画像">

画像を表示したいときはこれ！

alt属性は画像が表示できないときの代替テキストで、SEOにもアクセシブルにも重要です。

<button>：ボタンタグ

<button>クリックしてね</button>

見た目も意味も“ボタン”です。

typeやJavaScriptと組み合わせればフォーム送信やイベント発火もできる万能マン。

<div>：区切り（division）

<div class="box">ここはひとつのかたまり</div>

よく出てくるけどちょっとクセ者。見た目は変わらないけど「意味なくまとめる」タグ。

構造を整えたいときに使うけど、最近は<section>や<article>などのセマンティックタグが好まれる流れです。

👀 ここまでで、こんなページが作れちゃう！

このあと、今紹介したタグを使って自己紹介ページのコードを実際に書いてみます！

「タグって、記号じゃなくて意味だったんだ」って、きっと体感できるはず💡

それじゃ、つぎは**自分だけの“その1ページ”**を作ってみよう！

タグたちを使って、自己紹介ページを作ってみよう！

今まで紹介したタグを使うと、こんな感じのHTMLが書けちゃいます👇

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ぼくの自己紹介ページ</title>
</head>
<body>
  <h1>こんにちは！ぼくはnoichiです。</h1>
  <p>HTMLの勉強を始めたばかりのエンジニアです。</p>
  <p>好きなタグは <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/a">&lt;a&gt;</a> と <a href="https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul">&lt;ul&gt;</a> です。</p>
  <ul>
    <li>タグは思ったより素直だった</li>
    <li>意味があるからこそ、整う</li>
    <li>ちょっとずつ覚えていけばOK</li>
  </ul>
</body>
</html>

💡 上のコードをテキストエディタにコピペして、拡張子を .html にして保存

ブラウザで開いてみると、あなたの“はじめてのWebページ”が見られるよ ✌️

まとめ：タグたちは、意味のかたまりだった

タグって見た目のためにあると思いきや、実は**「意味を伝えるための言葉」**だった。
<h1>や<p>のようなタグを使うことで、文章に“ちゃんとした構造”が生まれる。
<body>に書くタグだけでも、小さな自己紹介サイトならもう作れるレベル！