web-dev-qa-db-ja.com

<b>と<strong>、<i>と<em>の違いは何ですか?

HTML/XHTMLにおける<b><strong><i><em>の違いは何ですか?いつ使うべきですか?

708
Philip Morton

これらは通常のWebブラウザーレンダリングエンジンに同じ効果を持っていますが、基本的な違いがあります。

著者が にディスカッションリストの投稿 を書くと:

3つの異なる状況を考えてください。

  • ウェブブラウザ
  • 盲目の人々
  • 携帯電話

「太字」はスタイルです-「単語を太字にする」を言うとき、人々は基本的に、それが文字の周りでより目立つまで、文字の周りに「インク」を追加することを意味することを知っています。

残念ながら、それは盲人にとっては何の意味もありません。携帯電話やその他のPDAでは、画面の解像度が非常に小さいため、テキストは既に太字になっています。何かを台無しにせずに太字を太字にすることはできません。

<b>はスタイルです-「太字」がどのように見えるかを知っています。

<strong>ただし何かを理解する方法を示すものです。 「強い」とは、ブラウザで「太字」を意味する可能性があります(多くの場合、そうします)が、ジョーズ(目の不自由な人向け)のような話しているプログラムの音を低くしたり、下線で表すこともできます(太字はできないため)太字)Palm Pilot。

HTMLはスタイルに関するものではありませんでした。 いくつかの検索"Tim Berners-Lee" および"セマンティックウェブ。"<strong>はセマンティックです。周囲のテキストを記述します(たとえば、"thisテキストは、表示するテキストの残りの部分よりも強くする必要があります "how囲むテキスト表示する必要があります(たとえば、"このテキストは太字にする必要があります ")。

990
splattne

<b><i>は明示的です - それらはそれぞれ太字と斜体を指定します。

<strong><em>は意味的です - それらは囲まれたテキストが何らかの方法で「強い」または「強調」されるべきであることを指定します。したがって、これらは現代のWebページでは好まれています。

210
Tony Andrews

<strong><em>はあなたの文書に特別な意味を追加します。それは彼らがまたあなたのテキストに大胆でイタリック体のスタイルを与えるのと同じように起こります。

もちろん、CSSを使ってスタイルを変更することもできます。

一方、<b><i>はフォントスタイルを適用するだけなので、今後は使用しないでください。 (あなたがCSSでフォーマットすることになっていて、そしてテキストが実際に重要であるならば、あなたはおそらくそれをとにかく「強い」か「強調」するでしょう!)

それが理にかなっていることを願っています。

23
James

<strong><em>はより意味的に正しいのはもちろんですが、顧客作成コンテンツに<b><i>タグを使用する明確な正当な理由があるようです。

そのようなコンテンツでは、単語または句は太字または斜体であるかもしれません、そして、そのような太字または斜体のための意味論的推論を分析することは一般的に私たち次第ではありません。

さらに、そのような内容は、特定の意味を伝えるために太字のイタリック体の単語および句を指すことがある。

例としては、太字の単語を置き換えるように生徒に指示する英語の試験問題があります。

8
mwiik

<b><i>はどちらもスタイルに関連していますが、<em><strong>はセマンティックです。 HTML 4では最初のものは フォントスタイル要素 として分類され、後者は 句要素 として分類されます。

あなたが正しく示したように、ブラウザはしばしばイタリック体で両方をレンダリングするので、<i><em>はしばしば似ていると考えられます。しかし仕様によると、<em> は強調 を表し、<strong> はより強い強調 を表します。一方、<i><b>のどちらを使用するかの区別は、実際にはスタイルの問題です。

7
Kariem

ここに定義のまとめと推奨される用法があります。

<b> ...実用的な目的のために特別な重要性を伝えることなく、また代替的な発言や気分を暗示することなく、 キーワード 文書要約内 製品名)のような注意が向けられているテキストの範囲 レビューでは、 実用的な言葉 インタラクティブなテキスト駆動型ソフトウェアでは、または 記事lede

<strong> ...は、今では強い強調ではなく重要度を表しています。

<i> ...代替の音声またはムードのテキストの範囲、またはテキストの品質が異なることを示す方法で通常の散文からオフセットされている、分類名の指定専門用語、西洋のテキストでは、別の言語の慣用句thought、または船名

<em> ...は強調を示します。

