catnose
catnose
HTMLの<strong>要素は、重要性や緊急性が高いテキストを表します。うまく使えば、読者や検索エンジンが内容を理解するときのヒントになります。
<p>このBBQ場はボランティアによって運営されています。<strong>ゴミは必ず持ち帰るように</strong>してください。</p>
strongタグの使い方
「警告」や「忠告」などの深刻な内容、読者が他よりも先に見るべき緊急性の高い内容に対して<strong>を使います。
段落や見出しの中で使う
<strong>要素は記述コンテンツであり、文章の中で使われます。
<!-- 👍良い例 -->
<p>xxx<strong>xxx</strong>xxx</p>
<h2>xxx<strong>xxx</strong>xxx</h2>
<!-- 👎悪い例 -->
<strong><p>xxxxxx</p></strong>
<strong><h2>xxxxxx</h2></strong>
👆下の2つのように段落や見出し自体を囲むような形で使うべきではありません。
😺見出し自体、重要なテキストであることが多いかと思いますが、strongタグを使うと「その中でも特に重要なテキスト」であることを表します。
😺strongタグはリスト（li）やキャプション（figcaption）などのテキスト内でも使うことができます。
🙅装飾を目的として使わない
<strong>は、重要性や緊急性が高いテキストを表すために使います。「太字にしたいから」という理由で使わないようにしましょう。
.font-strong {
font-weight: bold;
}
👆単にテキストを太字にしたい場合には、その部分を<span>でマークアップし、CSSでfont-weight: boldをあてます。
🙅多用しすぎない
<strong>は「周囲と比べて重要」ということを表します。文章の中の特に重要な部分に対して使うようにしましょう。
CSSでstrongの装飾を変える方法
strong {
color: red; /* 赤字に*/
font-weight: normal; /* 太字を解除 */
}
👆strongに対してブラウザではデフォルトでfont-weight: boldがあてられてしますが、この装飾は変えることができます。
😺上述の通り、見栄え上の強調のためではなく、あくまでも重要性の高いテキストを表すために使いましょう。
strongタグとemタグとbタグの違い
テキストを強調するタグは<em>や<b>など他にもありますが、以下のような違いがあります。
strong：重要性や緊急性が高い部分に使うem：強調したい部分に使うb：単に読者の注意をひきたい部分に使う
emタグ
<em>は「重要性が高いわけではないが、文章の流れの中で強調したい部分」に使います。基本的には1語や数語に対して使われます。
<p>猫を飼ってるのなら<em>今すぐ</em>帰って可愛がりましょう。</p>
<em>は主要ブラウザでは斜体フォント（font-style: italic）で表示されますが、こちらも装飾を目的として使うべきではありません。
bタグ
単に注意を引きたい部分に使います。<b>は太字で表示されるものの、見栄え上の理由であればCSSを使うべきです。そのため<b>を使うべきケースというのはほとんどありません。