結城永人サイト作成でHTMLのemとstrongはHTML5／Living Standardで強調と重要性の違いがあるもののどちらも使い方が似ていて分かり辛い。そして初期のデザインが斜体と太字なのがそれぞれにiとbと同じなので、見た目からどちらを使っても良いのかと混乱してしまう。
紛らわしい四つのタグの意味をしっかり捉えて的確に使い分けができるようにしたい。
em／強調タグとは何か
HTMLのemタグのemはemphasis／強調の冒頭の二文字で、コンテンツの強調を表すために使われる。
em要素は、要素のコンテンツの強調を表す。
コンテンツの特定部分が持つ強調のレベルは、祖先のem要素の数によって与えられる。
強調の設置は、文の意味を変更する。このように要素は、コンテンツの不可欠な部位を形成する。強調が使用される正確な方法は、言語によって異なる。
大事なのはemタグはコンテンツの「特定部分」の意味付けを強調するように変えるということだ。
強調することによってコンテンツの意味合いが変わり得るので、そのような場合に使うのが適している。
emタグのマークアップ
<em>コンテンツ<em>emタグを使った表示
コンテンツ
初期のデザインでは文字の見た目は斜体で表示される。
emタグは強調したコンテンツの中でさらに強調して度合いを高めるために入れ子で記載することもできる。
<em>コンテンツ<em>入れ子</em>コンテンツ</em>emタグの入れ子の表示
コンテンツ入れ子コンテンツ
初期のデザインでは入れ子のemタグで表示がさらに変わることはない。
emタグの使い方の例
例えば「猫が魚を食べている」という文章で、猫に重点を起きたければ猫にemタグ、魚に重点を起きたければ魚にemタグを使う。
または他のコンテンツを含めて文章自体を部分的に捉えて「猫が魚を食べている」と最初から最後まで強調しても構わない。
emタグの使い方の注意点
emタグは見た目がiタグと同じで、中身がstrongタグと似ているからどう使い分けるべきか。
emタグとiタグの違い
既定では、視覚的な結果は同じです。しかし、意味論的な意味合いは異なります。 <em> 要素はその内容を強調することを表しますが、一方で <i> 要素は、外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列を表します。（書籍や映画などの作品名には、 <cite> を使用してください。）
コンテンツの意味付けを変える必要がなく、見た目だけ斜体に変えて注意を引くためにはemタグよりもiタグを使う。
emタグとstrongタグの違い
<em> 要素は、周囲の文字列と比較して強調される言葉のためのものであり、ふつうは文内の一語又は数語に限定され、文自体の意味に影響します。（中略）。周辺のテキストよりも高い重要性を持つテキストを示すためには、<strong > 要素を使用してください。
コンテンツの内容上の不可欠な部分を示すためにはemタグよりもstrongタグを使う。
strong／重要性タグとは何か
HTMLのstrongタグはstrong／強力で、コンテンツの強力な部分という重要性を表すために使われる。
strong要素は、そのコンテンツに対する強力な重要性、深刻性、または緊急性を表す。
（中略）
重要性：strong要素は、より詳細な、より陽気な、または単に常用文かもしれない部分から本当に重要である部分を区別するために、見出し、キャプション、または段落で使用できる。（これはhgroup要素が適切である、小見出しのマークアップとは区別される。）
深刻性：strong要素は警告または注意の通知をマークアップするために使用できる。
緊急性：strong要素は、ユーザーが文書の他の部分よりも早く確認する必要があるコンテンツを示すために使用できる。
コンテンツの一部の相対的な重要性のレベルは、祖先strong要素の数によって与えられる。各strong要素が、その内容の重要性を増大する。
strong要素を持つテキストの一部の重要性を変更は、文の意味を変更しない。
strongタグは強い重要性タグとも呼ばれて使い方が似通った他の要素と全く異なり、重要性以外を表すことはない。
大事なのはstrongタグは一つの「コンテンツに対する」強力な重要性とそこから派生する深刻性と緊急性を与えるということだ。
一言では内容上の不可欠な部分であってコンテンツの主旨や用途に関わる部分を示す。
なのでコンテンツの意味を変えることはないし、部分的に強調してコンテンツの意味を変えたい場合にはemタグを使うと良い。
strongタグのマークアップ
<strong>コンテンツ</strong>strongタグを使った表示
コンテンツ
初期のデザインでは文字の見た目は太字で表示される。
strongタグは重視したコンテンツの中でさらに重視して度合いを高めるために入れ子で記載することもできる。
<strong>コンテンツ<strong>入れ子</strong>コンテンツ</strong>strongタグの入れ子の表示
コンテンツ入れ子コンテンツ
初期のデザインでは入れ子のstrongタグで表示がさらに変わることはない。
strongタグの使い方の例
例えば「当店は花屋で薬も扱う」という文章で、内容的に欠かせない主要なところは「花屋」だからstrongタグが向いている。
または他のコンテンツを含めて文章自体が要点を示したり、注意を促したり、それなしに成り立たなくなるくらい重視されるならば記載して構わない。
その他、見出しなどで「トピック①ケーキ」や「トピック②カステラ」のような既定文（トピック）を幾つか繰り返す場合はそれぞれの個別の部分（ケーキやカステラ）にstrongタグを使って重要度を高める使い方もある。
strongタグの使い方の注意点
strongタグは見た目がbタグと同じで、中身がemタグと似ているからどう使い分けるべきか。
strongタグとbタグの違い
<strong > 要素はより高い重要性を持つコンテンツのためのものであるのに対し、 <b> 要素はより重要であるという意味なしに、テキストに注意を引かせるために使用します。
見た目だけ注意を引きたくて内容上の不可欠な部分でなければstrongタグよりもbタグを使う。
strongタグとemタグの違い
<em> が (「私はにんじんが<em>好きです<em>」と「私は<em>にんじんが<em>好きです」のように) 発音の強調によって文の意味が変わる場合に使用するのに対し、 <strong > は (例えば「警告！これはとても危険です」のように) 文の一部に重要性を加えるために使用します。 <strong > と <em> のどちらも入れ子にして、それぞれ相対的な重要度や強調度を高めることができます。
一部、または文章自体を強調したくて内容上の不可欠な部分でなければstrongタグよりもiタグを使う。
i／斜体タグとは何か
HTMLのiタグのiはitalic／イタリック（筆記体に似た斜体）の冒頭の一文字で、通常の文章でイタリック体が相応しい部分を表すために使われる。
i要素は、代わりの声やムードでテキストの範囲を表すか、またはそうでなければ、たとえば分類学上の名称、専門用語、他言語の慣用句、意見、または西洋のテキストで船名など、異なる品質のテキストを示す方法で通常の文からのオフセットを表す。
主テキストと異なる言語の用語はlang属性（または、XMLでXML名前空間のlang属性）で注釈を付けるべきである。
iタグは慣用的なテキストタグとも呼ばれて文字に斜体のデザインを付けることを目的としたものでは基本的にない。
大事なのはiタグはコンテンツの意味付けを変えたり、重要性を与えたりするのではなく、ある部分を他と表記的に識別する目的を持つということだ。
通常の文章でイタリック体が適したものがiタグの対象になる。
ただし本や映画などの作品名に関してはciteタグがあって斜体で表示するので、そうした作品名に関してiタグを使うのは適切ではない。
参考サイト
iタグのマークアップ
<i>コンテンツ</i>iタグを使った表示
コンテンツ
初期のデザインでは文字の見た目は斜体で表示される。
iタグのコンテンツをさらに内外のiタグで囲って入れ子で使われることはない。
iタグの使い方の例
iタグが使われるのは通常の文章でイタリック体が使われるのと変わらない。
- 代わりの声：心の中で思ったことなど。
- ムード：夢の中で起きたことなど。
- 類学上の名称：動物の学名など。
- 専門用語：病気の正式名称など。
- 他言語の慣用句：外国語で良く使われる言葉など。
- 意見：個人の特定の感想など。
- 西洋のテキストで船名：英語の船名など。
例えば「彼は黙って何が起こったんだろうと思った」という文章で、心の中の「何が起こったんだろう」の部分にiタグを使うことができる。
iタグの使い方の注意点
iタグは見た目がemタグと同じで、中身がbタグと似ているからどう使い分けるべきか。
iタグとemタグの違い
強調を表すには <em> 要素を使用してください。
コンテンツの表記を他と変えるのてはなく、内容上の効果を必要とする場合はiタグよりもemタグが適している。
iタグとbタグの違い
<i> 要素は、読みやすくする目的で、文字列を通常の文脈から区別するために使用します。
コンテンツの一部を他と区別するのではなく、注意を引きたい場合にはiタグよりもbタグが適している。
b／太字タグとは何か
HTMLのbタグのbはbold／太字の冒頭の一文字で、コンテンツの閲覧者の注意を引くための部分に使われる。
b要素は、たとえば、文書の概要でのキーワード、レビューでの製品名、対話的なテキスト駆動型ソフトウェアでの使用可能語、または記事リードなど、特別な重要性を伝えることなく、代わりの声やムードの意味合いなしに、実用的な目的に対して描かれている注目すべきテキストの範囲を表す。
bタグは注目付けタグとも呼ばれて太字のデザインを付けることを目的としたものでは基本的にない。
大事なのはbタグはコンテンツの意味付けを変えたり、重要性を与えたりするのではなく、ある部分を他と表記的に識別する目的を持つということだ。
コンテンツの内容に影響せず、iタグが適した斜体を除いて目立たせたいものがbタグの対象になる。
ただし話題の関連性を示すものや閲覧者の行動に繋がるもの（検索された文字など）を示すためにはmarkタグがあって帯文字で表示するけれどもそうしたものに関してbタグを使うのは適切ではない。
参考サイト
bタグのマークアップ
<b>コンテンツ</b>bタグを使った表示
コンテンツ
初期のデザインでは文字の見た目は太字で表示される。
bタグのコンテンツをさらに内外のiタグで囲って入れ子で使われることはない。
bタグの使い方の例
bタグが使われるのはコンテンツの主旨に影響せず、iタグが適した斜体を除いて目立たせたいものが中心だ。
- 文書の概要でのキーワード：扱うものを示す。
- レビューでの製品名：取り上げるものを示す。
- 対話的なテキスト駆動型ソフトウェアでの使用可能語：行うものを示す。
- 記事リード：書き出しを示す。
例えば「本稿のテーマは日本の自然である」という文章で、扱うものの「日本の自然」の部分にbタグを使うことができる。
bタグの使い方の注意点
bタグは見た目がstrong タグと同じで、中身がiタグと似ているからどう使い分けるべきか。
bタグとstrongタグの違い
特別な重要性を持つテキストを示すには <strong> 要素を使用してください。
コンテンツの表記を他と変えるのてはなく、内容上の効果を必要とする場合はbタグよりもstrongタグが適している。
bタグとiタグの違い
<b> は要約に現れるキーワード、レビュー文内での製品名、または、その他の表記上太字で記述される通例のある箇所 (但し、特別な重要性を持たない部分) に使用してください。
コンテンツの一部の注意を引きたいのではなく、他と区別したい場合にはbタグよりもiタグが適している。
四つのタグの纏め
大きく分けるとemとstrongがコンテンツの内容に影響するもの、iとbが見た目だけを変えるものとして共通に捉えられる。
前者は強調と重要性、後者は区別と注目という使い方の違いがある。
iとbは見た目だけを変えるものだけれどもHTMLのバージョン5以降はデザインのためのタグでは全くなくなっている。飽くまでもコンテンツの内容に影響しないかぎりでの表記上の変化を与えるものと考えられている。
完全に見た目だけを特徴付けるためにはデザインのCSSで 、コンテンツに斜体や太字（font-style:obliqueやfont-weight:bold）を指定することが求められる。
人間の閲覧者にとって四つのタグの使い分けは必ずしも有用ではないし、少なくともサイトでの見た目が同じもの同士（emとiかstrongとb）の違いは分からないからどう使っても結果は同じになる。
だから四つのタグの使い分けが本当に問題になるのは機械の読み込みに関してなんだ。
コンピューターの解析を伴うスクリーンリーダーや検索エンジンなどがサイトをどのように認識するかにHTMLのマークアップが大きく関わっている。たとえタグによるサイトの見た目が同じでも中身が少しでも異なれは確実に切り離され得る。実際に対応されるかぎり、別物として把握されるだろう。
四つのタグを的確に使い分けないと機械の読み込みを介してサイトを表示する場合、支障を来す恐れがあるから注意しないには越さない。
コメント