strongタグ -特に重要なテキストを強調する|HTML辞典
<strong>タグとは?
<strong>タグは、HTML文書内で「特に重要なテキスト」を強調するためのタグです。
視覚的には 太字 になりますが、単なる装飾ではなく、文章の中で意味的に重要な部分を強調する 目的で使用されます。
基本情報
コンテンツモデル
フローコンテンツ(Flow Content)、フレージングコンテンツ(Phrasing Content)
インライン要素として扱われ、テキストの一部分を強調する役割を持ちます。
閉じタグの有無
<strong>は開始タグ(<strong>
)と閉じタグ(</strong>
)の両方が必要です。
基本的な記述方法
<strong>
を使用すると、視覚的に太字になり、検索エンジンにも「重要な単語」として認識されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>strongタグの例</title>
</head>
<body>
<p>この文章の中で、<strong>特に重要な部分</strong> を強調します。</p>
</body>
</html>
ポイント:
- <strong>はSEOにも影響を与えるタグであり、検索エンジンは「重要なキーワード」として認識する。
- 見た目の太字にするだけなら
<b>
を使用する方が適切な場合もある。
使用できる主な属性
<strong>タグには特別な属性はありませんが、一般的なHTML要素の属性を使用できます。
属性名 | 説明 | 例 |
---|---|---|
class | CSSのクラスを適用 | <strong class="highlight">重要</strong> |
id | 一意の識別子を設定 | <strong id="important">重要</strong> |
style | インラインスタイルを適用 | <strong style="color: red;">重要</strong> |
<strong> と <b> の違い
タグ | 役割 | 視覚的な変化 | 意味の強調 |
---|---|---|---|
<strong> | 意味的に重要な部分 を強調 | 太字(デフォルト) | あり(SEOに影響) |
<b> | 装飾目的の太字 | 太字(デフォルト) | なし |
✅ 例:意味的な強調としての使用(<strong>
)
<p>この製品は <strong>防水機能</strong> を備えています。</p>
- 「防水機能」が製品の特長として重要であることを示す。
- 検索エンジンにも重要な情報として認識される。
✅ 例:単なる装飾としての使用(<b>
)
<p><b>キャンペーン開催中!</b> 今すぐ申し込もう!</p>
- 「キャンペーン開催中!」を目立たせる目的で使用。
- 意味の強調ではなく、単なるデザイン要素。
使用上の注意点
✅ 本当に重要な箇所にのみ使用する
<strong>
を多用すると、文章全体のバランスが崩れるため、本当に強調すべき部分のみに使うのが望ましい。- SEO的にも、無駄な
<strong>
は検索エンジンの評価を下げる可能性がある。
✅ 装飾目的なら <b>
や CSS を使う
- 視覚的に太字にしたいだけなら
<b>
や CSS のfont-weight: bold;
を使う方が適切。
例(CSSを使った装飾)
.highlight {
font-weight: bold;
color: red;
}
<p class="highlight">これは重要な部分です。</p>
関連タグ
まとめ
<strong>タグは、文章内で特に重要な部分を強調するためのタグ です。
見た目の変化だけでなく、SEO的にも「重要なキーワード」として認識されるため、適切な使い方が重要 です。
装飾目的ではなく、本当に強調すべき意味のある箇所にのみ使用しましょう。