什么是正确的HTML标签来强调句子或部分?

时间:2018-04-30 08:19:22

标签: html semantic-markup

我意识到我在整个HTML中使用blockquote来强调我的学生必须学习的段落 - 这显然是错误的,因为blockquote旨在指定引用的部分来自其他来源。

在我的情况下(数学),段落定义或描述一个单词,并且应该在视觉上突出。

经过一些研究后,我发现em tag标记了重点强调的文字"但是,它似乎是为单个单词或一组单词设计的,但不是段落。

所以问题是:正确的HTML标记是什么来强调一个完整的句子或一个部分(几个段落)?

4 个答案:

答案 0 :(得分:1)

从语义上讲,如果您正在定义某些内容 - 并且如果符合文档的结构 - 那么您应该查看<dl>:定义列表。

MDN有一个页面,可以解释您需要知道的内容:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

<dl>内,您有<dt>(定义术语)和<dd>(定义说明)。 <dd>是块级的,因此可以包含块级元素,例如段落和列表,但<dt>是内联的,并且应该只包含其他内联元素。如果你真的保持接近规则:)

示例:

<dl>
  <dt>Stack Overflow</dt>
  <dd>
    A place that holds many answers, some of which are <em>mostly</em> correct.
  </dd>
</dl>

默认情况下,大多数浏览器都会对定义列表应用一些缩进,但这就是所有您在样式方面都是开箱即用的。您需要应用自己的样式规则才能使它们更加突出,但作为定义列表的一部分,您获得的各种标签应该可以帮助您。

围绕屏幕阅读器用户的定义列表的可访问性进行了一些讨论,不同的浏览器和阅读器产生了不同的结果(参见https://webaim.org/discussion/mail_thread?thread=7089)。这不是最优的,但似乎使用定义列表并不比使用无序列表(<ul>)更糟糕;不是一个理想的解决方案(因为一个人并不存在),但不是最糟糕的选择。

答案 1 :(得分:1)

dfn元素

如果内容很重要因为它是一个定义(并且所有定义在您的文档中都很重要),您可以使用dfn element并相应地设置父元素的样式。

<p class="definition">definition of the <dfn>term</dfn></p>

最近的祖先p(或lisectiondl中的术语描述组)必须定义该术语。

因此,如果您有多个段落(如下一个示例所示),则没有dfn后代的段落在语义上与术语/定义无关。

<div class="definition">
  <p>paragraph about the term</p> <!-- semantically not part of the definition -->
  <p>definition of the <dfn>term</dfn></p>
  <p>another paragraph about the term</p> <!-- semantically not part of the definition -->
</div>

如果定义包含多个段落,您可以使用sectiondl来表示所有这些段落都包含定义,但这两个段落并不总是合适。

strong元素

如果内容因其他原因而很重要(例如,并非每个定义都很重要,或者定义以外的其他内容也很重要),您可以使用strong element。它传达了

  

其内容的重要性,严肃性或紧迫性。

您甚至可以通过使用更多strong元素来传达相对重要性级别:

<p>sentence with an <strong>important part</strong></p>

<p>sentence with a <strong><strong>very important part</strong></strong></p>

<p><strong>important sentence with an <strong>especially important part</strong></strong></p>

由于strong元素只能包含短语内容,因此您无法使用一个strong元素标记多个段落。

如果内容因其他原因很重要,但恰好包含定义,则当然应合并dfnstrong。即使每个定义都很重要,您仍然可以使用strong,或者传达定义在本文档中很重要,或者传达它们的相对重要性。

答案 2 :(得分:0)

有一组DOM元素旨在强调HTML内容:

  • B'/ LI>
  • EM
  • I
  • 德尔

然而,虽然在语义上,这将表明强调,没有屏幕阅读器(JAWS,Window Eyes等)将表明如此。

答案 3 :(得分:0)

我会使用强力标签。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

  

元素用于“非常重要”的内容,包括严肃或紧迫的内容(例如警告)。这可能是一个对整个页面非常重要的句子,或者您只能指出某些单词与附近内容相比更重要。