“strong”は重要!、emは強調!、bは注目…

strong“、embの各要素のCSSを調整するにあたって、最新のW3C、working draft (HTML 5.2、W3C Working Draft, 18 July 2017)を確認してみました。

“Strong”タグは重要

The <strong> element represents strong importance, seriousness, or urgency for its contents.

strong要素は、その内容が非常に、重要、深刻、緊急のいずれかであることを示します。

これは、以前と同じようですね。

セマンティックな(意味のある)記述を心がけるために、重要度が低くただ装飾したいだけの時には使わないようにしましょうなんていわれますよね。

因みに、FC2、Blogger、Seesaa、ワードプレスのすべてにおいて、投稿メニューアイコンのbボタンの中身はbタグではなくて、strongタグです。色を変えようと思っただけなのに強調されているという事もあり得ますね。

CSS

strong {
background: linear-gradient(transparent 60%, #ffadad 0%);
}

これはstrongタグの装飾の例です。

重要と言えば、赤系かな…

emタグは強調

The <em> element represents stress emphasis of its contents.

Note
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.

em要素は、その内容の強調を表します。
注記:
em要素は、一般的な”イタリック”ではありません。時々、あたかも雰囲気や声色が違うかのようにある文節を他の段落から際立たせたい時には、i要素がより適切です。
em要素は、重要であることを示しませんので、そういう目的の場合には、strong要素がより適切です。

これはちょっと面白いと思ったのですが、Seesaaとワードプレスの投稿メニュアイコンのiボタンは、emタグなのですが、FC2、bloggerでは、iタグです。うほ~。混乱しますね~。

CSS

em {
background: linear-gradient(transparent 60%, #afeeee 0%);
font-weight: bold;
font-style: normal;
}

これはemタグの装飾の例です。

強調したいけど、重要じゃなく、雰囲気を変えるためのものではないって、うーん。イタリックはキャンセルして、太字にした上で、青色ハイライトにしてみました。

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.
Note
Style sheets can be used to format <b> elements, just like any other element can be restyled. Thus, it is not the case that content in <b> elements will necessarily be boldened.

b要素は、重要性を強めたり声色や雰囲気を持たせたりすることなく実務的な目的で注目を促したいテキスト部分を示します。文章中の要約文のキーワードやレビューの中での製品名、テキスト, 対話式のテキスト駆動型ソフト中の操作可能な言葉、もしくは記事中の冒頭文(リード文)などです。
注記;
b要素をスタイルシートでフォーマットする際は、他の要素と全く同じように装飾できます。このため、b要素内の内容は必ずしも太字にする必要はありません。

boldのbであるはずが、bボタンを押してもこのタグは出てきません。笑。

CSS

b {
background: linear-gradient(transparent 60%, #ffd700 0%);
font-weight: bold;
}

これはbタグの装飾の例です。

必ずしも太字にする必要はありませんとのことでしたけれど、太字は残して最も無難なマーカー色の黄色系にしました。

ボタン(アイコン)と中身が違うケド

ブログプラットホーム(CMS)によってiボタンの中身が違ったり、bボタンの中身がstrongだったり、混乱しますけれど、それぞれのタグの意味を調べてみると結構楽しかったりします。

投稿者: のろのろ

ブログのカスタマイズをしては、備忘録を書いています。2017年4月にワードプレスデビューし、試行錯誤しながら寝落ちする感じのへなちょこブロガーです。

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください