em要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
em要素は、HTML 4.01と同様、「強調」を表します。ただし、HTML5ではstrong要素の意味が「強い重要性」に変更されているので、強調を示す要素はem要素のみとなりました。また、強調する場所によって文の意味が変わることが、仕様書に明記されました。
強調する場所によって文の意味が変わるとはどういうことでしょうか？ たとえば、以下のような文があったとします。
<p>私は、あっさりだけどコクがあって、細麺のラーメンが好きかな。</p>
「私は、」をem要素でマークアップすると、「私」の意見であるということを強調している文になります。何人かで好きな食べ物の話をしているシーンかもしれません。
<p><em>私は、</em>あっさりだけどコクがあって、細麺のラーメンが好きかな。</p>
「あっさりだけどコクがあって、」をem要素でマークアップすると、ラーメンの味を強調している文になります。ラーメンのスープを話題にしていて、誰かが「僕はとにかくコッテリしているの物が好きかな」と言ったことに対しての意見かもしれません。
<p>私は、<em>あっさりだけどコクがあって、</em>細麺のラーメンが好きかな。</p>
細麺が好みということを強調しています。麺の太さの話題での意見かもしれません。
<p>私は、あっさりだけどコクがあって、<em>細麺の</em>ラーメンが好きかな。</p>
以下の例では、食べ物全般の話の中で出た意見かもしれません。味とか麺の太さよりも、「ラーメンが好き」ということを強調しています。
<p>私は、あっさりだけどコクがあって、細麺の<em>ラーメンが好きかな。</em></p>
「強調する場所で文の意味が変わる」という意味がお分かりいただけたでしょうか？
HTML 4.01では、em要素とstrong要素を使い分けることで、強調の度合いを分けられました。HTML5では、em要素を入れ子にすることで強調を強められます。
<p><em>私は、あっさりだけどコクがあって、<em>細麺</em>のラーメンが好きかな。</em></p>
上の例では、全体を強調して、その中でも「細麺」を特に強調していることになります。
strong要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
HTML 4.01のstrong要素は「より強い強調」という意味でしたが、HTML5のstrong要素は「強い重要性」を表します。HTML 4.01ではem要素もstrong要素も強調を表していましたが、HTML5では強調はem要素の役割で、strong要素は重要性を表す要素になりました。
em要素は、強調する場所によって文の意味が変わりましたが、strong要素ではそのようなことはありません。入れ子にすることで、重要度のレベルを上げることができるのは、em要素と同様です。
<h2>注意！</h2>
<p><strong>踏み切りの警報機が鳴ったら、<strong>踏み切り内に入らないで</strong>ください</strong></p>
s要素
- カテゴリー：フローコンテンツ、フレージングコンテンツ、パルパブルコンテンツ
- この要素が使える文脈：フレージングコンテンツが予想される場所
- コンテンツモデル：フレージングコンテンツ
- コンテンツ属性：グローバル属性
s要素は、HTML 4.01では取り消し線を引くための要素であり、非推奨でした。HTML5では「もう正確ではない」「もう関連していない」といった意味が与えられ、非推奨ではなくなりました。
del要素と似ている印象を受けるかもしれませんが、del要素は「削除」を表すので、両者は異なる意味を持ちます。
s要素の分かりやすい使用例は、価格の値下げを示す場合です。
<h2>デジカメ最新モデル</h2>
<p><s>価格：49800円</s></p>
<p><s>セール価格：45800円</s></p>
<p><strong>最終セール価格：39800円</strong></p>
この例では、デジカメ最新モデルと、以前の価格である「価格：49800円」「セール価格：45800円」は直接的には関連していません。関連性がなくなったコンテンツをあえて残すことで、値下げ幅を強調する効果が期待できます。つまり、「もう関連性していない」というコンテンツが存在することに意味があるのです。
一方で、del要素は削除を表すので、del要素の内容が存在しなくてもコンテンツとして問題ない場合に使います。
