「HTMLで太字ってどうやったらできるの？」
「HTMLのタグを理解して、文字を装飾させたい！」
今回はこういったお悩みについて解説をしていきます。
HTMLを学び始めたばかりの頃は、どうやったら太字が表示できるのか私も戸惑いました。いっぱいタグがあって覚えきれなかったくらいです。
しかし学習していく中で徐々に覚えていくので、これからHTMLを学習する方も安心してくださいね。
この記事で、「HTMLで太字にする方法」を初心者の方にも分かりやすくまとめていきますので、ぜひ参考にしてみてください。
目次
HTMLの太字は「タグ」を使いこなそう
HTMLで太字にする場合、2種類の方法があります。
- <b>ダグ
- <strong>タグ
どちらも「太字」にするタグですが、SEOにおいては意味が異なっていますので注意ましましょう。
<b>タグについて
<b>タグは「boldタグ」の略で、文字を太字にする効果を持っています。
見かけ上での文字強調の効果は持っていますが、「意味」としては強調されないためSEO上あまり効果はありません。
ただ文字を太字にするための「装飾目的」の際に使うようにしましょう。
書き方としては、以下の通りです。
|
1 |
<b>太字に変更させる</b> |
<strong>タグについて
<strong>タグは<b>タグと同様に、文字を太字にする効果を持っています。
<b>タグとは違い、「見かけ上」と「意味」両方を強調する効果を持っています。
そのためSEO対策をする際に効果が出ますが、多用しすぎるとペナルティを受ける可能性があるので注意いておきましょう。
WordPressで太字にする際はこの<strong>タグが使われますので、ぜひ覚えておいてくださいね。
書き方としては、以下の通りです。
|
1 |
<strong>文字を強調させる</strong> |
<strong>タグの「意味を強調」を詳しく解説
「<b>タグ」と「<strong>タグ」が文字を太字に変更させることはお分かりいただけたでしょうか？
- <b>タグ：「見かけ」だけの強調
- <strong>：「見かけ」と「意味」の強調
先ほどもチラっと解説しましたが、SEO対策をする際は「意味」の強調をさせなければいけません。
これはあなたの記事を評価する「クローラー」と呼ばれる、ロボットみたいなプログラムが読み取る内容に差があるからです。
画面の表示上では同じ「太字」ですが、クローラーはその記事の重要部分の意味を読み取り評価対象とするため、<strong>タグとの使い分けが大切だと言えますね。
強調をさらに強調する方法
<strong>~</strong>で囲った文字が強調されることは解説しましたが、さらにその重要性の強さの程度を分けることが可能となっています。
それが、さらに重要性の高い内容を<strong>タグで囲む方法です。
例えば以下のように記述します。
|
1 |
<strong>重要<strong>最重要</strong></strong> |
二重で<strong>タグを使用する際は、一つで使用するとき以上にペナルティ対象になりやすいため注意が必要です。
適切に使えばSEOで強い味方ですが、一歩間違えるとかえって逆効果ですのでよく覚えておいてくださいね。
HTMLで太字にならない原因とは？
ここでよくある注意点なのですが、HTMLで太字になるタグを使用しているのに、きちんと太字にならない事例がありますので確認していきましょう！
多くの場合は “よくあるミス” なのですが、これが多いので気をつけましょう。
- 閉じタグが記載されていない
- CSSで打ち消す記述をしてしっまっている
- <strong>タグなど、少し長いスペルの入力ミス
閉じタグが記載されていない
よくあるのがこちらのミス。
閉じタグが記載されていない場合が多いですので、いま一度見直してみましょう。
- <b>タグ
- <strong>タグ
共に「閉じタグ」が必要なタグとなっています。
- </b>
- </strong>
上記のように、「 / 」を使ってきちんと閉じましょう。
CSSで打ち消す記述をしてしまっている
実はHTMLで太字の記述をしていても、CSSの方で打ち消すことができます。
2パターンありますので、該当の記述がないかよく確認しましょう。
<b>、<strong>直接を指定している場合（今回は<strong>で記述）
|
1 2 3 |
strong{ font-weight: nomal; } |
<body>全体を指定している場合
|
1 2 3 |
body{ font-weight: nomal; } |
<strong>タグなど、少し長いスペルの入力ミス
たまにあるのですが、<strong>と<srtong>を間違えてしまったりなどですね。（実際に私も経験があります…）
スペルを間違えている場合もありますので、見直しなどをしてしっかりと確認してみてくださいね。
CSSで太字に変更させる方法
先ほど、CSSで打ち消す記述について解説しましたが、逆に太字に戻す方法もあります。
|
1 2 3 |
b{ font-weight: bold; } |
|
1 2 3 |
strong{ font-weight: bold; } |
上記にように、nomal→boldに変更するだけで囲まれた箇所がきちんと太字に戻りますので試してみてくださいね。
通常はこの変更を行わなくてもHTMLタグで<b>タグや<strong>タグを使用すれば太字になるのですが、先ほども解説したように、CSSで打ち消している際はこの方法で戻しましょう！
太字や装飾を施すタグの紹介
今回は
- <b>タグ
- <bold>タグ
をご紹介しましたが、HTMLには他にも文字装飾の要素を持つタグが存在します。
例えば以下の通りです。
- <i>タグ
- <em>タグ
上記はどちらも文字を「イタリック体」にさせますが、<b>タグと<strong>タグと同じように、それぞれが違う役割と持つので解説していきますね。
<i>タグ
文字をイタリック体に変更させます。
<b>タグと同様に、見かけ上での効果は持っていますが、「意味」としては強調されないためSEO上あまり効果はありません。
<em>タグ
こちらは<i>タグとは違い、「見かけ上」の変更と「意味」を強調する効果を持っています。
イタリック体、かつ文字の強調（太字）をするので使用するのであればこの「<em>タグ」が適切ですね。
もちろんSEO対策を行う上で効果がありますので、使用する際は多用してペナルティを受けないように注意しましょう。
太字にする際は「<strong>タグ」「<em>タグ」どちらが適切？
SEO上効果もあり、文字を太字にする<strong>タグと<em>タグですが、どちらを使用したら良いのでしょうか。
実は同じ「太字」でも、両者はその “重要度” が違いますので気をつけましょう。
- <strong>：重要
- <em>：強調
比較した際、SEOでより評価の対象となるのが<strong>タグの方です。
一番重要度が高い文字に対して使用するものとなりますので、覚えておきましょう。
もちろん、多用は厳禁です。
まとめ
いかがでしたか？
今回の記事では
「HTMLで太字にする方法」
についてまとめてみました！
HTMLはタグがたくさんあり、それぞれに役割があるので正しく使い分けましょう。
間違えてしまうと、自分が思っていたのと違う表示がされてしまうので気をつけてくださいね。
それでは、この記事が参考になったのならとても嬉しいです。
