不推荐使用的代码:<b> vs style =“font-weight:bold;”</b>

时间:2013-09-23 17:42:53

标签: html css

我总是使用<b>标记来加粗一些东西,因为这是我很久以前教过它的方式。但是现在我的IDE总是告诉我<b>已被弃用并使用css样式。假设他们希望我使用<div style="font-weight:bold;">Bold Text</div>。我的IDE给我的这条消息有多重要?我应该返回并将所有<b>更改为样式吗?

以下是两种情况的示例。有人可以解释两者之间的区别以及为什么<b>现在已被弃用了吗?

<b>Bold Text</b>

Vs以上。

<div style="font-weight:bold;">Bold Text</div>

<b>会更好吗,因为如果有人在浏览器上关闭了css,它仍会正常显示?

5 个答案:

答案 0 :(得分:17)

正确的问题是:“什么标记最能描述我的内容?”

让我们从<b>标记开始(已弃用):

  

b元素表示要在风格上偏移的文本范围   来自普通散文而没有传达任何额外的重要性,例如   文档摘要中的关键词,评论中的产品名称或其他   文本的跨度,其典型的印刷表现是加粗的。

     

...

     

如果有更具描述性的标签,则不应使用b和i标签   相关标签可用。如果你确实使用它们,通常会更好   添加描述标记意图含义的类属性,   这样你就可以区分一种用途。

     

...

     

将b或i元素视为一个span元素可能会有所帮助   具有自动后备造型。就像一个span元素,这些   如果它们有用,那么元素通常会从类名中受益。

http://www.w3.org/International/questions/qa-b-and-i-tags

相比之下,<strong>有更具体的目的:

  

强元素代表一系列具有重要意义的文本。

http://www.w3.org/TR/html-markup/strong.html

例如:

<p><strong>Warning.</strong> Here be dragons.</p>

这里我们强调“警告”这个词来强调它的重要性。

但不是:

<p><strong>Item 1:</strong> Foo, bar, and baz.</p>

“第1项”并不意味着要强调,因此<strong>是错误的标签。此外,整个结构可能更好地代表。

如果文字的含义非常重要,<strong>是合适的(就像这一行一样)。

也许你只是想要一个更粗的字体用于样式目的,文字没有特别的意义。在这种情况下,<strong><b>都不合适。

<span class="product-name">Hello World</span>

.product-name { font-weight: bold; }

在所有情况下:

  • 使用描述内容的标记。
  • 不要使用内联样式(使用外部样式表)。
  • 不要根据视觉表示来命名样式(例如,命名样式“粗体”是一个不好的选择)
  

<b>会更好吗,因为如果有人关闭了css   浏览器,它仍然会正确显示?

没有。为作业使用正确的标记。使用您网站的可视化表示的人自愿禁用样式表是相当不寻常的,但非视觉消费者主要关心文档的结构。 “非可视消费者”可以是解析您的内容或屏幕阅读器应用程序的搜索引擎。

补充阅读:

答案 1 :(得分:5)

您应该使用<strong>代替<b>。如果特定的文本组总是以粗体显示,并且您没有(或不能)出于某种原因想要使用text-weight: bold,则可以在单独的工作表中使用样式(<strong>) 。但是如果你已经将其他样式应用于同一个元素,我只会走那条路。

答案 2 :(得分:3)

如果代码仍然有效,那就不是“至关重要”。虽然它符合当前的标准,这将使代码有更长的未来。

不同之处在于使用CSS会将样式与内容分开。 <b>是一种风格,仅此而已。它将标记与该风格紧密结合在一起。分离允许您以其他方式强调标记,而不是始终使用粗体字。

  

会更好,因为如果有人在浏览器上关闭了css,它仍会正确显示?

不,因为如果用户想要禁用样式,那么您的<b>标记会破坏它,因为它将样式与内容混合在一起。

答案 3 :(得分:1)

如果您在谈论SEO

使用<strong>也应 SEO友好 ... (专注于关键字)

并且很重要!

答案 4 :(得分:0)

我发现使用<strong></strong>比使用<b>或内联样式更好。