HTML テキスト装飾

HTMLには、特別な意味を持つテキストを定義するための特別な要素が含まれています。

1. HTML 装飾要素 (HTML Formatting Elements)

HTMLでは、特別なタイプ（太字や斜体など）のテキストを表示するために、いくつかの要素（タグ）が用意されています。

装飾要素は、以下の目的で使い分けられます：

• <b> - ボールド（太字）テキスト
• <strong> - 重要なテキスト
• <i> - イタリック（斜体）テキスト
• <em> - 強調されたテキスト
• <mark> - マーク（ハイライト）されたテキスト
• <small> - 小さなテキスト
• <del> - 削除されたテキスト
• <ins> - 挿入されたテキスト
• <sub> - 下付き文字
• <sup> - 上付き文字

2. HTML <b> および <strong> 要素

2.1 <b> 要素

<b> 要素は、特別な重要性を持たせずにテキストを太字にします。

<b>このテキストは太字です</b>

2.2 <strong> 要素

<strong> 要素は、強い重要性を持つテキストを定義します。ブラウザは通常、この中のコンテンツを太字で表示します。

<strong>このテキストは重要です！</strong>

3. HTML <i> および <em> 要素

3.1 <i> 要素

<i> 要素は、専門用語、別の言語のフレーズ、思考などの代替的な音声や気分を表現するために、テキストを斜体で表示します。

<i>このテキストは斜体です</i>

3.2 <em> 要素

<em> 要素は、強調されたテキストを定義します。ブラウザは通常、この中のコンテンツを斜体で表示します。

<em>このテキストは強調されています</em>

[!TIP]
アクセシビリティの観点では、スクリーンリーダーは <em> 内の単語を、口頭での強調を用いて読み上げます。

4. HTML <small> 要素

<small> 要素は、より小さなテキストを定義します。

<small>これはより小さなテキストです。</small>

5. HTML <mark> 要素

<mark> 要素は、マークされた、またはハイライト（背景色付き）されたテキストを定義します。

<p><mark>ミルク</mark>を買うのを忘れないでください。</p>

6. HTML <del> 要素

<del> 要素は、ドキュメントから削除されたテキストを定義します。ブラウザは通常、削除されたテキストに取り消し線を引きます。

<p>私の好きな色は <del>ブルー</del> レッドです。</p>

7. HTML <ins> 要素

<ins> 要素は、ドキュメントに挿入されたテキストを定義します。ブラウザは通常、挿入されたテキストに下線を引きます。

<p>私の好きな色は <del>ブルー</del> <ins>レッド</ins> です。</p>

8. HTML <sub> 要素

<sub> 要素は、下付き文字を定義します。下付き文字は、通常の行の半分下の位置に表示され、時には小さなフォントで表示されます。H₂O などの化学式に使用されます。

<p>これは <sub>下付き文字</sub> です。</p>

9. HTML <sup> 要素

<sup> 要素は、上付き文字を定義します。上付き文字は、通常の行の半分上の位置に表示され、時には小さなフォントで表示されます。E = mc² などの数式や脚注に使用されます。

<p>これは <sup>上付き文字</sup> です。</p>

10. HTML テキスト装飾リファレンス