2011年07月26日

HTML5で強調っぽい意味を表すタグ(strong、em、i、b、mark)

まえがき


今回のネタは、HTML5で強調っぽい意味を表すタグについてです。
HTML5になって意味が変わったタグもありますので、「強調はstrongタグでオールOK!」とか思ってると罠に嵌ります。
W3Cが定義したタグの仕様(原文+私の劣悪日本語訳)と、その使いどころを中心に書いてみます。



strongタグ


HTML4の頃は「強い強調」を表していたstrong。
HTML5になって、「強調」の意味はなくなり「重要性」を表すことになりました。

W3Cのサイトから引用

The strong element represents strong importance for its contents.
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タグで重要度を変えても文章の意味は変わらないよ。

特に読者に伝えたい部分に適用します。
使いどころとしては、エラーメッセージや警告文などでしょうか。
ブラウザでの見た目は太文字になります。



emタグ


「強調」を表します。

W3Cのサイトから引用

The em element represents stress emphasis of its contents.
The level of emphasis that a particular piece of content has is given by its number of ancestor em elements.
The placement of emphasis changes the meaning of the sentence. The element thus forms an integral part of the content. The precise way in which emphasis is used in this way depends on the language.

emタグは強調を表すよ。
emタグを入れ子にすると強調度がアップするよ。
emタグの位置によって文章の意味が変わることがあるけど、その辺は言語に依存してるよ。

文章を口頭で話したときに強く発音する部分に適用します。
音声ブラウザだと実際に強く発音されるようです。
使いどころは、一言では説明しづらいです。
例えば以下の文章で「」の部分を強調したときのニュアンスに違いが出ます。

「猫」は可愛い動物です。
(他の動物に比べて、特に猫に萌える感じ)

猫は「可愛い」動物です。
(「猫は不細工だ」と言ってる相手に反論する感じ)

猫は可愛い「動物」です。
(「猫って植物?」とか言ってる愚者に真実を教える感じ)



iタグ


HTML4では見た目としてのイタリックを表していましたが、HTML5では「イタリックで表しそうなもの」という意味になりました。

W3Cのサイトから引用

The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

iタグは声やムードを表すテキストの範囲や、通常の文から区別したい範囲を表すよ。

iタグが表すのは具体的に、専門用語、別言語の慣用句、心の声、船の名前、などです。
日本語ではそもそもイタリックという習慣がないので、無理して使う必要はないかもしれません。
ブラウザでの見た目はイタリックになります。



bタグ


HTML4では見た目としての太文字を表していました。
HTML5では、前後のコンテンツから区別したいテキストを表します。
ただし、特に重要性を表しはしません。

W3Cのサイトから引用

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タグは特に重要性を表すことなく注意を引きたいときに使うよ。

bタグが表すのは具体的に、文書概要のキーワード、レビュー内の製品名、プログラムの予約語(?)、記事の前置き部文、などです。
bタグはあまり積極的に使うものではなく、他のタグでちょうど良いものがない場合に使うようです。
ブラウザでの見た目は太文字になります。



mark


HTML5で追加された新しいタグです。

W3Cのサイトから引用

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.

原文を読んでもいまいちよくわかりません。
使いどころを挙げるなら「検索結果のハイライト」でしょう。



あとがき


HTML5では、厳密な文書構造を求められます。
きちんとタグの意味を理解してマークアップしたいものです(主に自戒的な意味で)。







タグ:HTML5
posted by ぺるたご at 03:55| Comment(0) | TrackBack(0) | 日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/216715883

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。