HTML テキスト装飾

HTML はテキストを装飾するための多様なタグを提供しています。これらを使用することで、特定の単語を強調したり、重要性を示したり、あるいは単純にテキストの外観を変更したりすることが可能です。適切なタグの選択は、構造化された読みやすいコンテンツ作成に直結します。

本セクションでは、<b>、<strong>、<i>、<em>、<small>、<mark> タグを掘り下げ、それぞれの用途と効果的な活用方法を学習します。また、見た目は似ていても意味（セマンティクス）が異なるタグの違いや、適切な使い分けのタイミングについても解説します。

1. <b> タグ：ボールド（太字）

<b> タグは、テキストを太字にするために使用されます。段落の中で特定の単語を視覚的に目立たせ、ユーザーの注意を引くためのシンプルな方法です。

注意点： <b> タグは主に表現層（Presentational）の要素です。つまり、テキストの外観を変更するだけで、その単語自体に特別な意味や重要性（セマンティクス）は付与しません。

1.1 <b> タグの例

<p>これは <b>ボールド</b> に設定された単語です。</p>

この例では、「ボールド」という単語がブラウザ上で太字で表示されます。

1.2 いつ <b> を使うべきか？

テキストを視覚的に際立たせたいが、そこに「特別な重要性」を含ませたくない場合に <b> タグを使用します。
例えば、製品説明の中のキーワードをハイライトしたり、リストの項目をフォーマットしたりする場合に適しています。

例：キーワードのハイライト
新しいコーヒーメーカーの製品説明を書いている場面を想定してください。

<p>当社の新型コーヒーメーカーは、<b>12杯分の大容量</b>、<b>プログラマブルタイマー</b>、そして <b>ステンレス製の外装</b> を備えています。</p>

ここでは、<b> タグを使用して製品の主要な特徴をハイライトし、潜在顧客が重要なポイントを一目でスキャンできるようにしています。

2. <strong> タグ：強い重要性

<strong> タグもテキストを太字にしますが、<b> タグとは異なり、セマンティクス（Semantic meaning）を持っています。これは、囲まれたテキストが「重要」「深刻」「緊急」であることを示します。

スクリーンリーダー（視覚障害者向けの読み上げ技術）などのアクセシビリティツールは、<strong> タグをより強調したトーンで読み上げるなど、異なる方法で解釈します。

2.1 <strong> タグの例

<p><strong>警告！</strong> この操作は取り消せません。</p>

この例では、「警告！」という言葉が太字で表示されるだけでなく、スクリーンリーダーによってはより大きく、あるいは緊急性の高い声で読み上げられます。

2.2 いつ <strong> を使うべきか？

内容を理解する上で極めて重要なテキストを強調したい場合に <strong> タグを使用します。これには警告、重要な指示、または核となる結論が含まれます。

例：重要な指示
家具の組み立て説明書を考えてみましょう。

<ol>
  <li>脚を土台に取り付けます。</li>
  <li><strong>重要：</strong> ネジがしっかり締まっていることを確認してください。</li>
  <li>天板を土台の上に置きます。</li>
</ol>

ここでは <strong> タグを使ってネジを締めることの重要性を強調し、後のトラブルを防ぐよう促しています。

3. <i> タグ：イタリック（斜体）

<i> タグはテキストを斜体（イタリック）で表示します。<b> タグと同様に、主に表現層の要素（見た目だけを変えるもの）です。通常、異なる語調や雰囲気、例えば思考、技術用語、または外国語の単語を示すために使用されます。

3.1 <i> タグの例

<p>「太陽」を意味するラテン語は <i>sol</i> です。</p>

この例では、"sol" という単語が斜体で表示されます。

3.2 いつ <i> を使うべきか？

以下のようなケースで <i> タグを使用します。

• 技術用語や専門用語
• 外国語の単語やフレーズ
• 作品のタイトル（本、映画、曲名など）
• 登場人物の心の声や思考

例：書籍のタイトル

<p>私のお気に入りの本は <i>指輪物語</i> です。</p>

ここでは、<i> タグが書名を示すために使われています。

4. <em> タグ：強調（Emphasized Text）

<em> タグはテキストを強調するために使用されます。ほとんどのブラウザでは斜体で表示されますが、<strong> と同様にセマンティクスを持っています。これは、囲まれたテキストがアクセントを置いて読まれるべきであること、または特別な注意を払うべきであることを示します。

4.1 <em> タグの例

<p>私は <em>本当に</em> このプロジェクトを終わらせる必要があります。</p>

この例では、「本当に」という言葉が斜体になり、スクリーンリーダーでは音調を少し変えて読み上げられる可能性があります。

4.2 いつ <em> を使うべきか？

特定の単語やフレーズを強調することで、文の意味を微妙に変えたり、重要性を際立たせたりしたい場合に <em> タグを使用します。

例：意味の変化
以下の2つの文を比較してください。

1. "I am going to the store."（私は店に行きます。）
2. "I am going to the store."（私は店に行くのです。）

2番目の文で "am" を <em> で強調すると、「本当に行くんだ」という強い意志や、誰かに疑われたことに対する反論といったニュアンスが含まれます。

5. <small> タグ：細目（Small Text）

<small> タグは、テキストを周囲の文字よりも一回り小さく表示します。通常、補足説明、免責事項、または法的通知に使用されます。

5.1 <small> タグの例

<p>この製品は3歳未満のお子様には適していません。<small>詳細は安全ガイドラインを参照してください。</small></p>

この例では、「詳細は安全ガイドラインを参照してください」というテキストが、段落内の他の文字よりも小さく表示されます。

5.2 いつ <small> を使うべきか？

以下のような情報の表示に <small> タグを使用します。

• 法的免責事項（ディスレイマー）
• 著作権表示（コピーライト）
• 補足的な注釈
• 利用規約などの細かい文字（Fine print）

例：著作権表示

<p>© 2023 My Company. <small>All rights reserved.</small></p>

ここでは、<small> タグによって著作権の定型文が二次的な情報であることを示しています。

6. <mark> タグ：ハイライト

<mark> タグは、テキストをハイライト表示（通常は背景が黄色）するために使用されます。ドキュメントの中で、現在のタスクや検索クエリに関連する特定の部分にユーザーの注意を引きたい場合に最適です。

6.1 <mark> タグの例

<p><mark>独立宣言</mark> は米国の基礎となる文書です。</p>

この例では、「独立宣言」というフレーズがハイライト（通常は黄色背景）されます。

6.2 いつ <mark> を使うべきか？

以下のような状況で <mark> タグを活用します。

• 検索結果ページでの検索キーワードの強調
• ドキュメント内の特定箇所への注意喚起
• 引用文の中で、後から強調したい部分の明示

例：検索結果
ユーザーがサイト内で「HTML タグ」を検索したとします。検索結果ページでそのキーワードをハイライトできます。

<p>この記事では、様々な <mark>HTML タグ</mark> とその用途について解説します。テキストの装飾やリンク作成に使用する <mark>タグ</mark> について学習しましょう。</p>

7. タグ比較リファレンス