bタグとstrongタグの書き方!HTMLで文字を太字にする方法【初心者向け】

初心者向けにHTMLで文字を太字にする方法について解説しています。太字はbタグやstrongタグを書く必要がありますが、実際にソースコードを書きながら説明しているので、ぜひ参考にしてみてください。初心者でも簡単に覚えられます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

HTMLで強調したい部分に使われるタグとして太字やイタリックなど様々あります。その中でも今回は太字について紹介します。

bタグとstrongタグを使って書き方を解説しているので、実際に書きながら覚えていきましょう。

HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

「見かけ上」と「意味」の違い

見かけ上同じようにみえる太字ですが、タグの種類によって「見かけ上」の強調か「意味」としての強調かが異なります。「見かけ上」というのはその言葉の通り、単純に文字を太く強調することを指します。

一方、「意味」としての強調は、例えばSEO(検索エンジン最適化)など、その文字がそのサイトでどれくらい影響力のある言葉なのかを強調することを指します。

 

なぜ使い分ける必要があるのでしょうか?すべて「意味」として強調してしまえば良い気もしますが、そう都合よくできてはおらず、1つのページに「意味」として強調する言葉を増やしすぎるとペナルティを食らってしまう場合があります。

そのため、人の目に強調したいのか、本当にそのサイトにとって重要な言葉なのかを使い分けることが必要です。

 

bタグ

bタグとは「boldタグ」の略で、文字を太字にします。bタグは「見かけ上」文字を強調することができますが、「意味」としての強調はされません。

bタグの書き方はbタグで強調したい部分をはさみます。

<b>太くしたいところ</b>

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

strongタグ

strongタグもbタグ同様に文字を太くしますが、strongタグは「見かけ上」と「意味」の両方強調します。

上述の通り、SEO対策などで使うことで検索エンジンに引っかかりやすくなりますが、使いすぎるとペナルティを食らう場合があります。

strongタグの書き方もbタグ同様に、strongタグではさみます。

<strong>強調したいところ</strong>

 

 実際に書いてみよう

それでは実際に書いてみましょう。bタグとstrongタグを両方使ってみます。bold.htmlを作成し、以下のように記述します。

bold.html
-------------------------------------------------------
<html>
  <head>
    <meta charaset="utf-8" />
  </head>
  <body>
    bタグとstrongタグの違いは、<b>bタグは「見かけ上」だけ太字にしている</b>のに対して、<br />
    <strong>strongタグは「見かけ上」と「意味」の両方を強調している</strong>ところである。<br />
    <br />
    そのため、<strong>きちんと使い分ける必要がある。</strong><br />
  </body>
</html>
--------------------------------------------------------

ブラウザで開いてみます。

 

まとめ

bタグとstrongタグの使い分けは、SEOの一つの対策につながります。ぜひ活用してより良いサイトを作りましょう。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルのWebサイトを開発することが可能です。

独学に限界を感じている場合はご検討ください。