html – 不推荐使用的代码:vs style =“font-weight:bold;”

我一直用< b>标记为大胆的东西,因为这是我很久以前被教导的方式.但现在我的IDE总是告诉我< b>已弃用并使用css样式.假设他们希望我使用< div style =“font-weight:bold;”>粗体文字< / div>.我的IDE给我的这条消息有多重要?我应该回去改变我所有的< b>风格?

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

<b>Bold Text</b>

比.

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

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

解决方法

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

让我们从< b>开始吧标签(不推荐使用):

The b element represents a span of text to be stylistically offset
from the normal prose without conveying any extra importance,such as
key words in a document abstract,product names in a review,or other
spans of text whose typical typographic presentation is boldened.

You should not use b and i tags if there is a more descriptive and
relevant tag available. If you do use them,it is usually better to
add class attributes that describe the intended meaning of the markup,
so that you can distinguish one use from another.

It may help to think of b or i elements as essentially a span element
with an automatic fallback styling. Just like a span element,these
elements usually benefit from class names if they are to be useful.

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

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

The strong element represents a span of text with strong importance.

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; }

在所有情况下:

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

Would <b> be better because if someone has css turned off on the
browser,it would still be show correctly?

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

补充阅读:

> http://www.w3.org/TR/html51/text-level-semantics.html#the-strong-element
> http://www.w3.org/TR/html51/text-level-semantics.html#the-b-element

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些