Html <strong> vs. font-weight:bold & <em> vs. font-style:italic
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4939807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<strong> vs. font-weight:bold & <em> vs. font-style:italic
提问by Jake Wilson
Is there any real difference between using <strong>and <em>instead of the CSS properties:
使用<strong>和<em>代替 CSS 属性之间有什么真正的区别：
font-weight: bold;
font-style: italic;
Also, what is really the reason that both options exist? I could be wrong but didn't <strong>and <em>came on the scene quite a while after font-weightand font-stylebecame standard CSS properties? If so, there must be some reason for them.
另外，这两种选择存在的真正原因是什么？我可能是错的，但没有出现<strong>并<em>在很长一段时间后出现font-weight并font-style成为标准的 CSS 属性？如果是这样，他们一定有什么原因。
回答by BoltClock
HTML represents meaning; CSS represents appearance. How you mark up text in a document is not determined by how that text appears on screen, but simply what it means. As another example, some other HTML elements, like headings, are styled font-weight: boldby default, but they are marked up using <h1>–<h6>, not <strong>or <b>.
HTML 代表意义；CSS 代表外观。您如何标记文档中的文本并不取决于该文本在屏幕上的显示方式，而取决于它的含义。再举一个例子，一些其他的 HTML 元素，比如标题，font-weight: bold默认情况下是样式化的，但它们使用<h1>– <h6>、 not<strong>或进行标记<b>。
In HTML5, you use <strong>to indicate important parts of a sentence, for example:
在 HTML5 中，您<strong>用来表示句子的重要部分，例如：
<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.
And you use <em>to indicate linguistic stress, for example:
你<em>用来表示语言压力，例如：
<p>A Gentleman: I suppose he does. But there's no point in asking.
<p>A Lady: Why not?
<p>A Gentleman: Because he doesn't row.
<p>A Lady: He doesn't <em>row</em>?
<p>A Gentleman: No. He <em>doesn't</em> row.
<p>A Lady: Ah. I see what you mean.
These elements are semantic elements that just happen to have boldand italicrepresentations by default, but you can style them however you like. For example, in the <em>sample above, you could represent stress emphasis in uppercase instead of italics, but the functional purpose of the <em>element remains the same — to change the context of a sentence by emphasizing specific words or phrases over others:
这些元素是语义元素，默认情况下恰好具有粗体和斜体表示，但您可以随意设置它们的样式。例如，在<em>上面的示例中，您可以用大写而不是斜体来表示重音强调，但<em>元素的功能目的保持不变——通过强调特定单词或短语而不是其他词或短语来改变句子的上下文：
em {
font-style: normal;
text-transform: uppercase;
}
Note that the original answer (below) applied to HTML standards prior to HTML5, in which <strong>and <em>had somewhat different meanings, <b>and <i>were purely presentational and had no semantic meaning whatsoever. Like <strong>and <em>respectively, they have similar presentational defaults but may be styled differently.
请注意，原始答案（如下）适用于 HTML5 之前的 HTML 标准，其中<strong>和<em>具有一些不同的含义，<b>并且<i>纯粹是展示性的，没有任何语义含义。像<strong>和<em>分别地，它们具有相似的显示默认值，但可能具有不同的样式。
You use <strong>and <em>to indicate intense emphasis and normal emphasis respectively.
使用<strong>和<em>分别表示强烈强调和正常强调。
Or think of it this way: font-weight: boldis closer to <b>than <strong>, and font-style: italicis closer to <i>than <em>. These visual styles are purely visual: tools like screen readers aren't going to understand what boldand italicmean, but some screen readers are able to read <strong>and <em>text in a more emphasized tone.
或者认为它是这样的：font-weight: bold更接近<b>比<strong>，并且font-style: italic更接近<i>比<em>。这些视觉风格是纯粹的视觉：像屏幕阅读器工具都不会明白什么大胆和斜体的意思，但有些屏幕阅读器能够读取<strong>并<em>更强调语气的文字。
回答by Alex
The <em>element - from W3C (HTML5 reference)
的<em>元件-从W3C（HTML5参考）
YES! There is a clear difference.
是的！有一个明显的区别。
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.
该<em>元素代表其内容的强调重点。特定内容的重点级别由其祖先<em>元素的数量给出。
<strong> = important content
<em> = stress emphasis of its contents
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.
强调的位置改变了句子的意思。因此，该元素形成了内容的组成部分。以这种方式使用强调的确切方式取决于语言。
Note!
笔记！
The
<em>element also isnt intended to convey importance; for that purpose, the<strong>element is more appropriate.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 moodor voice. For this, theielement is more appropriate.
该
<em>元素也不是为了传达重要性；为此，该<strong>元素更合适。该
<em>元素不是通用的“斜体”元素。有时，文本旨在从段落的其余部分中脱颖而出，就好像它处于不同的情绪或声音中。为此，i元素更合适。
Reference (examples): See W3C Reference
参考（示例）：参见 W3C 参考
回答by Orbling
The problem is an issue of semantic meaning (as BoltClock mentions) and visual rendering.
问题是语义（如 BoltClock 提到的）和视觉渲染的问题。
Originally HTML used <b>and <i>for these purposes, entirely stylistic commands, laid down in the semantic environment of the document markup. CSS is an attempt to separate out as far as possible the stylistic elements of the medium. Thus style information such as bold and italics should go in CSS.
最初使用 HTML<b>并且<i>出于这些目的，完全是风格命令，在文档标记的语义环境中制定。CSS 试图尽可能地分离出媒体的风格元素。因此，粗体和斜体等样式信息应该放在 CSS 中。
<strong>and <em>were introduced to fill the semantic need for text to be marked as more important or stressed. They have default stylistic interpretations akin to boldand italic, but they are not bound to that fate.
<strong>并<em>引入填补了语义需要文本标记为重要或强调。它们具有类似于粗体和斜体的默认风格解释，但它们不受这种命运的约束。
回答by achairapart
<strong>and <em>are semantic markup elements, ex: a machine (a search engine bot, a screen reader) may be able to understandthat a strongelement is more important than other elements.
<strong>和<em>是语义标记元素，例如：机器（搜索引擎机器人、屏幕阅读器）可能能够理解某个strong元素比其他元素更重要。
CSS styles are the way you visualizethem for humans, conventionally in bold or italic text.
CSS 样式是您为人类可视化它们的方式，通常以粗体或斜体文本显示。
Separation of presentation and contenton Wikipedia
维基百科上的展示和内容分离
回答by liljoshu
<strong>and <em>- unlike <b>and <i>- have clear purpose for web browsers for the blind.
<strong>和<em>- 与<b>和<i>- 对盲人的网络浏览器有明确的目的。
A blind person doesn't browse the web visually, but by sound such as text readers. <strong>and <em>, in addition to encouraging something to be bold or italic, also convey loudness or stressing syllables respectively (OH MY! & Ooooooh Myyyyyyy!). Audio-only browsers are unpredictable when it comes to <b>and <i>... they may make them loud or stress them or they may not... you never can be sure unless you use <strong>and <em>.
盲人不是通过视觉浏览网页，而是通过声音（例如文本阅读器）浏览网页。<strong>并且<em>，除了鼓励某些事物使用粗体或斜体外，还分别传达响度或重音音节（OH MY！＆Ooooooh Myyyyyyy！）。仅音频浏览器在涉及<b>和时是不可预测的<i>......它们可能会使它们大声或给它们带来压力，或者它们可能不会......除非您使用<strong>和，否则您永远无法确定<em>。
