第3章：記事の骨格を作る - 見出し、段落、強調
HTMLの「設計図」が準備できたら、いよいよ記事の中身、つまり「骨格」を作っていきましょう。
ここで登場するのが、見出し、段落、強調のタグです。これらは、文章にメリハリをつけ、読者と検索エンジンの両方に「この記事は何が重要なのか」を伝えるための、最も基本的なツールです。
ブログ執筆のためのHTML完全ガイド：この記事だけで、今日からあなたもブロガーに - 月影 www.namuamidabu.com見出し (<h1> - <h6>): 記事の「目次」を作る
見出しタグは、単に文字を大きくするためのものではありません。それは、あなたの記事の論理的な構造、つまり「目次」を宣言するためのものです。
これを「本」に例えてみましょう。📖
<h1>: 本のタイトル
記事全体の主題を表す、最も重要な大見出し。読者の興味を引き、検索エンジンに「この記事は〇〇についてです」と伝える顔となるため、1ページに1回だけ使うのが鉄則です。<h2>: 章のタイトル
（例：「第1章 HTMLとは」）<h3>: 節のタイトル
（例：「1-1. HTMLの歴史」）<h4>: 項のタイトル
（例：「① 古代のHTML」）
見出しの2つの黄金ルール
- レベルを飛ばさない
<h2>の次に、いきなり<h4>を使うのはNGです。「第1章」の次にいきなり「①」が来るようなもので、構造が不自然になります。必ず順番通りに使いましょう。 - デザイン目的で使わない
「文字を大きくしたいから」という理由で<h2>を使うのはやめましょう。構造がめちゃくちゃになり、SEO評価を下げる原因にもなります。見た目の調整は、後のシリーズで解説するCSSの役割です。
正しく見出しを使うことで、読者は目次を拾い読みするだけで記事の全体像を把握でき、検索エンジンも記事の内容を正確に理解してくれるのです。
段落 (<p>): 文章の基本ブロック
p は "Paragraph"（段落）の略です。文章の「ひとつの意味のまとまり」を <p> タグで囲むことで、ブラウザはこれを「1つの段落」として認識します。
<p> タグで囲むと、ブラウザが自動的に上下に程よい余白を作ってくれるため、自然と読みやすいレイアウトになります。改行のためにEnterキーを2回押すのではなく、文章の塊を <p> で囲む、と意識しましょう。
強調 (<strong>, <em>): 声のトーンで語りかける
文章の一部を目立たせたいとき、HTMLでは「どういう意図で目立たせたいか」によってタグを使い分けます。これは、あなたの代わりに声のトーンを変えて語りかけてくれるようなものです。🗣️
<strong>:「重要です！」と伝えたい
- 意味: 内容の「重要性」「深刻さ」を示します。
- 表示: 一般的に太字になります。
- 使い所: 警告文や、記事の結論で「ここだけは絶対に覚えて帰ってほしい！」というキーワードに使いましょう。「テストに出ますよ！」というイメージです。
<em>:「特に"ココ"を！」と伝えたい
- 意味: 文章の中で、特に「アクセント」を置きたい単語（Emphasis）に使います。
- 表示: 一般的に斜体になります。
- 使い所: 「私は、"とりわけ"猫が好きです」のように、文脈の中で特定の言葉を際立たせたい時に使います。
見た目だけを変える <b>（太字）や <i>（斜体）もありますが、これらは意味を持たないため、検索エンジンや音声読み上げソフトに意図が伝わりません。<strong> や <em> を使うことは、より多くの人に、そして未来の技術にも正しく内容を伝えるための「未来への投資」なのです。
改行 (<br>): 正しい使い方と、絶対NGな使い方
<br> は、詩や住所のように、文の途中での改行そのものに意味がある場合にのみ使う、特殊なタグです。
❌ 絶対にやってはいけない使い方
それは、段落間のスペースを空ける目的で <br> を連打することです。
<p>一つ目の段落です。</p>
<br>
<br>
<p>二つ目の段落です。</p>これは、見た目はスペースが空きますが、記事の構造を破壊します。特に、音声読み上げソフトの利用者は「…改行、改行…」と読み上げられ、どこで話が終わったのか分からず混乱してしまいます。段落間の余白は、必ずCSSで調整しましょう。
▼主なテキストタグのまとめ
| タグ | 意味合い（セマンティクス） | 一般的な表示 | ブログでの使用例 |
|---|---|---|---|
<h1> |
ページ全体の主題 | 最も大きい見出し | 記事のタイトル |
<h2> |
主要なセクションの見出し | 2番目に大きい見出し | 記事内の大きな章立て |
<p> |
段落 | テキストブロック | 記事の本文 |
<strong> |
内容の重要性 | 太字 | 警告、記事の結論の最重要キーワード |
<em> |
強調（アクセント） | 斜体 | 特定の単語を際立たせたい時 |
<br> |
改行 | 次の行に移る | 詩や住所の表記（限定的に使用） |
演習ドリルを準備していますのでご利用ください。
