【HTML入門】文字を太字にするb要素とstrong要素の違いを解説

2024.01.29
文字を太字にするb要素とstrong要素の違いを解説

HTML内の文字を太字にしたいときがありますよね。

HTMLのみで太字にしたいなら、b要素とstrong要素を使う方法があります。

2つの要素はどのような違いがあるのでしょうか?

今回はHTML内の文字を太字にしたいという方のために、

  • b要素とstrong要素の違い
  • CCS(スタイルシート)を使う方法

以上の項目に沿って、解説していきますね。

この記事を読めば、HTML内の文字を太字にする方法が分かるようになりますよ。

ぜひ最後まで読んでくださいね!

b要素とstrong要素はどう違う?

b要素とstrong要素を使えば、文字を太字にすることが可能です。

実際にコードを書いてみますね。

<p>b要素内の文字は<b>太字で</b>表示されます。</p>
<p>strong要素内の文字も<strong>太字で</strong>表示できますが使い道が異なります。</p>

上記では、どちらもタグで囲った内側の文字が太字になります

ただし、どちらでも自由に使えるわけではなく、それぞれに別の意味があります。

b要素は、見た目を強調したいときに使います。

見た目が変わるだけで、意味としての強調はありません。

対して、strong要素は、意味を強調したいときに使用します。

この要素を使うことで、検索エンジンなどに強調したい文字だと伝えることができます。

ただ、多くの文章に使われていると、分かりづらいサイトということで、思わぬペナルティを受けることがあります。

使い過ぎは厳禁ですね。見た目を強調させたいだけの場合には、使用しないようにしましょう。

CSSを使う方法

見た目を強調したいときには、CSSを使う方法もあります。

<p>CSSを用いて文字を<span class="txt-bold">太字に</span>表示します。</p>

CSSでは以下のように記述します。

.txt-bold{
  font-weight: bold;
}

HTML5では、見た目のスタイルはHTMLではなく、CSSで行うことが推奨されています

特別な理由がない限りは、CSSを使って指定しましょう。

まとめ:b要素とstrong要素を使い分けよう

今回は、HTML内の文字を太字にする方法を解説してきました。

b要素とstrong要素の違いを知り、使い分けることが大事です。

CSSで装飾する方法も試してみてくださいね。

今回の記事が参考になれば幸いです。

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5