<b>と<em>と<strong>のhtmlタグの違いについて

作りながら学ぶ HTML/CSSデザインの教科書

生徒から質問があったので、個人的見解として考えてみました。(実は生徒の質問は「1emと1pxの違いについての質問」だったのですが、早とちりしてタグに関しての質問と勘違いしていたのですが^^;)

 

<b>と<em>と<strong>の違いについて

「b」は「bold」の略。大胆な、勇敢な、果敢な。

「em」は「emphasisエンファシス」の略。強調、重要視、重点。

「strongストロング」は力のある、丈夫な、強健な。

 

<b>と<em>と<strong>も昔からある要素で、どのブラウザも対応しています。
以前はCSSを使わず、htmlのみでサイト構築していた時代があります。その時には明確に意図して使い分けていたように思いますが、現在ではその意味も薄れつつあるように思います。
多くのブラウザでは<b>と<strong>は太字で、<em>はイタリックもしくは太字で表示されます。

htmlの中だけでの定義づけとしては、個人的意見ですが、「曖昧だ」と思います。同義語や類義語に近い考え方でよいと思います。たとえば某番組でクイズになているような、日本人でもニュアンスが難しいものと同じように考えてよいと思います。

【やわらかさの程度】
「ふわふわ」:100% 柔らかく適度に弾力に富んでいる様子
「ふかふか」: 90% かなり大きくふくらんで弾力も感じられる様子
「ふんわり」: 70% 柔らかく軽そうにふくらむ様子
「ふっくら」: 60% 好ましい状態で柔らかく膨らんでいる様子

そこで、この3種のタグを使い分けるのに便利な方法をスタイル別に提案してみます。

<b>は太字、<em>は色だけ変えて少し強調、<strong>は色を変えて太字で超強調。

b {
font-weight: bold;
}
em {
color: #0c00cc;

}
strong {
font-weight: bold;
color: #cc0000;
}