<strong> vs. font-weight:bold&amp; <em> vs. font-style:italic </em> </strong>

时间:2011-02-08 23:42:21

标签: html css

使用<strong><em>代替CSS属性是否有任何实际区别:

font-weight: bold;
font-style: italic;

此外,两种选择存在的真正原因是什么?我可能错了,但在<strong><em>成为标准CSS属性后不久font-weightfont-style出现在现场?如果是这样,他们必须有一些理由。

5 个答案:

答案 0 :(得分:97)

HTML代表意义; CSS代表外观。如何在文档中标记文本不取决于该文本在屏幕上的显示方式,而仅仅取决于它的含义。另一个例子是,默认情况下,其他一些HTML元素(如标题)的样式为font-weight: bold,但使用<h1> - <h6>标记,而不是<strong>或{{1 }}

在HTML5中,您使用<strong>来表示句子的重要部分,例如:

<b>

您使用<em>来表示语言压力,例如:

<p><strong>Do not touch.</strong> Contains <strong>hazardous</strong> materials.

这些元素是默认情况下恰好具有粗体斜体表示的语义元素,但您可以随意设置它们的样式。例如,在上面的<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. 示例中,您可以用大写而不是斜体来表示压力强调,但<em>元素的功能目的保持不变 - 通过强调特定来改变句子的上下文单词或短语比其他人:

<em>

请注意,原始答案(如下)适用于HTML5之前的HTML标准,其中em { font-style: normal; text-transform: uppercase; } <strong>的含义略有不同,<b><i>纯粹是表现形式,没有任何语义含义。与<em><strong>分别相同,它们具有相似的表示默认值,但可能采用不同的样式。


您使用<em><strong>分别表示强调和正常强调。

或者以这种方式考虑:<em>font-weight: bold更接近<b><strong>font-style: italic更接近<i> 。这些视觉风格纯粹是 visual :屏幕阅读器等工具无法理解粗体斜体的含义,但有些屏幕阅读器能够以更强调的语气阅读<em><strong>文字。

答案 1 :(得分:9)

<em>元素 - 来自W3C(HTML5参考)

YES!有明显的区别。

<em>元素表示其内容的重点强调。特定内容的重点程度由其祖先<em>元素的数量给出。

<strong>  =  important content
<em>      =  stress emphasis of its contents

强调的位置改变了句子的含义。因此,该元素构成了内容的组成部分。以这种方式使用强调的确切方式取决于语言。

注意!

  1. <em>元素也不是为了传达重要性;为了那个原因 目的,<strong>元素更合适。

  2. <em>元素不是通用的“斜体”元素。有时,文字 旨在从该段的其余部分中脱颖而出,就好像它一样 以不同的心情语音。为此,i元素更多 合适的。

  3. 参考(示例):See W3C Reference

答案 2 :(得分:7)

问题是语义(如BoltClock提及)和视觉呈现的问题。

最初HTML使用<b><i>用于这些目的,完全是样式命令,在文档标记的语义环境中。 CSS试图尽可能地分离出媒体的文体元素。因此,粗体和斜体等样式信息应该放在CSS中。

引入了

<strong><em>来填充文本的语义需求,以便将其标记为更重要或更重要。它们具有类似于粗体斜体的默认风格解释,但它们并不受那种命运的约束。

答案 3 :(得分:4)

<strong><em>是语义标记元素,例如:机器(搜索引擎机器人,屏幕阅读器)可能能够理解 a {{1元素比其他元素更重要。

CSS样式是您为人类可视化它们的方式,通常用粗体或斜体文本。

维基百科上的

Separation of presentation and content

答案 4 :(得分:1)

<strong><em> - 与<b><i>不同 - 对盲人的网络浏览器有明确的目的。

盲人不会在视觉上浏览网页,而是通过文本阅读器等声音浏览网页。 <strong><em>,除了鼓励大胆或斜体的内容外,还分别传达响度或强调音节(OH MY!&amp; Ooooooh Myyyyyyy!)。纯音频浏览器在<b><i>时无法预测...它们可能会使它们变得吵闹或者压力很大或者它们可能不会......除非你使用{{1 }和<strong>