在 HTML5 中,可以在 em 标签中使用强标签吗?

Posted

技术标签:

【中文标题】在 HTML5 中,可以在 em 标签中使用强标签吗?【英文标题】:In HTML5, is it ok to use a strong tag within an em tag? 【发布时间】:2012-04-01 22:00:41 【问题描述】:

我目前正在将一些用户警报标记如下

<em>You are in danger of exceeding your <strong>40GB</strong> download limit</em>

我发现other answers 表明,虽然 html 是有效的,但它在语义上是无效的。但是在所有情况下都嵌套 em/strong 标签真的不行吗?上面的例子在我看来是一个完全合理的用法——特别强调已经强调的内容的一个小节。但是屏幕阅读器可以将其解释为应被解释的内容,还是会使他们感到困惑?

【问题讨论】:

只需阅读针对该问题提供的答案即可? @EvilP 但是这些答案是针对&lt;strong&gt;&lt;em&gt; 包装整个文本的问题,这显然是可疑的用法,而我的示例是一个更合理的用例。如果我认为这些答案回答了我的问题,我就不会问这个了。 不幸的是,&lt;em&gt;&lt;strong&gt; 的语义在 HTML5 中从 HTML4 发生了变化,这可能会影响对您问题的回答。如果您对 HTML5 感兴趣,我特别建议您阅读&lt;em&gt; 的新定义:dev.w3.org/html5/spec/the-em-element.html 我的直觉是这里的&lt;strong&gt; 不是用来提供额外强调的。当你大声说出来时,你不会在“40GB”时提高你的声音。所以在这种情况下,你不应该使用它。一个有效的用法是像&lt;em&gt;You're in &lt;strong&gt;big&lt;/strong&gt; trouble!&lt;/em&gt; 这样的东西。而且我不认为 HTML4 和 HTML5 有 不同。 @Alohci - 虽然其他人给出了更适合我的用例的答案,但您的评论是我认为对我实际提出的问题的更明确的答案,所以如果您想将其重新发布为答案我很乐意接受它 【参考方案1】:

就 HTML 而言,可以在 &lt;em&gt; 中使用 &lt;strong&gt;。但是,在您问题的特定语义范围内,这不是最佳选择。

有人回答提倡使用&lt;b&gt;,并很好地解释了为什么它是合适的,并用link to the specs 来支持它。

b 元素表示正在关注的文本范围 出于实用目的而绘制,没有传达任何额外的重要性 并且没有其他声音或情绪的暗示,例如键 文档摘要中的单词,评论中的产品名称,可操作 交互式文本驱动软件中的单词,或文章导读。

但后来他们出于某种原因删除了答案。如果他们想重新发布他们的答案,我会很乐意投票并标记为答案。

此外,对于您确实希望更加强调已强调段落的小节的情况,@Alohci 上面的评论指出,在 html5 中嵌套 &lt;em&gt; 标签是允许的

不幸的是,&lt;em&gt;&lt;strong&gt; 的语义在 HTML5 来自 HTML4,这可能会影响您问题的答案。如果 如果您对 HTML5 感兴趣,我特别建议您阅读 &lt;em&gt; 的新定义在这里: http://dev.w3.org/html5/spec/the-em-element.html

【讨论】:

【参考方案2】:

是的,在您发布的情况下没问题,因为“强”部分并未包含整个文本。它挑选出文本的特定部分。

类似的问题:

<em><strong>something</strong></em>

是它,实际上,它被用来制作粗体和斜体。在语义上,&lt;strong&gt; 覆盖 &lt;em&gt;,使后者无关紧要。但是,在您的示例中,整个事物都有&lt;em&gt;,并且只有一部分也有&lt;strong&gt;

另一种解释方式是尝试大声朗读。你能给予一些强调和力量吗?你能分辨出强调说某事强调强调某事之间的区别吗?不可以。不过,你可以说一些重点,在中间说一些更强烈的话。

【讨论】:

【参考方案3】:

这个问题几乎是纯理论的,唯一实际的方面是:你是否在一个社区工作,其他作者对标签的“语义”有某些想法?在这种情况下,重要的是这个社区的想法,而不是不同 HTML5 草案中的不同表述。

也就是说,除了遵守一些公认的编码风格之外,这并不重要。在实践中,重要的是默认渲染是斜体或斜体em,粗体为strong,通过嵌套它们你会得到粗斜体。就像使用 ib 一样。

屏幕阅读器通常会忽略这些类型的标记。以任何通常使用的阅读速度提高单个单词的声音或从女性声音变为男性声音都太令人不安了。但如果屏幕阅读器以某种方式对这个标记做出反应,他们可以以不同的方式做到这一点,而且他们几乎不会尝试做出任何细粒度的差异。

CSS 2.1 规范中的 sample style sheet with aural features 只是粗略的,最多是暗示性的,但可能有一些相关性的是,它使用相同的音高,但对strong(和b)使用了更高的压力和丰富度) 而不是 em (和 i) 并且它没有规则嵌套很重要。也就是说,根据它,strong 将被渲染为相同,而不管它是否在 em 内部。

【讨论】:

【参考方案4】:

你正在做的很好。您可以嵌套标签,只要它们嵌套正确。 这是有效的:

<em>You are in danger of exceeding your <strong>40GB</strong> download limit</em>

这不是:

<em>You are in danger of exceeding your <strong>40GB</em></strong> download limit

至于语义,您是在告诉浏览器您的某些文本应该既强又强调。这在视觉上意味着什么取决于浏览器的实现。强调通常以斜体呈现,其中strong将是粗体

【讨论】:

-1 你不是在告诉浏览器它应该是粗体还是斜体——你是在告诉它它应该显示得更强烈或更强调。屏幕阅读器(也是浏览器)如何用斜体说话? 我的房间里有一张大海报,上面写着“主啊,请帮助我闭上我的大嘴,直到我知道我在说什么。”我可能应该更频繁地查看它。

以上是关于在 HTML5 中,可以在 em 标签中使用强标签吗?的主要内容,如果未能解决你的问题,请参考以下文章

html5学习系列之cd标签

html5里面新增的用于网页布局的标签都有哪些

html 中span标签里面都能放那些标签??

标签语义化对 SEO 来说有多重要

b与strong ,i与em的区别

如何在HTML5中使用SVG