太字・斜体・テキスト強調

strong, em, b, i, mark, del, ins, s, abbr

テキストを強調・修飾するHTML要素群です。見た目が同じでも意味（セマンティクス）が異なる要素があります。

デモ：各要素の表示

重要なテキスト（strong） — 意味的に重要・緊急性あり

太字テキスト（b） — スタイル的な太字（意味なし）

強調テキスト（em） — 読み上げ時にアクセント変化

斜体テキスト（i） — 専門用語・外国語など

ハイライト（mark） — 検索結果のマーキング等

<del>~~削除テキスト（del）~~ — 文書変更の削除部分

<ins>追加テキスト（ins） — 文書変更の追加部分

<s>~~取り消し線（s）~~ — もはや正確でない情報

小さいテキスト（small） — 著作権・注記など

<abbr>HTML — 略語（ホバーで説明表示）

コード例

<!-- セマンティックな強調 -->
<p>この操作は<strong>取り消せません</strong>。注意してください。</p>
<p><em>これが</em>重要なポイントです。（発音の強調）</p>

<!-- スタイル目的（意味を持たない） -->
<p>製品名: <b>Ultra Pro X</b></p>
<p>学名: <i>Homo sapiens</i></p>

<!-- ハイライト：検索マッチ表示に最適（HTML5追加） -->
<p>「<mark>HTML</mark>」の検索結果: <mark>HTML</mark>とは...</p>

<!-- 変更追跡（datetime属性で日時も記録できる） -->
<p>
  <del datetime="2024-01-01">旧価格: ¥5,000</del>
  <ins datetime="2024-01-15">新価格: ¥3,000</ins>
</p>

<!-- 略語：ホバーでtitle属性の内容を表示 -->
<p><abbr title="HyperText Markup Language">HTML</abbr>は...</p>

<!-- もはや正確でない情報 -->
<p><s>次回セール: 3月1日</s>（終了しました）</p>

比較：セマンティック要素 vs プレゼンテーション要素

要素	表示	意味・用途	AT（支援技術）
`strong`	太字	重要性・緊急性	強調として伝達
`b`	太字	キーワード・製品名（意味なし）	変化なし
`em`	斜体	強調（読み方が変わる）	アクセントを変化
`i`	斜体	専門用語・外国語・思考など	変化なし
`del`	~~打ち消し~~	削除された文書内容	一部が「削除」と読む
`s`	~~打ち消し~~	もはや正確でない情報	変化なし

実用例del + ins で価格変更・変更履歴を表現

¥3,000~~通常価格 ¥5,000~~40%OFF

<span class="price-new">¥3,000</span>
<del class="price-old">通常価格 ¥5,000</del>
<span class="badge">40%OFF</span>

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<strong>` と `<b>`、`<em>` と `<i>` の意味的な違いを、スクリーンリーダーの読み上げの違いとともに教えてください。
- `<mark>` 要素の適切な使い方と、検索結果のハイライト表示に使う理由を教えてください。
- `<del>` と `<s>` の使い分けを、「文書変更の記録」と「もはや正確でない情報」の違いで教えてください。
- `<abbr title="...">` の UX 上の制限（モバイルでは tooltip が出ない等）と代替実装を教えてください。
- CSS だけで太字・斜体を付ける `font-weight: bold` や `font-style: italic` と、`<strong>`・`<em>` を使う場合の違いを教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧 ☕ Buy Me a Coffee