[ HTML ] 文字を太字(強調)で出力する ( strong em b font-weight )

Pocket

ここでは、HTML で文字を太字にするサンプルと、文章内で重要であることを強調するサンプルコードを掲載しています。また、ブラウザでの出力結果も合わせて確認できます。

スポンサーリンク

HTML 文字を太字(強調)で出力する

<b>bタグで太字にする</b>
<div style="font-weight: bold;">font-weight による太字</div>
<em>emタグによる強調</em>
<strong>strongタグによる強い強調</strong>

出力結果

bタグで太字にする

font-weight による太字

emタグによる強調
strongタグによる強い強調

 

太字と論理的強調は違うものだけれど

b タグは単純に文字を太くします。文章内の重要度を強調していることにはなりません。強調する意図は em タグや strong タグを使用します。主に検索エンジンに対して文章作成者の意図(強調)を伝える手段になります。

ただし、ブラウザは strong タブの強調を太字で出力しますので、結果的に strong タブは太字で出力されると考えても問題ないと思います。

なお、em タグは斜体表示されていますが、フォントによっては期待する出力にならないことがあります。そのようなときは、font-family で、フォント ( MS UI GOTHIC etc… ) を変更する必要があります。例えば、フォントが Meiryo UI のときには、ブラウザ上に斜体で表示されませんでした。

一般的とは言い切れないかもしれませんが、太字で出力したい部分と強調したい部分は同じであると考えることが自然だと思います。

結論

太字にするなら、飲んだら乗るな、b タグ使うな strong タグを使え

上の標語のような文は、strong タグを使うことで結果的に太字で出力されています

スポンサーリンク


Pocket

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>