What is the correct HTML tag to emphasize a senten

2019-07-18 05:16发布

问题:

I realized that I was using blockquote throughout my HTML to emphasize paragraphs that have to be learned by my students – which is obviously wrong, since the blockquote is meant to specify a section that is quoted from another source.

In my case (mathematics), the paragraph(s) define(s) or describe(s) a word and should stand out visually.

After some research, I found the em tag which "marks text that has stress emphasis", however, it seems to be designed for single words or a group of words, but not for paragraphs.

So the question is: What is the correct HTML tag to emphasize a complete sentence or a section (several paragraphs)?

回答1:

Semantically, if you're defining something - and if fits with the structure of your document - you should look at <dl>: definition lists.

MDN has a page which explaiins what you need to know: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl

Within a <dl>, you have <dt> (definition term) and <dd>(definition description). <dd> is block-level, so can contain block-level elements such as paragraphs and lists, but <dt> is inline and should only contain other inline elements. If you're really keeping close to the rules :)

Example:

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

Most browsers will apply some indenting to definition lists by default, but that's about all you'll get out of the box in terms of styling. You'll need to apply your own styling rules to make them stand out more, but the variety of tags you get as part of a definition list should help you with that.

There's some discussion around the accessibility of definition lists for screen reader users, with different browsers and readers producing different results (see https://webaim.org/discussion/mail_thread?thread=7089). This isn't optimal, but it seems that using definition lists isn't any worse than using unordered lists (<ul>); not an ideal solution (because one doesn't really exist), but not the worst option.



回答2:

dfn element

If the content is important because it’s a definition (and all definitions are important in your document), you can use the dfn element and style the parent element accordingly.

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

The nearest ancestor p (or li, or section, or term-description group in a dl) has to define the term.

So if you have multiple paragraphs (like in the next example), the paragraphs without the dfn descendant are not semantically connected to the term/definition.

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

If the definition consists of multiple paragraphs, you can either use section or dl to convey that all these paragraphs contain the definition, but both alternatives aren’t always suitable.

strong element

If the content is important for other reasons (e.g., not every definition is important, or things other than definitions can be important, too), you can use the strong element. It conveys

strong importance, seriousness, or urgency for its contents.

You can even convey the relative level of importance by using more strong elements:

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

As the strong element can only contain phrasing content, you can’t mark multiple paragraphs with one strong element.


If the content is important for other reasons, but happens to contain a definition, dfn and strong should be combined, of course. And even if every definition is important, you may still use strong in addition, either to convey that definitions are important in this document, or to convey their relative importance.



回答3:

There is a group of DOM elements intended to add emphasis to the HTML content:

  • strong
  • b
  • em
  • i
  • del
  • strike

However, while semmantically, this will indicate emphasis, no screen reader (JAWS, Window Eyes, etc) will indicate so.



回答4:

I will use strong tag.

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

The element is for content that is of "strong importance," including things of great seriousness or urgency (such as warnings). This could be a sentence that is of great importance to the whole page, or you could merely try to point out that some words are of greater importance compared to nearby content.