猪狩進
見出しや段落を正しく使うと、閲覧者だけじゃなく検索エンジンにも『構造がしっかりした素晴らしいサイトだ！』って評価してもらえるんだ。正しい打順（タグの役割）を覚えていこう！
1. 見出しタグ（<h1>〜<h6>）の役割
見出しは文章の「看板」です。数字が小さくなるほど大きな見出し（重要度が高い）になります。
| タグ名 | 役割 | 進くんの例え（打順） |
|---|---|---|
<h1> |
大見出し（最重要） | チームの看板！「4番打者」（原則1ページに1回） |
<h2> |
中見出し | セクションの要！「3番・5番打者」 |
<h3> |
小見出し | グループをまとめる「つなぎの打者」 |
<h4>〜<h6> |
さらに小さい見出し | 細かい補足用 |
💡 見出しの鉄則：数字を飛ばさない！
文字を大きくしたいからといって <h1> の直後に <h3> を使うのはNGです。必ず <h1> → <h2> → <h3> と順番通りに階層を守りましょう。
⚾ なぜこのルールがあるの？
- ①アクセシビリティ（読み上げ機能）： 画面読み上げソフトを使う視覚障害のある方が、階層順にスキップしながらページ構造を理解できるようにするためです。階層が飛ぶと案内が混乱してしまいます。
- ②SEO（検索エンジン対策）： Googleなどのロボットが「何についての文書か」を正確に理解し、正しく評価してくれるようになります。
2. 段落（<p>）と改行（<br>）の違い
文章を書くときは、<p>（段落）と <br>（改行）を使い分けます。
- <p>（Paragraph）： 文章のまとまりを作ります。段落ごとに上下に自然な余白がつきます。
- <br>（Break）： 段落の中で「1行だけ改行したい」ときに使います。閉じタグ（</br>）は不要です。
⚠️ やってしまいがちなNG例
余白を開けたいからといって <br><br><br> と改行タグを連打するのはNG！余白の調整はCSS（見た目を整える言語）で行うのが望ましいです。
3. 実践コードサンプル
実際に野球部のニュース記事をイメージしたHTMLコードを書いてみましょう。
news.html
<h1>あかつき大附属高校野球部・活動日誌</h1>
<h2>春季大会の結果報告</h2>
<p>本日行われた春季大会の第1試合は、激闘の末に勝利することができました！</p>
<p>応援してくださった皆様、本当にありがとうございました。<br>次戦は来週の土曜日です。</p>
<h2>今週の練習メニュー</h2>
<p>次戦に向けて、特に守備の連携を中心に強化していきます。</p>
文章のタグ付け、上手にできたかな？
文字だけのページができたら、次は写真を入れて一気に華やかにしよう！第3章では「画像（<img>）」の貼り方を学ぶよ！
文字だけのページができたら、次は写真を入れて一気に華やかにしよう！第3章では「画像（<img>）」の貼り方を学ぶよ！