strongタグとは？使い方から類似タグとの使い分けについて解説

こんなことに悩んでいませんか？

よくわかんないけど、とりあえず太字にしたいからstrongタグを使っている方、けっこう多いですよね。

今回は、そんなstrongタグについてよく理解していない方に向けて、

について解説していきます。

文章を強調するためのstrongタグ。実は、ただ文字を太字にするためのタグではありません。

このタグの正しい使い方を理解することで、見た目だけでなく、中（html）から正しさと美しさを合わせ持つ文章を作ることができるでしょう。

html初心者さんや、strongタグの使い方を知りたい人は、ぜひ最後までご覧ください。

strongタグとは

strongタグの読み方

strongタグは「ストロング」タグと読みます。

日本語では「強い」と訳され、html言語としては【強調】と呼ばれるタグです。

strongタグの説明

その名のとおり、strongタグは、

になります。

strongタグの効果や役割は主に次の2つです。

• ・strongタグで囲ったテキストが太字になる。
• ・GoogleやSafariなどの検索エンジンに対して、「この部分が重要なんですよ！」と伝える。

テキストの見た目と意味を【強調】するのがstrongタグと覚えましょう。

strongタグで利用できる属性

strongタグはグローバル属性のため、HTMLの全ての要素で使用可能です。

対応ブラウザ

strongタグの対応ブラウザは以下のとおりです。

strongタグの基本的な使い方

strongタグの使い方

それでは実際にstrongタグを使って見ましょう。とは言っても使い方はとってもカンタン。

強調（太字）したい箇所をタグで囲むだけです。

結果は以下のとおり

カンタンでしたね。

strongタグと類似する要素との違い

文字を強調するstrongタグは、似たような効果や目的のタグがいくつかあります。

これまで何となく使っていた方も、今日からしっかりと使い分けをしましょう。

一覧表にするとこんな感じ。

それぞれ簡単に説明していきますね。

ｂタグ

bタグは「bold（大胆な、際立った）」の略で、文字を太字にするためのタグです。

使い方はstrongタグと同じですが、bタグは単純に文字を太字にするだけで、文字の強調を検索エンジンに対して伝える効果はありません。

実際の使い方ですが、例えば下記のように何かのイベントの開催情報を掲載する場合、何となく日時や場所を太くしたくなりますよね。

そういう時にbタグを使うとこうなります。

⇓コード⇓

⇓結果⇓

emタグ

emタグは「emphasis（強調）」の略で、タグで囲った文字を斜めに表示するためのタグです。

また、検索エンジンに対して「ここが重要！」と伝えるstrongタグに対し、emタグは「ここを際立たせたい！」と伝える効果があります。

「際立たせる」と言われてもイメージしにくいと思うので、【明日の天気予報は晴れです。】という文章で例えますね。

どこを強調するのかによって、文章のニュアンスが変わるのが分かりますか？

文章のどこにアクセントをつけたいのか、そんなことを考えながら使ってみましょう。

iタグ

iタグは「italic（イタリック(体)、斜体）」の略で、emタグと同じく文字をイタリック体にするためのタグです。

このタグも、bタグのように検索エンジンに対して文字の強勢を伝える効果はなく、文字を斜めにするだけのタグです。

一般的な使い方としては、心の中の言葉や外国語、ことわざ等に対して使用することが多いタグですね。

実際の使い方は以下のとおりです。

⇓コード⇓

⇓結果⇓（使用しているブラウザによって表示のされ方が異なります。）

使う頻度はそんなに高くないので、知識として覚えておくくらいでOKでしょう。

【応用編】CSSを使って太字にしよう

文字の装飾にはCSSを使おう

これまで文字を太字、斜体にする方法を解説しましたが、なるべくならhtmlタグを使って文字を太字にはせずに、CSSを使って文字のデザインを変えましょう。

見出しや段落など、文章に意味や役割を持たせるのがHTMLに対し、その文字を太字にしたり色を付けたりなど、装飾をするのがCSS（スタイルシート）と呼ばれる言語です。

「HTMLで装飾してはいけない。」と決まっているわけではありませんが、そもそものHTMLとCSSの目的を考えると、より正しいのはCSSを使った方法だと言えます。

CSSファイルを用意して太字にする方法

それではさっそくCSSを使って文字を太字にする方法を解説します。

とはいえ、やり方はとっても簡単。以下のコードをコピペするだけでOKです。

HTMLコードはこちら

CSSはこちら

結果はこちら

htmlに直接CSSを書き込む方法

先ほど説明した方法は、CSSを別ファイルとして用意する方法でしたが、htmlに直接CSSを書き込む方法もあります。

htmlコードは下記のとおりです。

結果はこちら

ちなみにこの方法はHTMLがごちゃごちゃしてしまって管理が大変、など理由からあまり推奨されていません。

1つ目の方法をメインに使っていきましょう。

まとめ

• ・strongタグはテキストに【強調】の意味を持たせるタグ。検索エンジンに対して「ここが重要！」と伝える役目もある。
• ・htmlは本来、文章に意味や役割を持たせる言語なので、文字を太字にするのが目的だったら、なるべくstrongタグは使わずにCSSを使いましょう。

いかがでしたでしょうか？

今回は、strongタグの概要と使い方から、他の類似タグとの違いについて解説しました。

それぞれのタグには、それぞれに適した使用方法があります。

見た目が変わらないから。と言って深く考えずに使っている人も多いかと思いますが、今回のようにhtmlの正しい使い方を学ぶことで、見た目だけでなく、中から美しい文章を作ることができます。

この記事があなたの参考になれば嬉しいです。

最後までご覧いただきありがとうございました。

参考文献：htmlクイックリファレンス
参考文献：MDN Ｗeb Ｄocs