(これらはすべて、W3Cのソースからの直接の引用であり、私の強調を加えたものです。 https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements および http:/を参照してください。 /www.w3.org/TR/html401/struct/text.html#h-9.2.1 オリジナルの場合)

7
Rick Westera

他の人が述べているように、違いは<b><i>のハードコードフォントスタイルですが、<strong><em>はセマンティックの意味を決定し、フォントスタイル(またはブラウザイントネーション、または何を持っているか)はテキストの時点で決定されます。レンダリングされている(または話されている)。

あなたがそうするならば、あなたはこれを“物理的な”フォントスタイルと“論理的な”スタイルの違いと考えることができます。後で、スタイルシートのプロパティを変更して色やサイズの変更を追加したり、完全に異なるフォントを使用したりするなどして、<strong>および<em>テキストの表示方法を変更したい場合があります。ハードコードされた「物理的」マークアップの代わりに「論理的」マークアップを使用した場合は、スタイルシートの1か所で表示プロパティを変更してから、 そのスタイルシートを参照するすべてのページを変更できます。自動的に変更されます 、編集する必要なしに。

かなり滑らかですね。

これは、段落、表のセル、ヘッダーテキスト、キャプションなどのサブスタイル(テキストタグのstyle=プロパティを使用して参照される)の定義、および<div>タグの使用の背後にある理論的根拠です。スタイルシートで論理スタイルの物理的表現を定義することができ、変更はそのスタイルシートを参照するWebページに自動的に反映されます。ソースコードに別の表現をしたいですか?あなたの "コード"スタイルのフォント、サイズ、太さ、間隔などを再定義します。

あなたがXHTMLを使うなら、あなたはあなた自身の意味タグを定義することさえできます、そしてあなたのスタイルシートはあなたのために物理的なフォントスタイルとレイアウトへの変換をするでしょう。

3
Chris BeHanna

他の人が言っているように、<b>と<i>は明示的(すなわち「このテキストを太字にする」)であるのに対し、<strong>と<em>は意味的(すなわち「このテキストは強調されるべき」).

最近のWebブラウザの文脈では、違いを見るのは難しいですが(どちらも同じ結果になるようです)、視覚障害者用のスクリーンリーダーについて考えてみてください。スクリーンリーダーが<i>タグを見つけた場合、どうすればよいのかわかりません。しかし、それが<em>タグに遭遇した場合、その中にあるものすべてがリスナーに強調されるべきであることを知っています。そしてそこにあなたは実用的な違いを得る。

3
JamShady

CSSスタイルクラスの使用が何らかの理由で不快または不可能な場合にのみ使用してください(ブログシステムのように、投稿および最終的に埋め込みスタイルで使用できるタグは一部のみに限定)。もう1つの理由は、非常に古いブラウザ(一部のモバイルデバイス)や原始的な検索エンジン(CSSスタイルを分析する代わりに、<b>タグまたは<strong>タグを使用すること)をサポートすることです。

CSSスタイルを定義できる場合はそれを使用してください。

2
Danubian Sailor

HTMLフォーマット要素:

HTMLでは、特別な意味を持つテキストを定義するための特別な要素も定義されています。 HTMLは、太字や斜体のテキストのように、出力のフォーマットにはのような要素を使用します。

HTMLの太字と厳密な書式:

HTML要素は、特に重要なことなく太字のテキストを定義します。

<b>This text is bold</b>

HTML 要素は強力なテキストを定義し、セマンティックな「強力な」重要性を追加します。

<strong>This text is strong</strong>

HTMLイタリック体および強調表示された書式:

HTML要素はイタリック体のテキストを定義していますが、それ以上の重要性はありません。

<i>This text is italic</i>

HTML要素は、セマンティックの重要性を追加して、強調テキストを定義します。

<em>This text is emphasized</em>
2
Muhammad Awais

<em><strong>は、<i><b>よりも多くの帯域幅を消費します。

それらはまたより多くのタイピングを必要とします(自動生成されていない場合)。

彼らはまた、より多くのテキストでエディタ画面を雑然とさせます。プログラマーは、同じものであれば、より小さなソースファイルを好むことを思い出します。 (そして、現実にしましょう、それらは同じです。はい、「技術的」なものがあります(<i></i>、ああ、違いはすみませんが、それはまず第一に偽物です。

上記のタグのいずれかを使用して、スタイルシートを使用してそれらの外観をカスタマイズできますが、デフォルトのレンダリングとは異なる外観にする必要がある場合は必要です。

2
Thomas Eding

i、b、em、および強力なタグは、伝統的に表現的なものです。しかし、それらはhtml5新しい意味が与えられています。

html4では、フォントスタイルにibが使用されていました。イタリック体の場合はi、太字の場合はbを使用しました。 HTML5では。 i tagは新しい意味的な意味 '代替音声または気分'を持ち、b tagは文体的にオフセットの意味を持ちます。

iタグの使用例としては、分類名、技術用語、他の言語の慣用句、翻字、思想、西洋テキストでの船名などがあります。といった -

<p><i>I hope this works</i>, he thought.</p>

bタグの使用例は、文書の抜粋のキーワード、レビューの商品名、インタラクティブテキスト駆動ソフトウェアの実用的な単語、記事の先頭にあります。

次の例の段落は、それに続く段落からスタイル的にオフセットされています。

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

html4ではemstrongは強調と強調を意味していました4。しかしhtml5ではem強調を強調を意味し、強い強い重要性を意味します。

次の例では、単語beforeを読んでいる間に言語の変更があるはずです...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

同じ例で、以下のようにstrongタグを使用できます。

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

開催日を重視します。

MDN参照:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

1
adnan2nd

私は<strong>と<b>の両方を使用していますが、実際にはこの一連の回答で述べられている理由からです。単純に に見える - のように太字になっているテキストもありますが、必ずしも文章の残りの部分よりも意味的に重要というわけではありません。これは私が今取り組んでいるページの例です。

「<b>ラクロス</b>に関する<strong>すべて</strong>の本を検索します。」

その文では、 "all"という単語は非常に重要であり、 "lacrosse"という単語はそれほど重要ではありません。スクリーンリーダーでページを閲覧しているのであれば、「ラクロス」という言葉を強調するために邪魔にならないようにする必要はありません。

私はほとんどのWeb開発者が他のWeb開発者の一方を使用すると想像する傾向がありますが、どちらも問題ありません。私にとっては、視覚的な魅力と意味の間のほんのわずかな線です。

1
Justin Blum

<b><i>はテキストのスタイルを記述しているので避けるべきです。代わりに<strong><em>を使用してください。テキストの意味(意味)を説明しているからです。

HTMLのすべてのものと同様に、あなたはそれを look にしたいのではなく、実際に mean にしたいと考えるべきではありません。確かに、それはあなたにとって大胆で斜体ではないかもしれませんが、スクリーンリーダーにとってはそうではありません。

1
nickf

「同じ効果があります。ただし、HTMLのよりクリーンで新しいバージョンであるXHTMLでは、<strong>タグを使用することをお勧めします。読みやすく、意味が明確であるため、強いほうが良いです。さらに、<strong>は意味を示します。テキストは強く - 太字で<b>はメソッドを伝える - テキストを太字にする。テキストスタイルを強くする方法を変更するためにCSSスタイルシートを使うなら、あなたのコードはまだ意味があります。

<i><em>の違いも同じです。

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

1
Antonio Louro

b または i は、テキストを太字または斜体で表示することを意味します。 strong または em は、ユーザーが「重要」として理解できるようにテキストをレンダリングすることを意味します。デフォルトでは、太字で強調し、斜体で強調します。ただし、他の文化では異なるマッピングを使用する場合があります。

プログラム内の文字列と同様に、 b および i は「ハードコーディング」され、 strong および em は「ローカライズ」されます。

1

<b><i>は避けてください。それらはページを「レイアウトする」ために導入され(その間に削除されたfontタグのように)、レイアウトはHTMLで行われるべきものではなく、CSSで行われるべきです(HTM == Structure、CSS == Layout)。これらのタグは将来的には消滅するかもしれません、結局あなたはテキストを太字/斜体にするためにCSSとspanタグを使うことができるだけです。

一方、<em><strong>は、何かが「強調されている」または「強く強調されている」と言っているだけで、それをレンダリングする方法を兄弟に完全に公開したままにします。ほとんどのブラウザはイタリックで太字で表示されますが、それを強要されるわけではありません(異なる色、フォントサイズ、フォントなどを使用する場合があります)。あなたが望むように振る舞いを変えるのにCSSを使うことができます。あなたが好きならあなたはemを大胆にすることができます。

0
Mecki