by shigemk2

当面は技術的なことしか書かない

b vs strong vs em

4.6.3 The strong element — HTML5

b と strong と emってどう違うのだろうか。

コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>hoge</title>
  </head>
  <body>
    <em>今日でブログの毎日連続投稿がまる1年</em>
    <strong>完全に日刊になってしまいました</strong>
    <b>Nice Boatから5年</b>
  </body>
</html>

表示結果

上を見ていただけたら分かるように、emは斜体になりstrongとbは太字になっている。

w3cのemのページによると、

The em element isn't a generic "italics" element. Sometimes, text is intended to stand out from the rest of the paragraph, as if it was in a different mood or voice. For this, the i element is more appropriate.

The em element also isn't intended to convey importance; for that purpose, the strong element is more appropriate.

と書いてある。
4.6.2 The em element — HTML5

またbタグのページでは、

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

と書いてある。
4.6.17 The b element — HTML5

つまり、単純に斜体や太字にしたいだけならiタグ bタグを使えばよいのだが、
マークアップに意味を持たせ、「強調」したい部分はem、「重要」である部分はstrongタグを使う。

  • マークアップにどういう意味を持たせるのか
  • ブラウザ上でどのように表示されるか

は別次元の問題であることを頭に入れておかねばなるまい。