使いどころが難しい「em要素」「strong要素」「mark要素」「b要素」。
どれも強調したいときに使う、程度にしか感じていない人も多いかと思います。
HTML5でのそれぞれの要素の違いは、どのような仕様なのでしょうか。
そのぞれの要素の違いのまとめ
長くなるので結論から述べます。簡単にまとめると以下です。
- strong要素
- 重要性、深刻性、緊急性など、まっさきに見てほしいテキスト
- em要素
- 強調させることによって文章の意味を変えたいとき
- mark要素
- 引用文や別の文脈の文章などから目立たせたい箇所
- b要素
- 上記以外で目立たせたいとき
HTML 4.01 の場合のおさらい
まずは、おさらいです。
em要素
Indicates emphasis. HTML 4.01 では「強調（重点）を示す」でした。
strong要素
Indicates stronger emphasis. HTML 4.01 では「より強い強調（重点）を示す」でした。
mark要素
HTML 4.01 にはありません。
b要素
Renders as bold text style. HTML 4.01 では「太字体で描写する」でした。
また、描写はユーザーエージェント依存とも書かれています。
以上のように、em要素は強調で、より強い強調はstrong要素、b要素はCSSで代替という形にしていたと思いますが、HTML5からは意味が違ってきます。
em要素
HTML5でのem要素の仕様と日本語訳は以下です。
The em element represents stress emphasis of its contents.
The level of stress that a particular piece of content has is given by its number of ancestor em elements.
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which stress is used in this way depends on the language.
em要素は、そのコンテンツの強勢（アクセント）強調を表します。
コンテンツの特定の部分についての強勢の度合いは、祖先のem要素の数によって与えられます。
強勢強調の配置は、文の意味を変えます。したがって、この要素はコンテンツで不可欠な部分を形成します。
このような方法で強勢を使う場合、正確な使い方は言語に依存します。
とあります。HTML5になってから使い方が変わっています。
HTML5でのem要素は、文にアクセントを置くことによって、意味を変えるために使います。
説明するより、以下の例を見てもらったほうが早いでしょう。
例：淡々と書かれた文章
例：XHTMLなどと比べたときに、HTMLに重きをおいた文章
例：柔軟ではないと言っている人に対しての文章
例：HTMLがなんなのかわからない人のための説明
strong要素
HTML5でのem要素の仕様と日本語訳は以下です。
The strong element represents strong importance, seriousness, or urgency for its contents.
Importance: The strong element can be used in a heading, caption, or paragraph to distinguish the part that really matters from other parts of the that might be more detailed, more jovial, or merely boilerplate.
Seriousness: The strong element can be used to mark up a warning or caution notice.
Urgency: The strong element can be used to denote contents that the user needs to see sooner than other parts of the document.
The relative level of importance of a piece of content is given by its number of ancestor strong elements; each strong element increases the importance of its contents.
Changing the importance of a piece of text with the strong element does not change the meaning of the sentence.
strong要素は、そのコンテンツに対して強い重要性、深刻性、緊急性を表します。
重要性：strong要素は、見出し、キャプション、段落のなかで、本当に重要な部分を、他の、より詳細な、より陽気な、または単に定型句かもしれない部分と区別するために使えます。
深刻性：strong要素は、注意、警告の通知をマークアップするために使えます。
緊急性：strong要素は、ユーザが他のドキュメントの部分よりも先に見ることが必要なコンテンツを示すために使えます。
コンテンツの部分の重要性の相対度合いは、祖先のstrong要素の数によって与えられます。各strong要素は、そのコンテンツの重要性を増加させます。
strong要素が適用されたテキストの重要性を変更しても、文の意味は変更されません。
strong要素は、大事な部分を強調するときに使います。前述のem要素は、文の意味が変更されるのに対して、strong要素は、文の意味が変更されません。
たとえば以下のようなものがあります。
例：形式的な「○章」に対して実際のタイトルを示す
例：「取材」の部分が新しく追加して初めて見る部分として表示
<ul>
<li><strong>取材</strong></li>
<li>ウェブのCSSの改修</li>
<li>文言修正</li>
</ul>
例：入れ子にした強調の多重化
mark要素
HTML5でのem要素の仕様と日本語訳は以下です。
The mark element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or other block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader’s attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under previously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity.
mark要素は、他の文脈でのそれの関連性を参照する用途のために目印をつけたりハイライトしたりした文書のなかの文字列を表します。引用か他の単純なテキストの参照の一部分で使われるとき、もともとは示されていなかったハイライトを示します。それは読者の関心をひくためのハイライトで、著者は当初その部分を書いたときには大事だとみなしていないかもしれない（いまにおいてはそのとき予想しえなかった）本文の一部です。ドキュメントの主要な文章で使われるとき、ユーザの現在の活動と関連が高そうだと推しはかって目立たせたドキュメント部分を示します。
つまり、他の文に対して、本文の重要性などとは関係なく「ここ大事だよ」とか「ここを見て」とかを指し示すものです。検索結果をハイライトしたいときにも使えます。
例：JavaScriptの記述がわかる人に対して、PHPでは変数名の頭に$をつけなければいけないことを示す
<pre><code><mark>$</mark>hogehoge = 0;</code></pre>
b要素
HTML5でのem要素の仕様と日本語訳は以下です。
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.
b要素は（どんな特別な重要性も伝達しておらず、代わりの声やムードの意味はない）効果的な目的のために注意をひきたいテキストの範囲を表します。
例えば、文書の要約の中のキーワード、レビューのなかの製品（作品）名、対話型テキスト駆動ソフトの実行語、記事のリードなどです。
em要素やstrong要素などに適さなかったときに使うようなものです。目立たせたいけど、em要素でもstrong要素でもmark要素でも（さらにはi要素でも）ないなと思ったときに使うとよいでしょう。
ちなみに、「actionable words in interactive text-driven software」は「対話型テキスト駆動ソフトの実行語」と訳しましたが、端的にいうとCUIのコマンドのことでしょうか。
非推奨ではなくなりましたが、積極的に使うものでもありません。
たとえばこんな感じ。
<h2>HTMLでの強調表示</h2>
<p><b class=”lede”>ウェブサイトを作るうえで欠かせないb要素、em要素、strong要素、mark要素について説明する。</b></p>
<p>HTML5に移行して仕様が変わった。</p>
総評
それぞれ、具体的に使い分けされてきたようなイメージです（説明のまとめはページのトップ参照）。
今回はi要素は取り扱わなかったですが、日本語ではあまり使う必要がなさそうなので割愛しました。b要素も結局CSSでやれることでもあるので、宙ぶらりんな感じがしますね。